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


UI design
Visual design
Art direction
Pattern library


Nov 2018


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.


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.


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.


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.


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