Help Scout.

Product Designer • UI / UX / Prototyping • 2019-2020
Wireframe of Beacon Message Wireframe of Beacon Articles Wireframe of Beacon Chat

The problem

The first iteration of the Beacon SDK by Help Scout focused on getting the core functionality found in its web counterpart: self-service and message sending, into a mobile-friendly build. What it lacked, however, was a primary focus on the mobile experience. Some design patterns were taken from the web that did not quite gel with a mobile user's expectations. I worked on making the transition to a more native feel, while reworking the UX and the UI.

Crafting for mobile

Users have come to expect specific design patterns when using their phones, even if they aren't aware of it. Searching is generally at the top; swiping left takes you back. All ingrained into us through repetition. Beacon's core experience was adjusted to make it feel part of the platforms we were developing for, while maintaining Beacons' own sense of visual identity.

☝️  Some high level sketching for how all the pieces would fit together
☝️  Grid considerations applied to Beacons typography alongside some animation exploration for iOS
☝️  A collection of different screens found in Beacon iOS

Design hand-off

Animations help guide the user along, and micro-interactions, those small blink-and-you’ll-miss-it moments, add that extra polish level. With this update, we completely overhauled all the animations within the app.

But how do you communicate these transitions to those building the app? Prototyping tools have come a long way, but their output remains the same - essentially a ‘video’ of what you want the app to accomplish: no code breakdowns, no real hand-off. Just more fancy prototypes that’s ultimately eye candy, useless to those that need the nitty-gritty details. What usually ends up happening is guesswork. Given how nuanced some of these interactions can be, that never ends well.

I decided to address this by creating Aanimator.

Aanimator is a hand-off tool designed to cover these interactions in a step by step fashion. Documentation is added on an app screen basis, and developers can access that nuanced information without the guesswork. Help Scout is a remote-first company, so good documentation is key to working life. Aanimator meant engineers could access this information, any time of day, without being bottlenecked by design.

☝️  Aanimator showing the transition properties for various screens in the iOS SDK
Position
Org
Year
Work
Www
Prev Work.
Pic of Sean
Seán Bot Ask me a question!
Hi! I’m Seán Bot 🤖
I’m just like Seán, but a far better conversationalist 😉
How can I help you today?
I just wanted to say hello
Well hello there!
Thanks for saying hi 😁
I hope you've enjoyed browsing my work
Can I help you with anything else?
I’d like to hire you!
Ok, great!
Exciting times 🕺
Send me a message and let's chat further!
Interested in mentorship
Hi!
Thanks for reaching out
Unfortunately, I don't currently have any capacity to take on the role of mentor for any new students this year
Thanks for understanding
Can I help you with anything else?
I'm looking for your old site
Unfortunately, the previous site is no longer available 😔
My work has changed since the site was created almost a decade ago
I've updated it to better reflect my life, current work, and ambitions
Thanks for understanding
Can I help you with anything else?
Other options?
Try the following!