Design System

Themeable Design System

Themeable Design System

A collection of customisable UI elements, design patterns and standards, created with the aim of improving consistency and quality of both Beamly’s products and the product design experience.

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, 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.

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.

Having started to use the Sketch library for wireframing, we found that these categorisations weren’t as intuitive as we hoped, so 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 have their own section, as do all elements associated with product purchase. This is still a work in progress - the terminology updates have improved comprehension for designers and stakeholders, but there is work to be done to find a suitable compromise to avoid diverging from the approach agreed with Engineering.

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 design system brings together the Sketch UI kit, React components, design and development values and usage guidelines, to ensure all new products follow the same experience, accessibility and performance standards.

The design system has been released internally and is currently being used to facilitate several new site builds. A new iteration, including improvements and bug fixes based on feedback from this test run, will be adopted for new client projects.

At the time of writing we are still testing library page arrangements and refining the taxonomy to make them more intuitive, whilst maintaining alignment with the React library.

So far, it has enabled the team to rapidly prototype new features, has improved the onboarding process for new designers and developers, and has made acceptance criteria/developer handover meetings more efficient.

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

More Projects

Global eCommerce CheckoutOmnichannel Retail

Consumer Beauty Web PlatformWhite Label Solution

Bespoke Handbag ServicePersonalisation

Virtual Makeup StudioAugmented Reality

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

© ZARA DREI 2019