Porter Design System — Colin LeBlanc

No design system meant maintenance, not growth

Porter wanted to scale its digital product, but had no shared system for designing or building UI. Designers worked across 24 separate Figma libraries. Developers hand-coded repeated components from scratch. Inconsistencies accumulated into debt. Effort went into maintenance instead of new work.

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.

33 components, one library

I audited Porter's critical flows and built 33 core components, from universal UI like buttons and comboboxes to Porter-specific patterns like airport codes and the flight tracking bar. Consolidated from 24 fragmented libraries into one. Spacing, color, and typography tokenized throughout.

Component library showing all 33 components organized in Figma

One place to find everything.

One source of truth for design, code, and craft decisions

I co-led writing usage guidelines with the product owner, accessibility lead, and content designer. Every component shipped with documented intent, interaction states, accessibility notes, and implementation guidance for developers.

Microinteractions took the most iteration. Each one had to feel right to stakeholders, pass WCAG 2.2, and work as a repeatable pattern across components. We went through several rounds as the library grew, pressure-testing early decisions against new edge cases we uncovered.

Supernova documentation showing component intent, states, and accessibility notes

Component documentation in Supernova. Design decisions don't get lost in handoff.

Built adoption into the process

I mentored five designers 1:1 to build familiarity with the system and surface gaps. I recorded short release demo videos so updates were easy to absorb. While training Victoria, I ran a screen replication challenge with Victoria, with the system, she finished 20% faster than without it.

Demo video thumbnails from release updates — short, scannable, and fun

Our demos were short, scannable, and fun.

View live DS example

Results

All 33 components passed WCAG 2.2. The accessibility lead ran the final audit; I participated in every session and shipped fixes as issues came up.

Designs produced 20% faster: Victoria replicated a Flight Status screen using the system and finished faster than without it. Small sample, but early signal.

Book a Flight took two hours to design using the system. The same work had previously taken several weeks.

Dev time delta wasn't measured before the project ended. Time-to-implement for a common set of components, before and after adoption, is the metric I'd capture next.

What's next

Figma MCP: Generating system-compliant UI from prompts would close the gap between ideation and production-ready components, which would further accelerate building.

Explicit motion guidelines. Motion was consistent between components, but having guidelines and tokens would be handy for scalability and repeatability.