Project - Design Library Refresh | Tom Rowson

A major design system refresh

A complete re-boot of the front end design system and UI component library. A nice example of a cross-team collaborative project which required careful management.

The essentials

The project

An out-of-date Figma design system was in desperate need of modernisation, and a corporate re-brand provided the perfect trigger to take the leap, creating an entirely new component library with properly tokenised styles for easy implementation.

My role

As team lead, originator and driving force for the project, creating buy-in for and momentum behind the work. I managed priorities and inter-team relationships across the refresh, ran in-team design reviews and re-established a UX/front end engineering community to foster collaboration, making implementation simpler. As an individual contributor, I designed layouts for a number of components as well as supporting designers with decision making.

The impact

A new Figma design system which:

Cuts prototyping effort by around 75% by taking full advantage of features
Provides up-to-date interaction design
Improves UI consistency, with beautiful design
Incorporates the new brand vision for the business

Challenges

The sheer size of the project was an issue. Typically, design systems evolve over time, growing larger and more complex. When you have to replace the entire system in one go, you realise how large it has become. Successful delivery required careful planning, relying on my experience in product management to create and maintain a backlog, and report progress to the business.

Project drivers

Inconsistent UI across 3 modules, with some badly dated pages.
Front end library components in Figma didn't take advantage of latest features.
Major brand update was released, leaving the existing UI and design library out of sync.

Scope of work

Foundational library of colour system, type scale and grid and spacing guidelines, using design tokens.
Complete refresh of front end components to support future UI, with plenty of variability, and a handful of new components (e.g. multi-functional cards).
Layout guidance for common page and section types (e.g. settings pages).

What we did

Planned a stepped implementation with several phases to get components moving through design, development, testing and release.
Developed key items to high-fidelity quickly and early to get feedback and buy-in within the business from leadership, front end engineering and brand.
Worked with the front end engineering community in the business to account for the impact of technical feasibility on the order of implementation.

How it turned out - a few examples

User interfaces: completely modernised, with a beautiful look and feel ready to implement

Colours: from a simple palette of named colours to a fully brand-updated, tokenised colour book, designed with front end implementation in mind.

Components: bringing updated design language and interactions to common front end components, such as this left nav menu.

Component layouts: designing complex components with a high degree of customisation, and the latest Figma features to significantly improve design efficiency.