Live Chat Re-Design for MCM Brand Site
Why the need for improvements:
Updates to the existing Live Chat button was necessary due to the usability issues. Some issues addressed are; inconsistency of chat icon and terminology on different places on site, misalignment of the chat button link on email and contact page, and massive button size on mobile.
<I have executed this project with a project manager and a digital designer. 80% design contribution.>
Previous Live Chat Designs
The black chat box with logo did not blend in with the overall site interface. Terminology needed to be reviewed and aligned with all other languages offered.
New Design Iterations
I explored different black button options along with new icon drawings. The challenge was to design the button big enough to be recognized but not too bold to draw all attention on page.
Final Re-Designs
Minimized white Live Chat button state.
Integrated White Live Chat Buttons
White Live Chat button with revised icon and copy are introduced. The button color changed from black to white to blend in more with the overall site interface. A new icon was drawn and added for this particular functionality. With a green and red checkmark, users are able to distinguish whether Live Chat is available at the time. The button is adapted for different languages for countries that MCM site offers.
Mobile Live Chat Screens
A few additional decisions were made such as the positioning on mobile and the addition of the button to the Contact Page and emails. On the mobile screen, the chat button cannot be in the way or covering other important elements. The hierarchy of automated messaging and chat was aligned to the styling from the site. Same icons and terminology was also applied to other pages
Same icons and terminology are applied at other pages such as the contact page, and marketing emails to indicate the availability of Live Chat at the user’s time and location.
Live Chat use in sequence
New Live Chat In-Use