Creativity at Heart, Efficiency in Mind: Creating the Express Design System for Transit

Transit aims to make public transport less overwhelming by providing real-time status updates of public transit lines in 932 cities across 25 countries.

Why does Transit need a design system?

Transit has a variable design language that makes the app stand out!

Some screens from the Transit app

However, inconsistencies in the app vary from the use of color and typography to the conflicting design of similar components.

• Usage of color and typographic styles can be inconsistent on different pages, even when used for similar contexts.

A snapshot of the foundational inconsistencies in the app

• The same component is used in multiple contexts with different design styles.

• As the app uses uniquely structured layouts, working with these custom product-specific components can lead to collaboration difficulties owing to a lack of standardized naming conventions.

An example of a card that does not have an industry-standard name

So, how might we standardize design patterns on the Transit app without compromising on the creative variations that make it special?

Introducing Express for Transit

Find the UI Kit on Figma Community here.

Access the documentation on the Express Design System site on ZeroHeight here.

Let’s see how Express came to life!

The creation of Express was driven by 3 tenets of product design derived from Transit’s mission statement.

The 3 design principles behind Express

Human centered

We design for real people, ensuring every interaction feels beautifully crafted and meets their needs, regardless of circumstance.

Go the extra mile

We take the extra effort to make sure our work uplifts and inspires people, beyond just solving a problem.

By and for the people

This design system, created by and for our designers and developers, provides a clear framework to create quicker.

We created the system with an Atomic Design approach, beginning with design tokens that standardize how color and type are used.

While this was a straightforward task for typographic styles…

How we standardized type styles

We realized that the app has a lot of thematic variations that need to be acknowledged in our color foundations.

We wanted to cater to the creative versatility of the app…

The app has entirely varying color schemes on different pages and flows. While most of the app has a light theme, some pages have colored backgrounds for a fun aesthetic.

… But the first version of our color token collection was too complex.

We created 2 versions of almost all color variables:

1. OnPrimaryBG: Colors used on a white background.
2. OnSecondaryBG: Colors used on a colored background (usually green).

A snapshot of how the V1 of our color collection looked, with repeating variables.

This was not only difficult to manage but also increased the complexity of the system, which could directly affect its adoption.

So, we utilized the concept of Modes, which helped cut down color variables by 40%!

A snapshot of how the V2 of our color collection looked using Figma Modes

Now, designers and developers would have fewer choices to pick from, allowing them to focus on solving core user problems.

Let’s see how this works in the Figma file…

Using modes, changing the theme of the page would become as easy as a single click!

The Transit app has UI patterns that repeat broadly, but contain customized design elements that fit the context of use.

While we could just standardize these into one format, we chose to find a solution that gave designers using the system the flexibility of creating more customized components.

So, we used Instance Swaps to create components with customizability without expecting developers to build custom code for these use cases.

The design of UI templates using instance swap properties to allow design customizability.

Let’s see how this works in the Figma file…

What worked, what didn’t

To test the effectiveness of Express, we asked designers to recreate some screens of the app using our new UI Kit.

Images from our initial user tests where designers used Express for the first time.

We found a few things…

Using the components was easy, but the organization of the UI Kit could be made more intuitive.

Testers struggled to find components to build screens which is counter-intuitive to the efficiency that a design system brings. The original file was structured on the basis of the complexity of components, which made it difficult to find very specific contextual components.

“Oh, is this card component not in the kit? I can’t see it anywhere.” said Tester #2, about a card component in the search flow that was, in fact, a part of the UI KIT…

To solve for this, we restructured the UI Kit by the broad flows where the components are used.

This would make it easier to find such components.

Before v/s After of the File Structure based on user testing

We also found that properties were difficult to understand if you didn’t have a proper understanding of the app.

This problem was solved in two ways: making the property names easier to understand and creating a documentation site that explains how properties can be utilized to achieve the desired designs.

The documentation site is built on ZeroHeight and acts as a source of truth for all questions a designer or developer may have about various components and design elements.

How did it all turn out?

We pitched the design system to our class as if they were the product team at Transit.

Pictures from our pitch where we showcased Express and advocated for its adoption.

The pitch included why Transit needs a design system, how the system is built to aid the creativity of the team, and how everyone at Transit benefits from the adoption of this system.

The pitch was a success as the audience resonated with our reasons to propose the Express design system and how we quantified the time and cost benefits of its adoption to the company, as it was built for a lean design team.

Through this project, I learned how design systems can be built to support creativity and efficiency in lean product teams.

My key takeaways from building this design system were:

1. Systems thinking is a matter of deconstruction and construction. Seeing patterns in digital products helps create scalable workflows that lead to efficiency.
2. I learned about core design system concepts like tokens, modes, accessibility, and component creation.
3. Systemizing design is a lot about finding solutions that work for all team members so that the output is more adoptable.

Find the UI Kit on Figma Community here.

Access the documentation on the Express Design System site on ZeroHeight here.