Buzz Usborne
Menu

Chat App

Summary

For over a decade Help Scout was an email and phone support tool, architected around servicing those two means of communications. I was tasked with extending the product to allow real-time chat communication — a multi-year project that spanned both in-app and embeddable projects.

Designing for scale Direct link

An interesting part of this project was how chat would integrate within our existing suite of features — which until this point had been centered around asynchronous communication. How did chat fit into reporting? How could we help customers keep focussed on a conversation, and not overwhelmed by volume? How do teams keep a human touch?

Taking a super collaborative approach, I involved engineers and leadership at every turn — making sure everything we produced was technically viable but also represented the direction the company and market was headed. Working across hemispheres, a big part of my approach was sketching, prototyping and video feedback.

Original sketch for chat
Original sketch for chat
Original sketch for chat

Designing the details Direct link

What I found the most interesting little deviation there is between chat products on the market. It turns out that there’s a user expectation of how these types of UIs operate — so there’s not a huge amount of opportunity to take a conceptually unique approach (unless you’re Facebook, of course). So my solution was to design a “standard” chat app that included delightful details that made it uniquely Help Scout.

Menu interactions for availability

Since Chat represented an entirely fresh approach to the product, it was also an opportunity to establish some newer design patterns that we could then roll-out to the rest of the app over time. Patterns involving depth, animation and accessibility were created for this project and later absorbed into the design system.

Visual changes to the global nav to accomodate chat
A whole new sidebar navigation for chat

There can be a lot going on with an active chat, but I wanted the experience to feel light and friendly no matter what the content type — which followed a principal that our UI should be additive to world-class customer support.

The full chat UI

Connecting humans Direct link

In a world of bots, AI-generated content, tickets and agents — we saw an opportunity to make sure that our products were connecting real humans, facilitating helpful conversations and enabling quick resolutions. Everything I designed since was an attempt to maintain a warm and human relationship between our customers and theirs.

Beacon highlighting the humans behind the chat

Plays well with others Direct link

Whilst wrangling legacy features and figuring out backward compatibility isn’t glamorous — this project required deep integration with the existing product. This included the interplay between chat and reporting, emails and user permissions.

Reporting on chats
Email reports for chat