Argos Bolt Design System
Case study about the creation and continual evolution of Argos' first ever global Design System, named BOLT.
UX / UI Lead
2016 - Present
Salahdinne El kawakibi | Domingo Widen | Anthony Eamens
WHAT IS BOLT?
In a nutshell, Bolt is a global design system which helps designers and engineers to get connected, helping designers to create and upload core UI elements, accesible colours, global compoents, document patterns and share all things UX and design related to the wider digital product development team. It aims to make the process of design, coding and handover completely seamless, therefore streamlining workflow for all involved.
WHY WE BUILT A DESIGN SYSTEM
We came up with the following goals in which we would measure the success of our design system by. The design system should:
Increase engineering velocity
Create consistency throughout the website, native apps and in-store kiosks
Establish a shared language across our organisation
Increase optimisation and performance
First thing first, I conducted an audit of all of our existing digital platforms. I broke this up into two phases: visual design and user experience.
I began with auditing the typography; I enjoy doing this manually because I like to explore the relationship that type has to the context in which it lives. Next, I created a library of screenshots and organised them into their own folder. This offers us a quick glance into the debt that had been accumulated and what it would take to reduce it by implementing new reusable components.
To no one's surprise, there were over 50 different font styles, consisting of 5 different fonts and various weights and sizes, as well as discovering many different colours in hue and a whopping 25-colour palette. There were permutations of the same buttons, completely one-off randomly-styled buttons, various styles of input fields, and so on and so forth. we
Our cross-functional team consists of 4 contributors: 2 UX designers, 2 front-end engineers, and myself. Here’s a high level description of what our process looks like right now.
Every Wednesday, we meet to discuss the health of our design system, assign tasks for any updates required, and look at new components we need to build. This is important as it allows design and development to mesh and democratizes our shared vocabulary.
We break out components in terms of their functionality, so a text input and a number input will have their own individual component. When new designs are ready, we break out any new components and create supporting documentation.
Reducing components to a single function, like a button or a drop down increases flexibility, making them more reusable. The more reusable your components are, the less you need to maintain, and the easier scale becomes.
Our brand values are:
Earlier this year, we traded our custom branded display font, Argos Book and moved to an Open Source Google Font called Barlow. This decision was made to simplify and optimise our font usage, as well as in achieve AA Accessibility and increase page performance.
Accessible Colour Palette
The digital colour palette takes inspiration from our brand palette, using those to come up with accessible versions with more contrast, which look better on digital screens. We also came up with 5 colours to use as our greyscale palette.
Icons are all in in vector format (SVG) which works best for scalability and responsive design. Our iconography always uses 1.5px borders and can be different colours based on their context and size. We have 2 icon sizes, and use boundaries to allow flexibility when making visual adjustments (visual weight).
THINGS I'VE LEARNED & LOOKING BACK
To achieve a fully working, truly global design system, you must have a dedicated team looking after it's creation, maintenance and evolution.
Recurring meetings to stay on track, focused and releasing frequently are a must!
You must have materialized guidelines, do’s and don’ts and “good examples” of use for your users. Otherwise, people tend to be led "astray".