Design System

Themeable Design System

Themeable Design System

A collection of customisable UI elements, design patterns and standards, created as part of the CCX project for Coty, with the aim of improving consistency and quality of both our digital products and the product design experience. CCX received a nomination at The Drum's DADI Awards and was shortlisted for a UXUK award in 2019. 

Design System

The Challenge

When approaching a new project, it can be exciting to be able to start afresh, with no restraints, and let creativity flow. But when there are multiple designers working on the same product and deadlines approaching, it pays to have a unified system providing components and patterns which have already been refined and validated. This enables designers and developers to avoid repeating themselves, freeing them up to solve bigger problems and produce higher quality work.

Beamly’s product team started out with a small component library, created to help build websites for Coty’s beauty brands. As the company grew and multiple delivery teams adapted and implemented these components clients with different needs, the components diverged. This resulted in disparate, difficult to maintain sites, with features and behaviours functioning in different ways.

As we were already working on refining these components for the Atomic Beauty project, our team pitched the Design System as the most efficient way to organise and distribute designs, code and usage guidelines. This could then be expanded to incorporate other Beamly products. We called it CCX.

How might we create a single source of truth for all existing Beamly components?

How might we ensure quality and consistency across all Beamly products?

How might we improve productivity for designers and developers?

Information Gathering

Our first step was to collect and review the various style guides, Google docs, the contents of Dropbox folders, Confluence pages and Sketch files. We then interviewed designers, developers and product managers to determine unmet needs, and see how a design system could improve their workflows.

Designers highlighted the inefficiency of designing common patterns from scratch with limited visibility on existing reusable components, and developers commented that it was time consuming to build and maintain different patterns for each site. Both found it difficult to know which of a project’s several Sketch files, inevitably all named ‘final’, they should be working from, and the lack of a shared language often led to confusion over breakpoints and functionality expectations.

Our first step was to collect and review the various style guides, Google docs, the contents of Dropbox folders, Confluence pages and Sketch files. We then interviewed designers, developers and product managers to determine unmet needs, and see how a design system could improve their workflows.

Designers highlighted the inefficiency of designing common patterns from scratch with limited visibility on existing reusable components, and developers commented that it was time consuming to build and maintain different patterns for each site. Both found it difficult to know which of a project’s several Sketch files, inevitably all named ‘final’, they should be working from, and the lack of a shared language often led to confusion over breakpoints and functionality expectations.

"I never know if I can reuse something from one of our other products"

"I never know if I can reuse something from one of our other products"

"I never know if I can reuse something from one of our other products"


- a designer at Beamly                     

"I should be able to update styles in one place, rather than every single instance"

"I should be able to update styles in one place, rather than every single instance"

"I should be able to update styles in one place, rather than every single instance"


- a developer at Beamly                     

Design Approach

To determine how best to approach these issues, I ran workshops with the wider design team to define the technologies and tools we could use to improve our workflow, grid and breakpoint usage and developer handover process.

We chose to adopt the 8pt grid system with 16 columns on XL/L breakpoints and 8 as the browser sizes down. This allowed us to create more interesting layouts whilst introducing consistency and rhythm across products, and avoiding the rendering issues associated with scaling half pixels.

After experimenting with alternate options, we chose to continue using Sketch for the UI kit. We didn’t want to change tools just for the sake of it, and the only major issues we had identified (duplication of symbols, file versioning) we could resolve by adding Abstract and shared component libraries into our workflow. The resulting library is fully themeable for new client projects, and makes use of shared colour, layer and typography styles for quick and easy customisation in a similar way to how these would be updated in CSS.

Design System Tools
Tools: Abstract + Sketch + a choice of Principle, InVision or After Effects + React, combined with an 8pt/16 column grid

Shared Design Language

Atomic Design was a familiar concept to everyone in the team, so we decided to start by organising elements into Atoms, Molecules, Organisms, Templates and Pages. The development team adopting React as their JavaScript library also helped us to align, as we were all thinking about the project in terms of creating complex interfaces from small building blocks.

We wanted to user test this grouping with designers and product owners outside of our team, so that we could ensure a smooth handover to any team picking up a new client website. We provided each user with a list of components of varying complexity (e.g. button, header, product gallery) and asked where they would expect to find these. We discovered that our categorisations weren’t as intuitive as we hoped, especially when it came to differentiating molecules from organisms.

