​LeapXpert V2.0

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?

Account Manager

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

Clients

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?

Vision Changes

Out of trend

Take out unused features

Product Dept

Change Color Scheme

​Old

• 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

New

• Changed the primary and secondary colors

• Generate more color shades on primary and secondary colors

• Set up one more neutral colors for light theme

Contact List

old-contact.png

​Old

• 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

new-contact.png

New

• 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

 

​Redesign Interface

Chat Room

chat-old.png

​Old

• 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

chat-new.png

New

• 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

 

Dialogs

old-dialog.png

​Old

• 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

new-dialog.png

New

• 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

Takeaways

Instruction_Initial_03.png

Coach Marks

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.

WebResponsive_Chat_1600_03.png

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.

 

WebRes_SharedClient_01_List.png

Tooltip

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.

new-contact.png

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"

 

Light theme

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

​Thank for watching