top of page

🏠 Pegasystems Design System

🙇‍♀️ Summer Internship 2022
⏰ May - Aug 2022
👩‍💻 My role

Revise the existing components

Build the rest of the library

Conduct testing

Set up template for documentation

👨‍👩‍👧‍👦 Team

Mentor/Design Lead: Mike Mai

Design Intern: An Ho

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

Frame 1513.png
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

Current 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.

Frame 1512.png
 
🧱 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.

11.png
Stage 1 · 2 weeks
Revise existing 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 as a non-coder

  • Building and organizing components base on its properties

  • Details are everything!




In total, I have revised and built...

 
40

COMPONENTS

758

VARIANTS

Stage 3 
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

 

Challenges:

  • 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

ON DESIGN EFFORT



"The new component system is integral in ensuring design, devs, and publishers can design and build out achievable experiences at a rapid pace. Having an accurate system adds the the productivity of the team and standardizes the brand and digital experience across the board."
JESSE ACKERMAN
Senior Digital Designer at Pegasystems


 
Key learnings
 
❓ What does the user really need?

If I were to start again, I would look into what states do designers use the most, and only include those in the Design System. This will not only help the design navigate through the library easier but also cut down the effort to manage the system.

💥 Be proactive

Keep in mind that you are building this for other designers to use. Reach out to as many designers as you can to learn about their process and advocate for the design system.

📽 I enjoy giving presentations!

Surprisingly, I like the process of dumbing down a complex concept! I’m looking forward to doing it more in the future.

Comments or suggestions for this project?

🙏 You're the best!

 
 
❤️ You might also like...

bottom of page