A Designer’s Work Is Never Done
We’re not ones to revel in success, and as soon as Beacon was launched we got sucked back into the next phase of the project.
As with everything we launch, we listen closely to the feedback of customers — of course Beacon was no different, and the feedback was useful in helping us choose which areas to focus on and improve.
So while the Engineering.
,
Building Beacon
At Help Scout, once we figure out the rough outlines of a design, we usually like to jump straight in to building a working version in code.
Static designs make a lot of assumptions and can only take the product experience so far without real content, so we like to get into a working prototype fairly quickly to help inform the best solutions.
For B.
,
Concept, Test, Repeat
The process of designing big features like this is pretty standard — it generally starts by drawing hundreds of wireframes and figuring out which of them feels best.
This was no different.
The idea was to be as messy as possible, but to figure out an end-to-end customer experience that felt simple and helpful.
Not surprisingly, Beacon quickly got p.
,
Design
After numerous iterations and countless tests, we felt confident about the ideal user experience and moved onto the visual design phase — which, as always, began with sketching and trying lots of different ideas.
As is so often the case, by the time I got to this stage of the project I thoughtI had a clear idea of what I wanted Beacon to look like .
,
Making A Difference with Animation
Improving Beacon with animation was a larger challenge, namely because I wasn’t exactly sure what needed improving, or where to start.
At the time, Beacon was fairly static in the sense that it felt like a series of linked screens, rather than a smooth end-to-end experience.
So instead of adding arbitrary animations, I decided to focus on anything .
,
Re-Designing A New Product
The first thing I set out to do was to build what is now known as the Help Scout Design System (HSDS) — a huge library of UI and coded components that covers every part of Beacon, defining how things look, feel and behave.
This involved re-designing and re-building every part of the initial Beacon app, not just for the sake of consistency, but also.