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
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.
🧱 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 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.
❤️ You might also like...
