PEGASYSTEMS DESIGN SYSTEM

Building a living component library for 8 Pega's public sites

MY ROLE

Revising the existing components
Building the component library
Conducting testing
Setting up maintenance workflow

TEAM

TIMELINE

TOOL

Mike Mai (Mentor)
Colby Cook (Manager)

May - August 2021
(3 months)

Figma

Overview

SUMMER INTERNSHIP

This Summer 2022, I had the opportunity to work at Pegasystems Digital Team as their UI/UX Design Intern. My main task is to recreate Pega’s Bolt Design System (for developer) from scratch in Figma.

🌋 PROBLEM

There's currently no source of truth for designers at Pega

Context

BOLT DESIGN SYSTEM

Bolt Design System is Pega’s source of truth for developers. To ensure consistency between the development and the design sides, we’ll need to replicate that system in the language that Designers can understand (aka Figma).

Bolt is divided into 3 main parts: Visual styles, Elements, and Components.

INITIAL PROGRESS

The previous intern has set up the visual styles, elements, and some components. My job is to revise what he did and build the rest of the library. In total, I revised 5 elements and built 35 components.

🧱 BUILDING OUT OF TOKENS

Tokens are the smallest element of the design system. They allowed us to build components and make changes to them quickly and systematically. View my presentation of Token here.

Stage 1 · 2 weeks

REVISE EXISITING ELEMENTS

I groomed over the existing components to condense them with the new Figma features - Component props. As a result, I was able to reduce the size of each component by 4 times. In total, I reduced the number of variants significantly from 1,576 to 394 without sacrificing any of the library’s functions.

Leanings:

Understanding tokens
New Figma features

Stage 2 · 5 weeks

BUILDING COMPONENTS

Once I got the hang of how the design system works, I built the components very quickly. To my surprise, I finished the library of 40 components in half the expected time (not bragging 🫢).

Learnings:

Reading inspect mode as a non-coder
Building and organizing components based on its properties
Details are everything!

In total, I have revised and built

40

COMPONENTS

758

VARIANTS

Stage 3 · 3 weeks

TESTING

Since I finished the Design System quickly, I can spend more time on testing. The main goal of this phase is:
Identify bugs or missing components.

I asked key designers from 3 different teams to test the Design System in their actual work and report if there were any issues. This process this expected to last 3 weeks.

Throughout the testing phase, I host multiple knowledge transfer workshops to:

Introduce the team to Figma and Design System
Receive feedback on the Design System

Challenge:

Designers are not familiar with Figma yet and are hesitant to change to a new platform

With the new design system, designers at Pega can save...