Porter Design System
Helping designers and developers build.
Client
Porter Airlines
Team
Me (Product designer)
1 Product owner
2 Developers
1 Content designer
1 Accessibility lead
1 Design lead
Skills / Tools
Figma
Storybook
Chromatic
Supernova
Reviewing code
Usability testing
Timeline
Sept '24 - Nov '25
STATUS
Shipped
(Ongoing)
PROBLEM area
No design system meant maintenance, not growth
1
Lack of a clear source of truth made building UIs a guessing game, creating design and technical debt.
2
Ungoverned components turned the Asset Panel into a search task instead of a pick-and-place tool.
DESIGN GOALS
What I aimed to achieve
Build strong foundations
Define tokens and core components, built to follow WCAG 2.2 and atomic design principles.
Centralize design and code
Create one source of truth for guidelines, accessibility, and implementation to remove guesswork.
Help and advocate
Support adoption end-to-end for designers and developers new to a design system.
DECISION 1
Build components in a single Figma library
After auditing key flows, I built 33 core components used across Porter’s critical experiences, from universal UI (buttons, comboboxes) to Porter-specific patterns (airport codes, flight tracking bar). I centralized them into one easy-to-find library, replacing a fragmented setup of 24 libraries that confused and slowed designers. I also tokenized spacing, color, and typography so designers could move faster while staying flexible at the layout level.
DECISION 2
Establish a source of truth for design and code
I co-led usage guidelines with Teunis Vorsteveld (Product owner), Alexandria Yeung (Accessibility), and Sadaf Pourzahed (Content). The documentation reduced ambiguity for both design and engineering and made the system easier to adopt.
DECISION 3
Actively support adoption to drive speed and familiarity
I mentored five designers 1:1 to teach the components and pressure-test whether the library felt intuitive in real work. I also ran a lean A/B test with a product designer (Victoria Rudiak): she built a Flight Status screen ~20% faster using the system without prior experience. It’s an early signal with a sample size of one, but it suggests the system has upside as familiarity grows. I also recorded and edited release demo videos to keep updates fast and easy to absorb.
RETROSPECTIVE
Results & insights
View live DS example
Measurably faster designs
Having components and spacing tokens pre-defined is game-changing for design.
A/B testing with and without design system with Victoria showed 20% faster design generation
Building Book a Flight with the design system was incredibly fast (~2 hours instead of multiple days)
Less manual coding, likely faster development
We didn’t capture a quantified dev time delta due to timeline constraints and shifting priorities, but reducing repeated manual coding should improve delivery speed. This is a metric I would like to measure next (e.g., time-to-implement for a set of common components before vs. after adoption).
100% of released components were a11y tested
I built the components to WCAG 2.2 standards, and once they were developed I reviewed the code and builds alongside accessibility testing. Alex Yeung led the final audit and testing, and I actively participated in the sessions. When issues came up, we iterated on the component, re-tested, and shipped the fix.
I would've loved to…
Try to use Figma MCP to generate UI components using the design system.
Encourage designers to use Supernova to vibe code earlier prototypes
Added explicit motion guidelines to push visual craft even further
