Part 1: Pattern library
Translating a new brand style guide for the digital environment. Our first attempts of a design system.
CHOICE is a consumer advocacy group in Australia that leads the way in helping consumers to choose the best products and services. They are an independent, not-for-profit organisation giving unbiased advice that is supported by in-house expert testing.
As CHOICE is member funded, members have access to online reviews of 1000’s of tested products and services. Through their website, users have the ability to filter through product reviews to help them when researching to buy a product or service.
My role
Interaction Designer
Skills
UI design
Visual design
Art direction
Illustration
Pattern library
Accessibility
Timeline
Nov 2018
PROBLEM
How might we ensure design styles are consistent in all CHOICE products?
Currently there are 3 digital teams as well as content, marketing and social teams that all require to output digital content, whether it be through the website, campaigns or social media. CHOICE had undergone a rebrand with the help of an external agency, but what came out of that, which is often the case, was a loose styleguide that didn’t completely address the digital environment.
SOLUTION
Implementing a design system
When 2 teams were required to work on the same product – the CHOICE website, it was apparent that we required a digital style guide and from there I advocated to put a design system in place.
So why did we adopt a design system?
- Have a single source of truth and share a common language
- Avoid repeating elements, patterns and increasing the design debt
- Consistency and helping brand recall
The former state
Before we started the design system, we had a pattern library that was captured in Confluence, some styleguides from a brand agency in pdf and various assets spread throughout many folders, on personal and shared drives.
Approach
There were early discussions between myself, another Interactive Designer and the UX Design lead about how we would approach the design system, what kind of process would it involve and what people would be involved. Due to the size of the teams and organisational priorities, we decided to create the design system as a side hustle while working on our core projects.
Colours, typography, components…oh my!
We started with the brand style guide as our base as we already had the colour palette in place. The typography required some deeper thinking as we needed a web-based font that wasn’t going to affect page speed and performance. I collaborated with my design colleague around typographic hierarchy and we assessed various treatments throughout the CHOICE site.
Patterns from the existing library were also redesigned to incorporate the brands new fonts and colours. I also worked on redesigning forms, form layouts and form interactions. Slowly but surely, we have continued to design new components that we implement into the design system.
The source
As Sketch and Invision users, we decided to use Invision’s DSM. (aptly named, Design System Manager), so now all our UI assets, design guidelines and tone of voice guidelines are located in a living document that we can reuse as we need.
As part of the design system, I also developed the illustration guide, depicting how icons, spot illustrations and scene illustrations can be used and how to create them.
TAKEAWAYS
What I learnt from this project
Involve more key players
If I could go time hop back, I would have liked to have approached creating the design system like we would have a product – with a roadmap, deeper research, an extensive audit and more thoughts around how we maintain the system.
Designed for scale
As a design system is living, there is no finish line and it will evolve over time. Just as the design system has to adapt to emerging trends and new organisational objectives, I need to also be responsive to those changes.
SPECIAL THANKS
Interactive Designer Soraya Asmar
UX Adam Barnwell