Gecko Chat UX Enhancements

The Gecko Chat platform is a complete stand alone software within Gecko, and is a relatively new product. Unfortunately, (apologies to any devs looking in) the creation of chat coincided with Gecko not having any design resources on hand - and as such, had a few flaws in both overall design of the product and from a UX standpoint.

Enter the shiny new product design team (me!).

Our VP of Product, tasked me with undertaking an evaluation of Gecko Chat, and to create 3 quick win UX alterations.

Gecko Chat The revised Chat platform - conversation view.

The need for cohesion

While not exactly a “quick” win, I felt that it lacked general design cohesion. Font sizes and weights were different, spacing wasn’t consistent and the colour palette was…erm…pretty garish! I began coming up with a refreshed look, just by adding in some refinement, appropriate and consistent spacing where it was needed, creating a style guide for fonts, colours and user avatars. I knew that a complete overhaul wouldn’t go down well with management and would be a huge drain on resources, so subtle refinement would suffice (for now).

The design refinement Sketch stage also allowed me to begin scoping out some UX improvements to the system.

Sketch artboards of Gecko Chat concepts Sketch artboards with various views.

Online/offline status toggle

One improvement I noted was, that it was difficult for a user to toggle their online/offline status. This feature was tucked away in a user dropdown. I felt such an important feature should have a lot more prominence, and opted to pull it out of the dropdown and position it on the top nav bar, beside the user menu.

Online/Offline status toggle Status toggle in its new home. Upfront and prominent. No need to go digging around to find it.

Conversation sorting and filtering

Another glaring omission was the ability to quickly filter or sort conversations. When viewing the conversations list, the default sort was newest to oldest with no way of changing that order. After speaking with a few of our power users, it was apparent that this was a major pain point - they are handling 100’s of conversations each week and often re-open a conversation. This led to them sifting through a lot of conversations to try and find the ones they want to re-open.

A quick and obvious solution was to implement sorting and filtering options. For the filters, I opted to create these in a similar fashion to navigational pills, this will provide quick access to the preset message statuses - you can also see how many conversations are stored within each status.

I then created a dropdown sorting filter above the conversation heads. A dropdown wasn’t my preferred method, I tend to try and stay away from dropdowns as they often can be unnecessary, however screen real estate was at a premium and filtering in this method is already a pattern that users are accustomed to online, shopping sites as an example.

Conversation sorting and filtering You can now sort conversations as well as quickly filter.

Last message preview

Finally, an additional feature I felt would benefit users, is the ability to preview the last sent/received message from within the conversations list. Previously, users would have to open the conversation to see who responded last. By introducing this feature, users can quickly glance through conversations, and easily identify if certain conversations need further action, such as responding to messages or closing conversations. Displaying the user avatar is also a quick visual indicator as to who responded.

Last message received display Each conversation head now displays a last message sent or received. It'll also show you if the user is typing.

Thoughts

One of my big takeaways from this project, is that often small implementations can have a huge impact on the end user. By standardising the design, we achieved a more cohesive product. Not only that, the 3 ‘quick win’ alterations ended up ‘big wins’ with our clients, who are now more productive with the platform.