case study · design system

Pearson DCE Design System

Overview

The Digital Channels and Experience team at Pearson was in charge of simplifying the company’s web estate by merging multiple sites into a cohesive, visually aligned portfolio. Because these sites were created by different teams, on different platforms and with different tools, there were numerous artifacts that made consistency hard to maintain, and any update to the brand guidelines made restyling daunting.

My role

I designed and built the DCE Design System from the ground up, continuously improving each component to make it more usable and scalable.

Design principles
Design system elements
Design system components
01

Plan

Audit

I carefully examined the different parts of each website and gathered all of the elements in one central place for analysis. These included colors, font styles, buttons, form elements, content sections and page templates. I then organized them into groups to identify unnecessary duplicates and missing elements.

Analyze

I formed a team of designers, content strategists and front-end developers. In regular working sessions, the team examined the current designs and made improvements: removing duplication and adding what was missing. For instance, the team identified every button style needed to make buttons more usable and accessible, and analyzed form elements to make sure they had all the styles required for a usable, accessible form.

Prioritize

With my team, I divided the artifacts into a progressively more complex set of elements using the Atomic Design approach: Foundations (grid, color, spacing, typeface, icons, shadows, gradients); Elements (type styles, buttons, form elements, images, horizontal rules); Components (navigation, highlights, modal windows); and Page Templates.

02

Build

Design

The initial design system was built in Sketch, starting with Foundations and progressing to Elements, Components and Page Templates as needed.

Develop

Once complete, elements of the design system were formally handed off to front-end developers, who used a matching structure of Foundations, Elements and Components.

Deploy

A series of training exercises introduced the design system to the design team.

Document

As the system became more sophisticated, it became necessary to explain how to use each element and to document changes, best practices and how to contribute. This documentation was housed in Confluence.

03

Improve

Refine

Regular feedback helped me identify where the design system could improve, and I introduced a process for proposing new components. Elements were regularly updated to improve usability and responsiveness.

Migrate

Due to changes in the organization, the design system moved from Sketch to Adobe XD, and then to its current platform, Figma.

Continuous improvement

The most significant improvements were made in Figma: auto layout for flexibility, variants so components deploy from a single symbol, and parent components to simplify large-scale changes.

Spacing from the DCE Design System
Spacing. Spacing guidelines were created to promote consistent spacing across all layouts and breakpoints.
Typography from the DCE Design System
Typography. A robust set of type styles was created for maximum flexibility in page layouts.
Colors from the DCE Design System
Colors. Pearson’s wide array of brand colors was represented. Utility colors, such as greys and accent colors for alerts and messaging, were also included.
Icons from the DCE Design System
Icons. Icons were improved across all sites to create consistent sizing, line weights and overall style.
Buttons from the DCE Design System
Buttons. A large assortment of button styles was necessary across layouts. Widespread changes to button styles are made possible through the use of parent symbols. Variants give designers access to all button styles within one component.
Form elements from the DCE Design System
Form elements. Form fields were also made using parent symbols. Variants provide designers with access to all input field states within a single component.
Mastheads from the DCE Design System
Mastheads. Mastheads across all sites were broken down into their component parts (main navigation, utility navigation and breadcrumb) so designers can deploy various states easily and update them with ease.
Heroes from the DCE Design System
Heroes. Complex components like heroes are customizable, allowing designers to replace headlines, text and background images with ease.
Cards from the DCE Design System
Cards. Using variants, many features can be added to cards while keeping them easy for designers to navigate and deploy.