UX designer for Contentful's web design system.

PROJECT SUMMARY:

In Q4 2018, our business goals where to start planning a brand refresh, migrate our website to Gatsby and improve consistency across all touch points (product, website, print etc.)
I was responsible for translating the new brand guidelines for the marketing website and worked with a cross functional team consisting of product designers, brand design and senior stakeholders.

Our team (me, web developer and project manager) decided that the best way to go forward and improve consistency and our current workflow would be to build out a design system. We decided to approach this using Atomic Design principles and store these components in Storybook.

PROBLEM STATEMENT

• Multiple designers and developers over the years have contributed lots of different web styles. This has led to an inconsistent web experience and a messy code base.

• Our design/development time is inefficient as we are always producing new components and templates rather than repurposing

• We have multiple designs for singular elements (input fields, button styles etc.)
  
  

PROPOSED SOLUTION

• Developing a design system that streamlines our components and allows us to mock up designs/prototypes more quickly (Sketch and Storybook)

• Building templates and components will allow stakeholders to build their own landing pages without relying on design/development cycles.
  

STARTING FROM SCRATCH:
UI AUDIT

To start the project, I conducted a UI Audit of every component and pattern that currently exists on the website. I did this to see where the biggest inconsistencies lie and where we can streamline components.

One example is the form and input styles: since the website has been touched by many designers over a few years, this meant that new styles and designs where built on top of each other. We took this opportunity to take stock of all these styles and assess what we should ‘keep or kill’

UI COMPONENT CATALOGUE & naming conventions

While the UI Audit meant painstakingly screenshotting every component, I knew I had to map it out more methodically for other stakeholders and get a greater overview. I decided to catalog all the components and group them into names. To ensure the team was on the same page, I also conducted a workshop so we all agreed on the naming conventions for each item. I believed this would be important to keep the team aligned and help us communicate better when discussing components.

REFACTORING STYLES:
SKETCH & REACT COMPONENTS

I designed a new form style (one that we had been continuously A/B testing so I knew it was well performing).

We developed a workflow so that I turned this component into Sketch symbols and our web developer built it in React and stored it on Storybook.

We repeated this process for all the other components, so that by the end of the quarter we had a whole library of reusable components. It was also important for us to design components that where flexible and extensible so we never felt limited creatively.

introducing a type scale

One outcome of the UI audit is that I found we had a lot of inconsistent type styles. There was no logic or systematic approach to this, and so as the next step I thought it would be important to develop a modular type scale that is still flexible enough to ensure we keep contrast on a page, but would also help us reduce the bloated number of styles we have.

SKETCH COMPONENT LIBRARY

The end result was a Sketch component library and React components stored in Storybook. This has greatly improved my own workflow, as well as the efficiency in which our entire team operates. As all components are made up of symbols, it means we can update and apply changes to all our documents without spending hours changing individual elements

RESULTS & implementation

The atomic approach to our design system means we have endless options for building and designing new components that all are consistent with one another. It provides a framework and toolkit that allows us to be creative, while also keeping all the styles consistent and aligned.

Below is an example of how this method has being applied for two different card styles:

• Case study card

• CTA card

Both organisms are made up of the same smaller atoms but built in a way that makes them suitable for different purposes.