2nd Month as a UX Design Intern at Pega: What I Did and Learned

pega logo on navy background

This spring, I’m working as a part-time UX design intern at Pegasystem’s Digital Team.

Two months have passed since my start day. So I wanted to take some time to share what I did, learned, and what to improve.

This is my first time working as a UX design intern in the US, so some of the thoughts may be limited to my own experience.

Last month, I wrote another self-reflection. So if you’re interested, feel free to give it a read!

If you’re interested in my journey to Pega, check out this article.

What I did

The second month was a heads-down work grind.

On top of school and life, I tried to make as much progress as I could with the design system.

Quite a lot has happened, so let’s dive right in.

Bolt design system

At Pega, I’m recreating Pega’s Bolt design system from scratch in Figma.

bolt design system website home page

Last month, the only major work I did was on the buttons.

So, in the second month, I picked up the pace. And now, I’ll share what I did.

And a quick heads-up:

Sorry if what I’m about to share is confusing to people. I just want to accurately capture my current progress.

Organization

Index

index
still have a lot to work on 😂

This was a nice addition as it gave me a good overview of what I completed.

And what I need to work on... (check out all the gray tags 😅).

index (zoomed in)
Zooming in the index 👀

In all honesty, there’s no way I can finish everything by the end of April.

As my mentor and manager said, my role is to set a good foundation. So once that’s completed, I’ll try to create as many components as I can.

Page structure & asset library

This is a work in progress. But I’m quite satisfied with the current structure.

Right now, this is how I’m structuring my layers:

figma layer structure

This is the same structure as the Bolt design system documentation site. The yellow highlights are the major categories:

  1. Visual Styles
  2. Elements
  3. Components

Before, I played around with other types of layer organization. But, I landed on the current one after I saw IBM’s Carbon Design System file on Figma.

Here, all the main components are stored in the major category file. For example, in my 02 - Elements file, this is what I have:

element page in figma
peep all those buttons 🤯

With this organization system, in the assets library, the components will be arranged neatly by their category.

asset library
Accessing a button from the asset library

If you’re still reading, you may ask:

Wait Guo, then what do you include on each sub-category page (e.g. buttons, icons, cards, etc)?

Great question. For each page, my goal will be to

  • Teach designers how to use the components/styles
  • Include use guidelines & dos and don’ts
  • Make the information as digestible as possible

Thus, the rule of thumb is:

Create the main components in the category pages. And then use the instances in the sub-category pages.

Now, let’s break down my work in each category.

💡 After writing a few first drafts, I realized that breaking down each element will take too much time. Thus, I’ll share screenshots of what I did.

Visual styles

Colors

color file
brand and status colors
Zooming into the brand and status colors
theme colors
Zooming into theme colors

Typography

typography styles

Spacing

spacing
Powerful with auto-layout in Figma!

Breakpoints

breakpoints

Elements

Button

buttons
A section of 1400+ buttons... 😵

Icon

icons

Text link

text links
surprisingly the hardest element to create...

Ratio

ratio

Shape

shapes

Components

Card

Page Header

Chips

chips

Tabs

tabs

Navbar

navbar

I didn’t want to bore you out with the details. So if you have any questions about how I created these, feel free to reach out!

Design system demo

The week before spring break, I gave a design system demo to the design team.

demo design
This was the design I created in the demo! 🤩

In the end, I think it went quite well. And the team was happy with what I’ve accomplished so far!

design demo call
Me doing a live design demo! 😬

Design + code workshop

One new addition in the second month is the design + code workshop with my mentor.

visual studio code
Learning something new every week! 💡

And I love it.

Right now, we’re building my design portfolio from scratch. And I’m learning SO much (front-end best practices, page structure, using math, scss, etc).

Honestly, this is so much more practical than the web programming college course I took (oops).

current progress of the workshop
Creating the barebone HTML of the site ⚒️

1 on 1 meeting

As usual, every week I called my mentor and manager.

chat with manager
Call with manager! 😆

But last week, I called two members on the design team (Aneesh and Matthew) separately to understand what they were up to.

It was great to hear what other designers are doing on the team. And both ended up as great conversations!

What I learned & observed

Front-end best practices

As mentioned before, I’m learning A LOT from the weekly design + code workshops.

Honestly, I should put more time outside of the workshop to practice front-end coding. And if possible, I can try to code my next design portfolio.

Power of tokens in design systems

This made more sense after I learned how to create tokens in code.

In short, tokens can help you maintain a consistent style in your design system.

Working as a designer

This stemmed from my conversation with Matthew, the Senior Brand Manager at Pega.

There were lots of insights packed into our 1-hour call. But here’s one that stuck with me:

As a designer, you will experience this one day: You spent so much time on a design, and it just ends up in the trash. How will you respond?

Matthew stresses that, in this case, you need to respond like a professional. For instance, you can say:

Thank you for your feedback. I will work on these.

Instead of saying:

YOU DON’T KNOW ANYTHING ABOUT DESIGN! MY DESIGNS ARE GREAT!

What to improve

Time management

Aha of course!

Right now, I’m writing this sentence on 3/29 at 12:17 AM. And I’m supposed to post this article on 3/29.

😅

Right now, there are a lot of things I’m juggling around. So I need to set my priorities and work on what’s important.

Conclusion

In the second month, I can confidently say that I spent a considerable amount of time building the design system. I’m proud of the work I’ve done for the team.

For the last month of the internship, I plan to create as many components as I can. And I want to spend more time reviewing the lessons I’ve learned from the design + code workshops.

And that’s a wrap!

Thank you for being awesome and reading this far! :)

If you have any questions, feel free to reach out on LinkedIn, Twitter, or by email. Will love to set up a casual call and chat!

Read Next