How we scale design using patterns

Designing at Uber is foremost about recognizing how the virtual and physical worlds interact and how our digital affordances have wide implications affecting user behaviors and society. We call it designing for patterns.

From cars and trucks to tuk-tuks and helicopters, the use cases for riders, drivers, and other users might be quite different from one another, but we realized the interactions shaping their experiences share underlying foundational patterns.

So our team set to work creating Uber’s Design Platform system, which gave us the opportunity to welcome innovations and apply our patterns to diverse ecosystems while staying true to familiar user experiences. We also took the occasion to create consistency, design for simplicity, and, most importantly, develop our designers.

A clearly delineated design system with supporting tools helps designers avoid wasting time “pushing pixels” and frees them to focus on identifying such patterns and designing for positive, real-world impacts.

In 2018, we created a web React library and released it to the public as the Base Web open-source project. We called it Base because it focused on the basics, such as typography, color, grid, and iconography, plus essential elements like buttons, lists, and controls. Today it has become the UI framework for all our products.

The Base design system supports our designers with this robust set of basic elements while letting them freely explore. It’s the first piece of the puzzle—integrated with designers’ natural workflow, not something they check their work against at the end—and should help them design faster while maintaining high standards and consistency.

All this is why we conceived Base to be dead simple: 4 font categories, 3 main colors (white, black, and an accent color), and 5 core sizes based on a 4-pixel grid.

It’s like playing with Lego: the basic brick doesn’t change, but the builder uses it to create, unleashing its potential. Our components are basic at their core, but also highly customizable through style overrides and can be configured in many ways.

In the past, we put our style guide on internal websites. Those became obsolete quickly, and finding them was an added step. By turning to Figma as our main design software, we can maintain a single source of up-to-date documentation. Our comprehensive library there features UI components, supporting guidelines, do and don’t lists, and examples.

The ultimate goal of our Design Platform is to help every designer become better at thinking in terms of systems—grids, typography, language, motion, accessibility, and so on. This allows everyone to design together, to learn from a common source, and to have a shared understanding of product quality company-wide.

Our design system isn’t a set of rules we enforce through gates and control processes. It’s an inclusive, constantly evolving ecosystem where everyone is invited to participate. The more we all participate, the better the system gets.

And as each of us improves the quality of our work, our craft will get collectively better, and so will our products and our impact on the world.

This case study is excerpted from an article published on Medium on August 12, 2019.