Design System

A comprehensive Design System created with consistency, ease, and speed in mind for one of Australia’s largest private health insurers.

As Design System’s have become increasingly common in the digital space, more organisations are seeing the benefits of creating and maintaining their own Design Systems.

It was time for this health insurer to embrace one of their own to assist with their ambitious digital goals.

The pitch

I pitched creating a Design System to this particular client after working with them as a consultant through Wongdoody on an initial piece of work that involved rebuilding, and improving two key features of their current app.

This project ended in a great result, and was very well received by the business and their customers. However, it was impossible to ignore how a Design System would have led to a smoother, more consistent, and speedier result.

This client like many others valued visual and experiential consistency across all their front-facing channels including: digital, print, social, wayfinding, and branch layout. Their previous approach, or lack of, set them up for failure at almost every opportunity when it came to digital.

Each screen and feature set to reinvent the wheel from design to delivery. Components were coded by scratch every time, there was no typography or colour guidance when it came to their website or app, and prior design files were spread out between software, and sometimes external agencies possessed the working files.

All of this led to many inconsistencies, which in turn made being consistent virtually impossible.

A presentation slide detailing how a Design System can improve processes.

Utilising Keynote magic

I set to work detailing the very valid business case for prioritising building a Design System. Through the pitch I focused on three key things the Design System would set to achieve:

Consistency: A Design System would help a long way in smoothing out existing consistency issues. It would provide a base set of styles, colours, and components, i.e. buttons, input texts, date pickers, etc. that can be used again and again.

Efficiency: With a Design System at their disposal, this client could improve efficiency within their projects a substantial amount. If used effectively, teams outside of design and development would also be able to share in the results and benefits. Currently designers and developers spend an abundant amount of time determining visual requirements that should already be established, hunting for or creating assets that may already exist, agonising over how to be consistent when inconsistencies are abundant, and code not being reused effectively. Resolving these issues could lead to time saves across the board, particularly in change management, and internal brand reviews. All of this can contribute to on-time and on-budget deliveries, therefore assisting stakeholders and management.

Speed: With consistency and efficiency, increased speed generally follows. With projects being completed quicker, resources and time could be freed up to work on other endeavours to benefit the business.

Whilst these were the three key takeaways, the presentation also covered:

How specific teams could benefit in detail
How a Design System would have aided the initial piece of work I completed for them
Why now was a perfect time, as they were months away from commencing an ambitious digital roadmap that would see them building a new app and website.
A roadmap of how myself, along with Wongdoody could make it happen

Only 20 minutes in, and halfway through my presentation; I was given the green light to start.

Getting started with an audit

As a first step it was necessary to get a clear picture of the current digital landscape. Whilst I had my own experience to go off, an auditing process was necessary to give us the best chance of creating a system of value. My aim was to find and document existing components, guides, and assets that could be utilised, and build a priority list of components to tackle first.

Over the next week myself and another designer put together a component audit spreadsheet that highlighted how specific components and any inconsistencies. During this process we also put together a comprehensive site map of the current website and app. Whilst this exercise focused primarily on UI, we did document existing accessibility efforts where used, and component states, i.e. hover, active, disabled, etc. At the completion of the audit phase, we had a better understanding of what components to prioritise, and visually what we should aim for within the Design System.

Deep diving into the foundations

This particular client had a dedicated brand team who were very passionate about maintaining brand integrity across all channels. Their team unfortunately lacked capabilities within digital which had in part contributed to the prevalent inconsistency pre-Design System. We collaborated closely with Brand whilst establishing the system, which allowed us to collaboratively define how their company’s brand best translated to digital, and compliment the great work already existing in print.

Before diving straight into components, it was very important to shape and nail down what the brand foundations were. Whilst this project was not a rebranding exercise, there were areas we could ‘freshen’ up to best suit digital, and make adjustments to better meet WCAG accessibility guidelines.

We started off with colours. This client has a highly distinguishable colour palette, and relies on this heavily across all channels. For digital we established a colour guide where colours were given roles within the UI; e.g. teal for success, purple for information, orange for warnings, etc. This approach gave designers the guidance and confidence to utilise colour in a consistent, brand-approved way. A much needed improvement from the ad-hoc way of the past. Once these roles were established we could work on expanding the palette to include tints and shades, and add colours where necessary. These additional colours included a grey palette, and promoting red and orange from their existing tertiary palette to be used for errors and warning states.

Typography and colour were where we had the most changes to impact accessibility. A major victory was increasing the baseline text from 14-16px, to 18px, allowing many of their customers that have poor eyesight, or are part of an older demographic to better use and interact with their digital products. The Brand team was eager to learn and understand accessibility requirements, leaving me feeling optimistic that the client will continue to improve upon their offering.

Grids, spacing, logos, focus states, and icons were also covered within this foundation design phase.

Components time!

Once the foundations were signed off, we could jump into the meaty parts. I had already established a timeline to work with that prioritised components based on importance, and what would be required first when creating their new app; a project that was set to kick off in weeks!

Using a divide and conquer approach, myself and the other designer tackled the most common UI components including: accordions, progress bars, images, buttons, and inputs to name just a few. We took full advantage of Figma’s advanced features to build out the system. Variants, styles, Auto Layout, and consistent naming conventions helped immensely during the process and would benefit designers using the system in the future.

Throughout this project, brand were not left in the dark. I conducted weekly showcases to highlight progress, and make alterations to components or the foundations as needed. As we had done the hard work within the Foundations phase, changes to the components began decreasing over the life of the project.

End result

Twelve weeks after the audit phase commenced the client was presented with a Design System of their own. The delivery included:

Established styles and an introductory brand guidelines for digital: colour and text styles, grid systems, effect styles, logo in varying sizes, and additional client specific branding elements.
A comprehensive icon library with linear and filled options of differing sizes, ready to expand over time. It will also act as a central location for icons going forward.
Twenty-eight separate components, including: accordions, buttons, radio buttons, checkboxes, dropdowns, navigation, badges, imagery, date pickers, and dividers to name a few.
General documentation on how to use and enable the system within other files; maintenance processes and strategies, and the process for adding and/or changing components.
Component specific documentation within the Design System file, and utilising Figma’s variant note feature so designers could retrieve information from any file they are working within.

This particular project was extremely successful in demonstrating the benefits of a Design System specifically to their business. The Design System is currently being used to build themselves a new native app, due to be released in 2023. I am working on this new app project as part of a larger design team, where I am working across UX, UI, and maintaining the Design System. The difference in project structure before and after the Design System is difficult to ignore. There has been a lot of positive feedback from the other designers, which are now relying on the system. A great result, that will become greater in time as the Design System continues evolving.