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.

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

- a designer at Beamly                     

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

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.

Component labelling to improve comprehension, and speed up overrides

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.