CHOICE Design System

Establishment of a design system for scalability

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.

Role – Interactive Designer
User interface design
Visual design
Art direction
Illustration
Pattern library
Accessibility

Company
CHOICE

Timeline
November 2018 to present

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.

What we are yet to achieve?

This is by no means the perfect solution for teams in CHOICE and we are yet to see how scalable this system is outside of the digital team. In the confines of our team and the resource available, I believe it has helped us and will continue to help us deliver design solutions quicker. What we have yet to achieve is to bridge the gap between Designer and Developer as the code provided to Developers is rudimentary.

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

Next projects

Freelance / Agency

Selection of logos

Mixed print collateral

Dendy Cinemas

Tables and form layout / Brochure

Instituto Cervantes