We trialled an alternative grouping system based on the language already used throughout the company. Typography, colours and grids sit within ‘styles’; atoms, molecules and smaller organisms under ‘elements’; and larger organisms in ‘components’. Cards sat in their own section, as did all elements associated with product purchase. This terminology update was popular with stakeholders, and I would have liked to have refined it further with the involvement of the engineering team, but we chose to revert to our original categorisation due to time restrictions.

Layout and setup for quick and easy restyling for new brands

Library Design

As well as the symbol renaming and categorisation work, I collaborated with a UX designer to select and user test emoji in the left navigation to provide additional visual clues and improve comprehension at a glance. It was fascinating to discover how differently the design team interpret certain emoji, especially those who use Android phones, so are accustomed to seeing different versions to the Apple emoji visible in Sketch. We settled on the simplest, most uncluttered icons we could find, also maintaining enough colour variation between each section.

Most UI kits we looked at for inspiration on page layout were organised horizontally, with with hundreds of elements presented on one page. We decided to add more pages and let the user explore using the left navigation, in order to provide an always-visible index and to align with the layout of the React library. This also leaves us room to add more components as and when new Beamly products are incorporated into the design system. Each title page contains quick links to its subpages to improve findability.

Design System Emoji
Nested Overrides
Component labelling to improve comprehension, and speed up overrides

Guidelines and Documentation

Guidelines and Documentation

Good documentation serves to define and communicate the visual design, user experience and engineering values, as well as a consistent design, development and new feature governance process. This would allow other internal and external teams to quickly adopt the platform, and work in harmony with each other.

The system was created to be themeable, so we provided multiple variations of each component, so to keep the library streamlined and clean, designers could delete versions unsuitable for their brand. Within the UI kit, we wanted to make it clear to designers why certain decisions had been made. Everyone has their own way of working and their own shortcuts and plugins, so we felt it was important to explain what was fixed, and the risks involved in changing certain aspects.

The engineering lead and I worked with a technical writer to ensure all documentation was consistent and easy to understand. The design system’s landing page provides three gates - one for designers, one for developers and one for content editors. The guidelines behind each section are tailored to keep these sections succinct and relevant.

Good documentation serves to define and communicate the visual design, user experience and engineering values, as well as a consistent design, development and new feature governance process. This would allow other internal and external teams to quickly adopt the platform, and work in harmony with each other.

The system was created to be themeable, so we provided multiple variations of each component, so to keep the library streamlined and clean, designers could delete versions unsuitable for their brand. Within the UI kit, we wanted to make it clear to designers why certain decisions had been made. Everyone has their own way of working and their own shortcuts and plugins, so we felt it was important to explain what was fixed, and the risks involved in changing certain aspects.

The engineering lead and I worked with a technical writer to ensure all documentation was consistent and easy to understand. The design system’s landing page provides three gates - one for designers, one for developers and one for content editors. The guidelines behind each section are tailored to keep these sections succinct and relevant.

Documentation
Documentation and usage guidelines, along with semantic naming allow for easier onboarding

Outcome

The CCX design system brought together the Sketch UI kit, React components, design and development values and usage guidelines for our consumer beauty web platform Atomic Beauty, to ensure all new products follow the same experience, accessibility and performance standards. 

The first site launch showed that page build time decreased by 75% for developers, and reduced the time designers could wireframe a 10-page responsive site from a week to half a day. Adopting the system enabled the team to rapidly prototype new features, improved the onboarding process for new designers and developers, as well as speeding up the handover process.

 

Project Information

Client
Coty

Agency
Beamly

Date
2018-19

My Role

Discovery and research
Product definition 
Design values and standards
Creating the Sketch UI Kit
Usability testing and validation
Design workflow management
Providing direction to the design team

Design Tools

Sketch, Abstract, Illustrator, Photoshop, Principle

Credits

Design & Research
Ellie Walford, Jussi Brightmore, Sam Douglas

Engineering
Mark Salvin, Daniel Zaremba, Przemek Adamczewski, Kate Montgomery

Product & DeliverY
Eve Korthals Altes, Paul Gannaway, Adrien Padayachee

QA
Sam Burge, Shilpa Kerai

Documentation
Anita Diamond

iconfinder_Icon-3_3064816
iconfinder_Icon-8_3064836
iconfinder_Icon-6_3064817
iconfinder_Icon-2_3064815

© ZARA DREI 2020