Overview

As THE ICONIC design team grew, it became increasingly important to maintain a consistent style and visual language across the website.

With designers working in different squads, there was a clear need for a unified design language to help guide and leverage fundamental elements.

The end goal was to have a collection of reusable components, guided by clear principles, that can be combined together to create as simple or as complex experience as needed.

How this came about

When I started at THE ICONIC it took me longer than usual to get my head around their design language. There was no design on-boarding, there was no ‘way we did things’ and all designers were essentially creating their own experiences and leveraging other designers work, we designed to different mobile screen sizes and were driven by preference rather than process.

The goal

My aim was to firstly get the designers consistent and eventually to get resources to build a centralised place for both developers and designers where all rules, designs and code would be documented and reusable.

02

Research —

Discovery

The first step was to review the entire site end-to-end and document and then categorise the current components making up THE ICONIC website and app. Reviewing elements such as form fields, radio buttons, images, accordions and cards etc. During this process we found many inconsistencies.

Laying the foundation

Atoms

Molecules

Organisims

Templates

Pages

The key idea behind this methodology is small, independent, atomic-parts that can be combined into larger molecular structures.

This foundation defined our grids, spacing, typography, dividers, border radius, shadows, buttons and form fields.

03

Results —

The roll-out

We began this process by creating a master Sketch file that was the source of truth. Within this Sketch library were the basic fundamentals made into symbols and used across all new files.

Designers were alerted to any changes to their libraries and we were all able to update our files quite easily. We used Zeplin and then Invision as a shared resource with the developers.

Master Sketch library

12hrs → 45mins

The preference centre I worked on was designed in 1 day due to using reusable components. A feature like the preference centre would usually take around 2 weeks of design time for desktop alone.

We also designed the ‘Sneaker Freaker’ campaign in 45 mins using the new design system which would normally take 12 hours.

#votefordesignsystem

Throughout this development, my manager and I spoke at company wide stand ups, learning days and at tech townhalls, trying to sell the importance of the design system. We were aware that THE ICONIC Design System was not a one team project and if we wanted it to succeed we needed everyone on board.