Evolution Design System

Background

Prudential’s lack of a global design system had led to its multiple customer-facing experiences being disconnected and disorienting. They lacked the energy to achieve Prudential’s goal of being a digital customer first company.

• Lack of a common component library led to extra work for design and development recreating common patterns in each new project.
• No single source of truth on design and development practices created inconsistenices across experiences.
• Time-consuming ADA reviews, due to no developed components being shared across projects, led to common defects needing to be remediated multiple times.

Goal

Create a global design system to establish design consistency across its dozens of experiences and businesses, and improve the efficiency of both design and development teams.

My Role

Process

Strategy

Atomic Design Structure

To make the development of the system scalable across various levels of design, an atomic design structure was used to ensure that the most atomic levels were reusable across the majority of larger level interactive pieces.

Contribution Process

With the establishment of the new system, a new contribution process was required to bake in accessibility and design review into the components. Doing so would cut the speed to market for product teams, as they would know everything in the system already had design and accessibility review.

My role: I facilitated meetings with designers, and accessibility leaders, to learn of their common problems reviewing other team's work, and collaborate on how we could create a foundation that solved some of those issues right away.

Implementation

CSS/SCSS Style Library

Using a design token based infrastructure, the team created a SCSS library built around flexibility, consistency, and scale across color, typography, spacing, and more.

My role: I co-created the design token structure with Andrei Ivanov, and lead efforts on creating animation standards, and an icon library. To date I've contributed over 30 components individually to the library.

Web Components

The core asset of the design system is a library of 100+ components. These components scale atomically and leverage the style library to create a system that is flexible and dynamic.

Due to Prudential not having a consistent front-end framework across development teams, we used LitElement opens in a new window and W3C standard web components as the tech stack. This ensures we can support teams in React, Angular, and any other framework.

My role: In order to validate the infractruture, I created the first POC component, that then established what all other components would follow.

Growth

Initial Launch

The Prudential.com homepage opens in a new window was the first page to launch that fully utilized the new design system. This page greatly increased viewership and the ease of doing business (EODB) scores, and fueled adoption of the design system company wide.

Workshops / Awareness

I have taken the lead role in promoting the design system to designers and developers across the organization. Through leading workshops, and providing 1:1 support to designs and developers, I've shown how the system can be used to improve their efficiency and quality of work.

Future Adoption

Today the design system is leveraged by over 200 designers and developers across the company, with over 8000 pages live in production. Personally, I have lead support over a dozen product launches that have leveraged the new system, through planning work with stakeholders, managing development resources, and leading development efforts myself.

Key Deliverables

SCSS/CSS Style Library

• SCSS/CSS style library built upon design tokens using SCSS and CSS variables
• Library of utility classes and built-in styles across typography, color, grid, animation, etc

Web Component Library

• Over 100 UI web components scaling in complexity from buttons to application-level interactive structures
• 100% WCAG AA accessibility compliance for each component
• Complete style encapsulation using shadowDOM that is connected to the SCSS library

Takeaways

Outcomes

• First global design system at Prudential
• 100+ components available
• 8000+ pages live using the design system to date
• Increased efficiency for both designers and developers
• Standardization of Front End Development and UX design across...
• 200+ designs and developers
• 20+ product teams
• Multiple front-end frameworks and tech stacks

Learnings

Importance of Support and Adoption

A design system is only as successful as the support of those asked to use it. Buy in from senior leadership, and the designers and developers asked to use it is crucial. The first job should be to meet the needs of those who need it, not hinder their work.

Flexibility vs. Conformity

A design system needs to find the right balance between establishing rules to follow and a system that shows conformity across projects. However, design will always move forward and push boundaries. Your system needs to be rigid enough to show a common design language, but flexible enough to give designers the space to explore new and improved ideas.