Uber Design Platform
This morning, I took a Jump bike to my office in San Francisco. As I write this, an Uber driver in Bangkok is taking a customer home on a tuk-tuk; a busy family in Birmingham has ordered dinner on Uber Eats; and commuters in Denver are holding train tickets purchased on Uber Transit. There is even a decent chance that you’re reading this while taking an Uber.
As Uber’s products scale and our portfolio expands, the landscape of variables and locales that we design for also evolves. With over 10 million trips happening a day, how can we ensure a positive, reliable experience for everybody?
The answer is our Design Platform. By creating a system that not only acknowledges but also leverages Uber’s evolution into a platform, we support our designers with a robust, consistent set of basic elements while enabling them to freely explore.
A platform for design
We’ve introduced Uber’s apps and services at lightning speed. In the beginning, our decentralized system allowed us to innovate and experiment. This gave us the power to introduce innovative design patterns, but it also fragmented our user experience. We realized that although the use cases for riders, drivers, and eaters may be quite different from each other, the experiences that shaped their interactions shared some underlying foundational patterns. By paying attention to these common patterns, we can ensure a coherent experience across products and locales.
Today, Uber is a platform: the variety of services we offer feed into a single ecosystem whose strength is built on how — and how well — those services interconnect. As our platform evolves, so does our process for how we design at scale.
We need tools that help designers stay in sync, common design libraries that provide them with our growing body of learnings and the means to recognize and apply our patterns to a diversity of user experiences.
This system must be able to welcome incoming innovations without disrupting the existing experiences that feel familiar to so many users.
The Base design system
By grounding design at its basic level, we built a flexible system that empowers designers with the freedom to explore while keeping consistency and quality at the core.
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, as well as essential elements like buttons, lists, and controls. Today, it has become the UI framework for all our products.
Designers shouldn’t be checking their work against a design system, but rather integrating it with their natural workflow.
The design system is the first piece of the puzzle, not the last, and should help design faster while maintaining high standards and consistency. That’s why we conceived Base to be dead simple. It has four font categories, three main colors — white, black, and an accent color — and five core sizes based on a four-pixel grid.
It’s like playing with LEGO: single bricks can make up so many constructions. The basic brick doesn’t change, but the builder uses it to create, unleashing its potential. While these components are basic at their core, they also highly customizable through style overrides and can be configured in many different ways.
Connecting our design into a single system allows us to think beyond pixels. Designing at Uber is first and foremost about recognizing how the virtual and physical worlds interact and how our digital affordances have wide implications that affect user behaviors and our society: this is something that we refer to as designing for patterns. Having a clearly delineated design system with supporting tools not only helps designers avoid wasting time while “pushing pixels,” but frees them to focus on identifying such patterns and designing for positive impacts in the real world.
Documentation and assets
The simplicity of a design language needs to extend to how it is distributed and maintained.
Designers are creatures of habit. Breaking the momentum of focus is a bummer when you constantly need to leave your workspace to find reference documentation.
In the past, we’d created internal websites that featured our style guide, but this required maintenance risked becoming obsolete and was yet another place you had to go to find relevant information. Today, we write our documentation right into the tools.
We turned to Figma as our main design software for its powerful collaboration features. Because this means that our work files live exclusively on the cloud, we can maintain a single source of up-to-date documentation. We manage a comprehensive library where we not only publish and update our UI components, but where we also write supporting guidelines, build lists of Dos and Don’ts, and showcase good examples. One key benefit of a live system is that we only need to maintain a single file: a single place designers can turn to for everything they need.
Icon libraries and icon styles had historically differed across each of Uber’s products. Originally this approach seemed to make sense, given that riders, drivers, and eaters all have entirely different contexts. But we realized that a common set of transportation and lifestyle icons worked across every single one of our products, both internal and external.
Now we have a unified system of iconography, illustrations, and assets. Design teams at Uber can make new requests, and these are fulfilled by a single creative team.
Our design process doesn’t stop at creation: it has been thought through for the whole production chain, from receiving requests to providing access.
Our assets are used by a variety of disciplines with very specific needs, including product design, marketing, and engineering. To save resources and optimize our workflows, we have created differentiated access points to serve those needs, while maintaining a single system. Designers, who use Figma, can access our vector assets directly in a shared library. We diligently tag each component with keywords to make searching easy.
Marketing specialists are not always familiar with design tools like Figma; they mostly need PNGs. We built a super-fast internal website that pulls images directly from the Figma file, with search powered by keywords added to the original component. This way, even people who are not familiar with design software can access the assets they need.
The human platform
Components, design systems, and tools are valuable only as long as people are familiar with them.
After several years of experimenting with different approaches, we’ve learned that the key to creating and keeping momentum is the community that grows around the system.
One little tool we invested in is what we call DesignKit. It’s a simple Mac OS menu bar extension that gives designers quick access to our tools. We can update DesignKit’s content on the fly so that it can always surface what’s new and relevant. One of its most convenient features is the ability to send native push notifications. Emails and newsletters don’t really serve the need to communicate brief, simple updates to a design system, and the number of emails can be overwhelming. Thanks to DesignKit, we can send quick updates without overloading designers with extraneous communication.
It goes without saying that tools don’t make the design.
Design ultimately happens through collaboration, discussion, experience, and hard work. To keep tabs on what product designers are working on, we are scrupulous about allocating time for design critiques, 1:1 meetings, workshops, and many other formal and ad-hoc occasions for in-person communication.
Culture also plays an essential role. At Uber we encourage our designers to design in the open, to constantly share ongoing work, and to collaborate. In that spirit, our design system is not a set of rules that we enforce through a series of gates and control processes, but rather an inclusive, constantly evolving ecosystem where everyone is invited to participate. The more we all participate, the better the system gets.
The ultimate goal of our design platform is to make every designer a little better at thinking of everything 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 across the company.
It’s a simple rule: as each of us improves the quality of our work and through that work helps everyone else to improve, our craft will get collectively better, and so will our products.
If you are interested in joining our team, please check out the current job listings.
