HootsuiteHeroHootsuiteHero

Live Chat redesign

Live Chat is a feature that lives on the Hootsuite Support site and enables people talk to the customer support team. The major problems it faced was that it was difficult to use and the visual design and layout was out of date with our UI guidelines. I spent 3 days on this project with a team of 3 including a PM and 2 engineers. 

1.OldUI_-11.OldUI_-1

The recommended proposal really focuses on perceived time-to-value. The new design gets rid of the form and replaces it with a simple chatbot (inspired by Slackbot). Forms are tedious to fill out while having a conversation can feel more intuitive and natural. To the user, getting into the chat UI immediately feels like their problem has begun to be addressed while behind the scenes the bot is still collecting the key data points like their email, query and type of request. 

To differentiate between the bot and the human representative, a profile photo is shown along with a real name. The goal for this design was to improve customer sentiment without creating more pressure on our customer support team. 

Here are the different states for when support agents are unavailable and when the chat UI is minimized. In empty and loading states, I added relevant links to point the user to a library of support documents.

4.Optimizedforproduction-14.Optimizedforproduction-1

I also produced a proposal that was optimized for production. This took all the obvious low-hanging fruit improvements and applied them which was much easier to implement over the proposal optimized for user experience. In the end this was the solution that was selected due to the lack of engineering resources to develop the logic behind the chatbot. 

This project taught me a lot about user experience that extend beyond visuals and interactions. If we went forward with the chatbot proposal, developing how the bot spoke and its personality could be much more important than how it actually looked. 

James Wang © 2018