Help Scout.
Product Designer • UI / UX / Prototyping • 2019-2020
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.
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.
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.
