Live Chat Widget - Threading

Gecko Chat has been a real growth area for Gecko in the past 12 months but as we have gained more users, we have also identified areas that may not work as well as they should for our customers. One such issue is how we handle multiple conversations with the same student.

Chat accounts can have multiple channels, such as live chat, email, WhatsApp, texting and Twitter. Having all of these channels on one chat interface is confusing for both the admin and the student. We are therefore attempting to solve the issue with the introduction of threading.

With this in mind, we needed a way for the live chat widget to be able to handle multiple conversations.

Other issues

It was also the perfect time to address some UI inconsistencies and UX problems.

  • Centred text, which can often be difficult to read
  • Field inputs inconsistent with our product suite
  • Colour contrast issues
  • No way of telling if agents are available

First things first

I wanted to address the UI before addressing the main problem. I felt with a clean slate and refreshed design, it would give us a solid base to then address any new functionality.

The newly created design system would form the base of the new design and would instantly solve the accessibility and UI inconsistencies.

In terms of the aesthetics, our other student facing software, the Visit App, had recently undergone a re-design, to keep consistency the chat widget would contain similar visual elements such as the rounded corner card and coloured header.

It is worth noting that we allow customers flexibility in terms of customising the widget with their own brand colours, something we have to be fully mindful of when it comes to accissibility.

Old Live Chat v New Out with the old and in with the new. The refreshed live chat widget, fixing various inconsistencies and issues.

Addressing the main problem

With a clean slate, the issue of how the chat widget handles multiple conversations could now be addressed.

To solve the issue, we’d need to introduce another step into the live chat process. Currently users would complete a pre-chat form and then instantly be taken to a conversation screen. With having to handle multiple conversations, this wouldn’t work. It was felt we’d need to introduce a step in-between, one where the student can see previous conversations or begin a new one.

It is also here where we solved the issue of not knowing who was available with the introduction of the available agents component.

Three Step Process The new three step process. Register details, view previous conversations, chat with an agent.

Thoughts

So not only has the live chat widget been given a facelift and brought inline with the design system, it also provides game changing functionality to our customers and their students.

The proposed visuals are currently lined up for a future engineering sprint, we’re all excited to see what benefits they bring and how it fares out in the wild!