Let’s Chat

Principal Designer Help Scout 2017–2020

Designing Beacon

The brief was straight-forward enough — to bring chat as a communication channel to the Help Scout platform via the existing embeddable widget, Beacon. The original Beacon (shown below) was designed as a super simple way to view help documentation within our customers’ websites — though never intended to extend to much more. So... add chat to the widget and call it a day 😜

Below/ The original Beacon

Starting from scratch

Since this small widget was going to be the gateway to chat and our future plans, I pushed for re-designing Beacon entirely using mobile-first principles. Aside from wanting a fresh start, early explorations revealed that my biggest challenge was going to be navigation — with so much functionality bundled into a small space, traditional desktop methods would have made this little tool feel heavy and hard to use.

Through lots of trial-and-error, user testing and big-boy tears I ended up using layering and depth to give the user a sense of structure without overloading the UI with navigation. I wrote about my design process here, and how that "ahah!" moment struck whilst on date-night with my wife.

Below/ How layering works in Beacon

Stacking content was a really effective way of containing lots of functionality, however animation emerged as a really important method of providing the visitor with a sense of direction. Without animation, it was difficult to know where you came from, and how to get back. So, prototyping was key for this project — as was communicating animation’s importance to the engineers.

Designing a personality

Another key realization was the importance of UI details and micro-interactions to give each Beacon a fun and friendly personality, whilst also remaining unique to the brands and websites that were hosting the widget. As each Beacon could be branded and translated, personality came in the form of subtle animation and fun, unusual and sometimes-a-bit-weird interactions.

Eventually Beacon scaled to a being a fully-featured docs and chat app that’s used daily by thousands of customers and their visitors to educate and communicate. During the design and build phases, I also created a component library based off our design system to help keep things consistent.

As an additional challenge, every screen of Beacon can be translated and themed to match a customer’s brand...


Designing a Chat Admin

When a visitor sends a chat message via Beacon, there needs to be a place for Support Pros to receive, respond, manage and triage those messages. So whilst Beacon was being worked on, I set out to extend the existing Help Scout platform from supporting only email and phone to also (optionally) allowing chat communication. For this I designed an entirely new part of the product which neatly integrated with the old.

Turns out, chat apps are difficult to design — so as with Beacon there was plenty of iteration and testing involved in creating a seamless and native-feeling experience.

Above/ Real-time is truly a different ballgame than email

Additionally features like reporting, real-time availability, saved replies and keyboard shortcuts were a huge consideration for how the product operated and interacted with the existing tool set.


Onboarding

Whilst complex and powerful in nature, I didn’t want Beacon or the Chat Admin to feel overwhelmingly complicated or technical to create — so close attention was paid to designing an onboarding flow that felt lightweight, yet powerful. Ultimately Beacon isn’t much use if no-one is creating them!

Customers are able to customize colors, icons, translate every bit of text, even decide how prominent they want chat or self-service to be. It’s safe to say that settings play a bit part of the overall experience.

Settings are fun, too

Although it’s impossible to avoid forms, I saw no reason why creating a bespoke chat widget couldn’t be an enjoyable process. Sometimes this just meant choosing the right components, but other times it called for creating entirely new patterns which used the same depth techniques as Beacon.


Proactive Messages

In the time since Beacon was launched, consumer behavior has shifted — causing us to shift and extend the product in various ways. One of these shifts was towards proactive messaging... you know those little popups that ask if you want to chat? Building upon the foundations of Beacon, I designed these outbound types of messages to feel more personal, targeted and human than what you’d expect.

Messages, as they’re known within Beacon, can be used from cold outreach to product onboarding and hyper-targeted alerts.

As we moved into the territory of marketers, growth and business development teams — the need for metrics and reporting increased. Plus, what designer portfolio would be complete without a dashboard?


And finally…

As I worked through this body of work — I also used the opportunity to build out a design system and visual language for the entire Help Scout design team. We call it HSDS (see more) — a full platform UI library that exists as a translation layer between Figma and React (via StoryBook). Today I work as the design lead of HSDS, which has 12 key contributors spanning design and engineering.