Where to? The journey to Uber’s iconography
In early 2018, the Uber brand team started a rebranding exercise, exploring a fresh take on what it means to be a global transportation and technology company. A new logo was developed in tandem with a bespoke sans-serif typeface called Uber Move. What followed was a natural progression towards universal symbols of iconography that could scale across all products, services, and surfaces. Here’s a glimpse into the evolution and processes.
With typography being one of the most visible parts of our identity, the next step was to figure out how to use it in our Rider and Driver apps. Almost every time we use an icon, it will be accompanied by text, reinforcing each other. It is important that they pair well.
Side by side, our types and icons reflect our original inspiration from the shape of roadway and transit signs. We developed three sets of weights for them.
We iterated these core sets in order to apply to our user interfaces. A design language emerged: Simple. Having just one set would leave little room for interpretation when and where to use what icon. One icon set, for everything. We reduced three icon weights into one.
We experimented to determine that the filled version (such as the ones for the Bold weight above) worked best for glanceability. Its visual weight served well as a visual anchor. We also got rid of the Light and Bold weights. The strokes on the Medium weight gave us more pixel wiggle room in small mobile devices.
Simple
Our lines of business require icons for thousands of user scenarios. We have to redesign existing icons and design new ones in a no-nonsense way. Our ride customers and partners would not care whether we just had a rebrand or not, they need a functional user experience to move on with their lives.
To make an icon simple is not by adding details until it is unmistakably a car. An icon canvas is only 24 by 24 pixels. Its small size allows it to fit inside a button or to accompany other information to make them more scannable. Too many shapes and lines will not fit into the canvas. Therefore, every pixel we draw must be intentional and all decorations should be removed.
Form follows function
Our main goal was to serve users regardless of environmental conditions. A person could hail a Uber ride while standing on a dim lit sidewalk. They could also be running down an airport escalator while looking at the screen. Aiming for clarity, we constructed our icons using basic geometry and placing points only on whole-number coordinates to avoid anti-aliasing. They must be sharp and crisp icons.
No users want to learn new shapes and icons if they don’t have to. One icon should allow multiple interpretations, making it possible for other designers to reuse an icon for different purposes.
Only after achieving the icon’s business goal, we refined its shapes to be uniform with the Uber brand. For example, our icons consistently used the 3px stroke to deliver visual weight as a set.
We also made a company-wide decision to shape corners and stroke terminals square. This brought our iconography and typography even closer together. We only use rounded corners on larger rounding and avoid softening shapes unless doing so makes the icon more recognizable.
New icon request
Oliver Lukman is the main architect of our icon library. Based in Amsterdam, he works closely with product managers and designers across Uber global offices. His process has two main steps:
- Break the object down to real-life parts.
- Find the most basic geometric shapes to draw those parts.
Take the Like icon as an example. A thumbed up hand consists of: the palm which can be a rectangle, the thumb which can be a triangle, and the remaining fingers as a trapezoid.
Here’s how these parts come together:
This sounds easier said than done. When a new icon designer, Vietanh Nguyen, attempted to draw a bicycle icon for the micro-mobility business, his design was immediately rejected after turning on the Show Outlines mode (Cmd+Y in Figma and Illustrator).
We finalize new icon designs with all the lessons learned above:
- The outline must speak for itself. Use the fewest shapes possible.
- The icon must look sharp anywhere. Align vertices and lines on whole-number coordinates within the 24x24 grids.
- A customer in hurry with 10% screen brightness can still recognize the icon. Use thick stroke as much as possible.
Iconography at Uber is constantly evolving. With so much change and cultural considerations in our business and the ride-sharing space, the evolution of our icon catalog will continue to grow with our brand and design systems.
Follow us on Uber Design.
