Communication platform between employee, clients and your organization.
What is LeapXpert?
LeapXpert is a chat app with a high-security level with integrating on Wechat, WhatsApp, Line, other social chat apps. We make the invisible to visible. With the LeapXpert communication B2C platform, you monitor, record and own all communication activities between your employees, clients, and your organization.
My Role is
As a part of the product team, I joined into the redesign process to make the new interface. In order to achieve the goal, I encountered to understand the vision change, plan to conduct usability testing and contribute to the design system with my team members.
Who is using our platform?
Who working on bank or organization. They want to use our platform to monitor, record own all communication activities between their employees, clients, and their organization
Each client has own account manager. They want to use our platform to saves time and effort by being able to always reach out to the company. They can use other chat platforms to chat with their account manager
Why we need to redesign interface?
Out of trend
Take out unused features
Change Color Scheme
• The color palette was generated more than 40 colors and was not following the color system
• The primacy color as blue too bright
• The secondary color was low contrast
• Cannot reuse on light theme
• Changed the primary and secondary colors
• Generate more color shades on primary and secondary colors
• Set up one more neutral colors for light theme
• The top navigation bar was heavy and made the user confusing to navigate to other main sections
• Spacing on each item too big and waste spaces
• Too much information on the right side. It made user don’t know what should they focus on
• The contact list is sorted by alphabet
• Group the content the right side to help user easier to sort the content that they want to get the attention
• Navigation hard to navigate
• The group chat list might have a really long list make user waste time to scroll down to see the new messages on the Direct section
• Call to action button too much stand out
• Gather main actions on the platform to the left sidebar
• Merged direct chats and group chats into one list and sorted by latest messages
• Improved main header top to get the concentration and save the extra space
• Hard to scroll down the content because the call to action will be hidden
• Hard to find exactly the contact who want to add in group
• Some main action will be floated when scrolling down the content inside
• Save space and make the layout more clear
• Easy to search by keyword or sort the subjects
Conduct Usability Testing
We have released the beta version with customers, therefore it's time to evaluate and iteration before the next major feature ideas come up. Make us figure out what high risk and low-certainty situations.
Collect Critical Issues
We took the time to observe the video which collects from this video. By the way, we counted the misclicks, noted all things need to get the attention. Furthermore, we found when they got mistakes on failed missions
We added coach marks when users visit a page for the first time or when a new feature is added, or in response to an action, like activating an info icon.
Add clickable state on significant call to action
• Some of the significant actions should be considered to make it clickable.
• For example, we made the username and participants on the header clickable to open the information section in the chat room.
We added the tooltip with caption label on hover state/ small text below the icon to make the call to action clearer.
Furthermore, It will also help to reduce waste time due to the accuracy of the target.
Change the meaning of the name
• On the contact list, most of the tester feedback believes that Team is the group chat, instead of Account Managers. We changed the label from "Team" to "Account Managers"
Most of the tester more likely to work with the light theme on a long time, so we are pushing the light theme plan to be a priority