Building the system as a team
As part of a team of three designers, I helped build the Design System by turning existing patterns into a shared, practical system and working closely with developers to make it easy to use.
A growing product without a shared foundation
Private Internet Access (PIA) is a global VPN product with high traffic and ongoing experiments.
As the site grew, teams made decisions independently, and similar patterns stopped looking and behaving the same. We built a Design System to create one shared foundation for how design decisions are made.
No shared foundation for design decisions
As the product grew, teams made decisions on their own. Similar elements began to look different from page to page. There was no shared structure to guide decisions, and the product stopped feeling consistent.
Across the site, this showed up as:
One structure to guide design decisions
Create a shared structure that guides design decisions, defines clear patterns across the site, and turns repeated solutions into reusable building blocks.
Align the product, not redesign it
We approached the Design System as a way to align the product, not to redesign it. 3 simple ideas guided our decisions:
This mindset guided how we handled tokens, components, and content blocks.
Building a system inside a live product
The Design System was built inside a live product, with constant experiments and multiple teams moving in parallel. This created four core challenges that shaped every decision we made:
Three layers of the system
The system was organized into three layers:
The foundational layer of the system. Shared decisions that define how the product looks and behaves.
These tokens ensured that every page started from the same visual language before components were even involved.
These are the fundamental UI building blocks of the system. Buttons, inputs, navigation, cards, modals, layout elements, and structural components like grid and typography.
Here, we focused on organizing what already existed — clarifying hierarchy, reducing unnecessary variants, and defining clear usage rules.
These are the main sections users interact with on the page. Here, we reduced duplication and defined clear layout types. Instead of many variations, we created a small set of repeatable structures:
From scattered variations to a predictable, reusable system.
From scattered patterns to one clear structure
Before — multiple interpretations of the same patterns.
After — one clear structure across pages.