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...
1.5 HOURS
IN DESIGN EFFORT

🔑 KEY LEARNINGS

