Uber Brand Guidelines

A set of values, attributes, and artwork that reflects the spirit of our company.

Uber Brand

Time: 2013 - 2015     Role: Product Designer  

Back in 2014, I joined the Brand team as a product designer. They were a startup moving extremely fast without a unified set of design guidelines. This created duplicate elements of every component in the mobile apps and was becoming unmanageable.

 

I was hired to audit both the iOS and Android rider app, narrow down the components to what was essential, and come up with a GUI for all designers to work from moving forward. 

The Problem

When I first joined Uber, there were less than 20 designers at the company. Because they were moving extremely fast without a common set of design guidelines, there were creating multiple versions of the same elements, which was adding cruft not only in design, but also in code.

User Flows

To start, I took screen captures of the entire app to understand the user flow. I then decided to separate the project by different components to be able to compare and contrast every little detail.

Sign in and Sign Up

On Trip Screens

Confirmation Screens

Account Trays

Arrears

Audit Specific Components

Every component had multiple variations, which were all very similar. The following screens are examples of the way similar components were being used throughout the Uber rider app

Light Gray Button

3 variations

Black Button

3 variations

Blue Buttons

4 variations

Other Colored Buttons

4+ variations (ratings, brand, social/share)

Outline Buttons

4 variations

Modals / Pop ups

8 variations

Background Overlays

8 variations

Backgrounds

8 variations

Input Fields

7 variations 

Spinners

7 variations 

Errors

7 variations of error types

Colors

For colors, I asked the engineers to look up the number of times a color was being used in the product. This helped us determine which specific colors to narrow them down to.

  • Black: 20 variations 

  • Gray: 70 variations

  • White: 7 variations

  • Blue: 7 variations

  • Red: 5 variations

  • Green: 4 variations

Final Designs

  • Narrowed down all of the different variations to the most essential components

  • Worked with Uber's head of design to move this project forward

  • Put together a guideline for both iPhone and Android

  • I presented my process to the entire design team at Uber (50+ designers at the time)

  • This was made available and used by every designer moving forward

GUI for iOS

GUI for Android