Say hello to Toolbox
Creating a design system from scratch is nothing new, but there’s definitely a very good reason as to why the digital product industry is moving toward holistic visual (and copy) based approaches for their entire output.
Gone are the days of individuals having a specific output that may well be unique to themselves. Instead, businesses are developing an awareness of the importance of a universal creative vision. One that transcends mere typography and buttons. A design system is a business model, not just your app.
That said, what happens when you build a system for your app? What constitutes the mythical ‘v2.0’? At HeyBryan we wrestled with this question for a while. As a new business, we’ve spent the majority of our time fixing holes and filling gaps as rapidly and efficiently as possible. Spending months rebuilding the app (which already worked well) from the ground up was a difficult sell to the wider business, rightfully so.
Through a combination of user research, in-depth discussions with our development, marketing and product design teams we pulled together what amounts to a ‘pitch’ for the business. A clear display that building fresh is the best decision for our business right now. What follows is a breakdown of what our design system is, why we decided to create it, and the final execution.
What is it?
A comprehensive design system for HeyBryan. The core principles for our design framework, and how that will positively impact our product. We’ve redesigned our app from the ground up — injecting personality and character through conversational design.
It’s been a huge ask for our small team which provides an extraordinary amount of benefits to the business and our users.
We set ourselves very clear goals in mind: unite departments around a common visual language, deliver consistent user experiences across products, and increase development speed.
Why now?
There’s an interesting dichotomy between what a comprehensive design system offers internally to the business, and externally to users and customers. The term ‘efficiency’ is used often and for good reason. As a new and growing business, we’re rapidly approaching the stage where unscalable, rapid-fire solutions are no longer viable.
As time has progressed over the last two years, design and development have strayed further apart in their ability to accurately represent the app.
We accrued a large amount of design debt and discovered multiple usability issues through our user testing. This wasn’t a case of patching over holes with more features, this was now a project to revisit how people use our app.
We aimed to improve user experience, internal efficiency, and enable scale as we transition to our rapid growth stage.
“When creative decisions are deferred, debt piles up. When files are not maintained and different design patterns are implemented to solve the same problem, debt piles up. It shows its face when strategy and scope are poorly defined upfront and your stakeholders question fundamental design decisions or decide to add features in the 11th hour.”
https://medium.com/methods-madness/design-debt-and-how-to-pay-it-off-9a933ccf6d82
Conversational design
First, imagine and write the conversation you would have with the user if there were no interface. Then use this conversation to guide the rest of the design. This includes the selection of the medium of interaction, the visuals, and the interactions.
https://medium.com/swlh/notes-on-the-book-conversational-design-a06ef331871
The system speaks the user’s language. Our use of copy and interactions breathes personality into our product and allows us to communicate with users in easily understood ways.
We’re asking people to change the way they approach home maintenance. That’s a big ask and requires a fantastic execution across the entire business. The strategy is integral to developing an effective brand — but what does that mean when it comes to our words and pictures?
A core element of this is the language we use. Rather than serving as an action-orientated interaction, how can we better approach the motivations behind using the app?
As our copywriter beautiful put:
“You don’t use HeyBryan to fix your oven. You use HeyBryan because you have family coming round on Sunday, you’re cooking for 14, and the oven barely ignites.”
Home maintenance issues are lifestyle issues. Every issue you have has a real and personal motivation behind it. By speaking to customers and experts in a way that appreciates and understands this, we become far more useful and beneficial than a simple app in your pocket.
Process
We followed Alla Kholmatova’s excellent book ‘Design Systems’ — creating design languages for digital products. It proved a remarkably useful tool and something we’ll be revisiting time and time again.
We began with an interface inventory, created by deconstructing pages into their simplest component forms and defining the essential design patterns.
From there we began a process of auditing all interface elements, which uncovered inconsistencies, exposed redundancies, and ensured all components were accounted for.
Design Principles
This is where our design principles once again come into play. I go into more detail on these in my Brand post, but suffice it to say that the principles were generated in regards to starting our journey into the world of a design system.
Empowering
Nothing makes you feel uncomfortable or like you can’t trust the system. The system aids you when needed.
Inclusive
Everything we design should be as usable, legible, and readable as possible. We prioritize accessibility over beauty.
Conversational
The system speaks the user’s language. Our use of copy and interactions breathes personality into our product and allows us to communicate with users in easily understood ways.
These principles apply to the entire business, from our mindset to the tools and patterns found within the system itself.
The purpose of HeyBryan is simplicity. We must enable customers to book a task in an intuitive and effortless way. We must enable Experts to grow their income through as little lead generation as possible. We must enable customers to feel as confident and rewarded by using HeyBryan, as they would be doing the work themselves
One task per page, with room to breathe.
Everyone in our company should value the importance of home happiness. It’s the product team’s responsibility to put that value into action.
Defining patterns and content
The first step was to identify aesthetic qualities and pin down distinct elements that convey the brand.
Similarly to the interface inventory, we then collected and grouped individual style elements by purpose, and defined patterns. These were then defined through individual purpose and feel.
Documentation and organization of patterns was the most time-consuming and vital stage of the process. Having a common methodology for organizing patterns made it easier to add and find things as the library grew.
The final result of the design system is a product that focuses on accessibility, inclusivity and aligns with our users’ mental models.
Benefits
Of the many benefits a design system affords the business, collaboration is the key. Through a single coherent system, we ensure that there is only one ‘language’ spoken between departments.
We’re fostering a smoother, faster, more robust translation from concept to the end-user. This helps reduce assumptions and potential mistakes made during development. It also engages our designers in a far better understanding of what goes into creating an effective product. For a growing business, you must have the capacity to develop for scale.
By rebuilding our product from the ground-up, we’ve enabled a huge reduction in technical debt and future accumulation. It’s been a reset switch for the product, one that will reshape our business and development as a whole.
We’re designing for trust and transparency, and throughout the process we have made sure to adhere to these key principles in every design decision. From button placements to little additions such as helper text. We better communicate how we keep user’s data/payment info safe as well as offer support around confusing terminology or actions.
Keeping users informed of what’s happening with their task seems obvious, but in the pace of development over the last two years adding these quality of life features have often had to take second place to critical functionality.
Consistency is vital in a user’s experience of the app. By reducing the number of unique patterns, users learned which feature means what. Navigation and use of the app has improved the familiarity and created a more cohesive experience.
Execution
“Marginal degradation of brands: bad user experiences, no matter how small, aggregate in the subconscious of the users, which in turn causes them to trust the product less and regard the brand as unprofessional.”
https://uxdesign.cc/what-is-design-debt-and-why-you-should-treat-it-seriously-4366d33d3c89
Looks do count. In human psychology, the first attraction is the visceral appeal. Selling in an update with the argument that it ‘looks better’ is rarely successful and often overlooked.
The app in its previous iteration was perfectly functional but represented an outdated version of our brand. We risked further diverging from the course set by our outward-facing marketing, and customer-facing product.
Since launch, we’ve learned a hell of a lot, fixed a hell of a lot, and grown a hell of a lot. Throughout this period the appeal of updating the typeface was overshadowed by the urgent business needs raised by user feedback.
That said, an ugly product that works well will never offer the hook customers need. Toolbox addresses this issue head-on. Appropriate spacing between sections. Clear and direct navigation. No overuse of colour, and a vehement belief that simplicity is key to a successful user interaction.
We’re keeping it clean, with splashes of personality discovered through our brand messaging and splash screens.
Wrap up
As we gear up for launch, we’re expecting to see an improvement across the board. Successful sign-ups, booked tasks and crucially, happy users. It’s been a hugely beneficial addition to our small internal team and has reduced sprint durations.
Most importantly, it’s helped bring the company even closer together than before. We’ve had heated discussions over type spacing and hilarious conversations over the relative sizes of planets, mammals, and fruit — all in the name of conventions.
To that end, I want to give a huge thanks to our brilliant product designer and development team. Without their monumental input, Toolbox simply wouldn’t exist.
If we can operate more efficiently and customers and experts alike feel more comfortable and confident in the use of our app — then I’d consider that a success.
Credits
Senior Product Designer: Ken Day
Development: Nevin Petersen (CTO), Saran Siri (Developer)
Senior Designer: Nick Leonard
Senior Copywriter: Marcus McLaughlin
