Uber Brand Guidelines

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

Uber_Hero1.jpg

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

UberSignIn.png

On Trip Screens

UberOnTrip.png

Confirmation Screens

UberConfirm.png

Account Trays

UberAccountTrays.png

Arrears

UberArrears.png

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

UberGradientBtns1.png

Black Button

3 variations

UberBlackBtns2.png

Blue Buttons

4 variations

UberBlueBtns3.png

Other Colored Buttons

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

UberColorBtns4.png

Outline Buttons

4 variations

UberStrokeBtns1.png
UberStrokeBtns2.png

Modals / Pop ups

8 variations

UberModals1.png

Background Overlays

8 variations

UberBgOverlays1.png

Backgrounds

8 variations

UberBgs1.png

Input Fields

7 variations 

UberTextFields1.png

Spinners

7 variations 

Screen Shot 2020-05-02 at 10.58.36 PM.pn

Errors

7 variations of error types

Screen Shot 2020-05-02 at 10.58.24 PM.pn

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

UberColors1.png
Screen Shot 2020-05-02 at 10.57.01 PM.pn
Screen Shot 2020-05-02 at 10.57.50 PM.pn
Screen Shot 2020-05-02 at 10.57.14 PM.pn
Screen Shot 2020-05-02 at 10.57.24 PM.pn
Screen Shot 2020-05-02 at 10.57.39 PM.pn
Screen Shot 2020-05-02 at 10.57.31 PM.pn
Screen Shot 2020-05-02 at 10.57.08 PM.pn
Screen Shot 2020-05-02 at 10.57.45 PM.pn

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

clipart-bottleneck-3.png

GUI for iOS

3_GUI_iOS_recco.png

GUI for Android

3_uber_android_GUI.png