Express Design System for Transit
Role
Design Systems Designer
Team
Jiyoung, Arnav, Krarhish and Pushti
Duration
10 weeks
Project Overview
The Express Design System project focused on building a scalable and accessible design system for the Transit iOS app, which previously lacked a cohesive design foundation. We focused on the creation of core foundations—typography, color, spacing—as well as components and patterns, aligning them with Transit’s product principles.
So, why does Transit need design system?
Over the last 2 months, we found out that:
44 member of product team created
44+ new components
40% are near duplicates (multiple button variants for the same action)
Confusing naming convention across teams
Design & development team created
32 color variables
Many shades overlap and serve inconsistent purposes
Hard to enforce brand and accessibility standards
Design & development team created
14hrs/week of repetitive work
Manual updates to each component
Team duplicating effort on bug fixes and style tweaks
Slowed feature delivery (context switching & rework)
Fragmented user experience (inconsistent UI patterns)
Rising technical debt (harder to maintain and scale)
Problem
As Transit grew, the absence of a unified design system led to inconsistent UI, repeated design work, and inefficient handoffs. This affected both team productivity and user experience. We created Express, a scalable design system to bring consistency, efficiency, and accessibility across the app.
We conducted an audit of the current screens and deconstructed the UI
We conducted a full-screen audit to identify every instance of color, type, spacing, and component use. This gave us a clear inventory of what needed to be standardized.
While deconstructing the existing design, we discovered that the font used in Transit was not open-source. To ensure accessibility and ease of implementation, we chose to replace it with Overpass, a free and visually similar alternative.
Let’s build a new design system for Transit!
Our approach & values
At the core of the Express Design System are the values that shaped every design and structural decision we made:
Human-Centered
We design for real people—ensuring that every interaction is thoughtful, accessible, and beautifully crafted to meet users’ needs, no matter their context or circumstance.
Go the Extra Mile
We don’t just solve problems—we elevate the experience. From micro-interactions to edge cases, we aim to uplift and inspire, bringing care and delight into every detail.
By and For the People
Express was built collaboratively, by and for the designers and developers who use it. It’s a living system that empowers teams to work faster, more confidently, and with greater alignment.
How we built Express
We resisted the urge to jump straight into defining every shade of green or styling every button.
Instead, we zoomed out and asked: What structure will support Transit’s long-term growth and flexibility?
Inspired by Brad Frost’s Atomic Design methodology, we structured Express into two scalable layers: Foundations and Components. This allowed us to create a reusable system that could evolve alongside the product.
Foundation
colors
grid
icons
spacing
typography
Components
button
carousel indicator
information blocks
list item
maps
search bar
section header
time indicator
line info card
toast bar
graph
pop ups
route blocks
bottom sheets
form elements
tile
tag
divider
Our goal with Express was to bring clarity and consistency to design decisions—starting at the token level. From the beginning, we prioritized building tokens alongside the design process.
We began by mapping out the color palette on the whiteboard—separating raw color values from semantic tokens to ensure clarity and reusability. Alongside this, we identified the most frequently used typography styles across the app to inform a consistent type scale. As we defined these foundational elements—color, spacing, and typography—we also started building corresponding variables in Figma, laying the groundwork for a scalable, token-based system that supports consistent design across all components.
Through the discussions, we came to understand that there’s no universal formula for structuring design tokens. For Express, we prioritized what made the most sense for Transit—tokens that are intuitive, meaningful, and aligned with real usage contexts. The goal was to create a system that offers clear guidance on how and when to apply tokens, minimizing ambiguity and reducing reliance on subjective decisions.
Lets test this out to see if Express Design System works!
We published the Express Design System in the Figma Community and invited designers to test it by recreating one of Transit’s most essential screens: setting destination and settings screen
Through testing, we observed a wide range of usage patterns across teams. Some users navigated directly through the design file to browse components, while others preferred using token names and relied heavily on the search function to locate what they needed.
Several testers expressed difficulty locating the grid system and noted that some token names didn’t align with their expectations, leading to confusion during implementation.
We used this feedback to refine component documentation, clarify token naming, and add a grid system that was previously missing. We also reorganized our components based on core product flows—Home, Search, and Go—to help designers navigate the system more intuitively. These updates ultimately enhanced clarity, consistency, and overall usability across the design system.
So, where can you find the documentation and the design system UI Kit?
We focused on crafting documentation that is clear, approachable, and actionable for everyone on the team. Our goal was to help designers and developers quickly find what they need—whether they’re new to the project or working on specific flows like “Search” or “Go.”
Built in Zeroheight, our documentation introduces the purpose of Express, our design principles, usage patterns, and a full component library. We’ve included practical best practices, clear do’s and don’ts, and guidance on how to get support or connect with the design system team.
By embedding accessibility into every layer of design, we are building a transit experience that truly moves everyone forward. Accessibility isn’t treated as an afterthought in Express—it’s integrated into how components are built, documented, and implemented across the system.
We pitched our Express Design System!
We wrapped up our project by presenting the Express Design System to a group of imagined internal stakeholders, including designers and developers.
We began by highlighting the tangible business impact that a unified design system like Express could deliver—especially in areas tied to user conversion and revenue. From there, we illustrated how existing inconsistencies—such as misaligned components and unclear token naming—were creating unnecessary friction across teams.
Express was introduced as our solution: a well-structured, scalable design system built to support core product flows like Home, Search, and Go—streamlining collaboration and elevating the user experience.
Our documentation is built in Zeroheight. Our documentation introduces the purpose of Express, our design principles, usage patterns, and a full component library. We’ve included guidance on how to get support or connect with the design system team.
My learnings & next steps
Through this course, I’ve grown tremendously—not just as a designer, but as a systems thinker. It was an incredibly valuable experience that bridged the gap between theory and real-world application.
This experience completely shifted how I view products. I now find myself thinking in systems by default—considering consistency, scalability, and structure without even realizing it. That mindset shift has been one of the most valuable takeaways from this course.
I also deepened my skills in Figma and gained a much clearer understanding of design documentation. Before this, I used to think a design system was simply a UI kit. But I’ve come to realize it’s so much more—it’s a structured ecosystem that includes documentation, guidelines, principles, and yes, UI kits too.