Uber Rides

Mobile Design System

Shipped November 2016

Part of my work on the new Uber app included a group of projects that can be categorized as platform design.

These projects included rethinking the IA of Uber’s side nav and sub-items, designing the "Settings" and "Edit Account" experiences, and designing granular system components like inputs and loading indicators.

Overall, this project was less about moving numbers (although clearer IA definitely increases usability) and more about setting up teams across the organization to move faster while creating features in the new app.

Since launch, countless teams have plugged into these frameworks and utilized these components while developing new features.

Sketch, After Effects, Framer

Mobile Design System Visuals

Uber’s old side nav IA (left) versus the new simplified IA (right).

One of the largest portions of my work included re-organizing and simplifying the IA of the rider app side nav, which had become cluttered with content over the previous 3 years.

When all was said and done, we went from 10 top level nav items to 5. We removed an unused notification center and “About” section and streamlined and re-organized our “Settings” page to prioritize the information riders needed to see most.

Side nav interaction prototype and the “Edit Account” Flow.

Redesigning the “Settings” page also included creating a new “Edit Account” experience. Whereas the experience was previously abstracted from general settings, it would now be accessible from a simple summary line item at the top of the page.

The new “Edit Account” page featured a condensed view of the rider’s personal information that, when tapped, would transition to a focused view of the tapped item. This allowed for the inclusion of longer flows while editing information that required additional steps, like mobile verification when changing a phone number.

Toast and loading indicator.

Last but not least, my platform work also entailed creating reusable components that would help other teams move faster while building new features.

My contributions to the platform included inputs, loading indicators, and toasts of different kinds. Our platform design was collaborative and other designers contributed components as well.

Various input prototypes built for user testing.