lyft-logo-2

After years of adding tons of new features in an older design, Lyft needed a fresh new design that was flexible enough to accommodate new functionality. The result is a fresh design that lets users easily find features and request a car in less taps.

 

During the redesign process I animated user flows and features to quickly find what worked. Being able to see a walkthrough of an idea so early on was invaluable to the design process.

 

I also worked on defining the new motion language for Lyft. This system was documented and made it so future transitions, UI elements, and features are unified.

lyft-logo-2

After years of adding tons of new features in an older design, Lyft needed a fresh new design that was flexible enough to accommodate new functionality. The result is a fresh design that lets users easily find features and request a car in less taps.

 

During the redesign process I animated user flows and features to quickly find what worked. Being able to see a walkthrough of an idea so early on was invaluable to the design process.

 

I also worked on defining the new motion language for Lyft. This system was documented and made it so future transitions, UI elements, and features are unified.

lyft-mobile-bkg

Line Styles

 

This study explored ways to communicate information using the in-map route line. The designs showed different options for ride types, arriving and departing status, and information on other riders.

 

This study explored ways to communicate a chosen ride type using the in-map route line. I explored many different options for ride types, arriving and departing status, and information on other riders. I also explored ways of incorporating the amp pickup color.

Lyft Route Overview Design

Route Design Styles

Lyft Arriving

Arriving Route Design

Lyft In route

In Ride Route Design

Lyft amp

Arriving with Amp Design

Line Animations

 

Communicating a shared route was previously displayed as a direct arched line. While this communicated a rider’s exact route was unknown, it felt like a faster route when viewed next to a regular direct route. I wanted to figure out a way to communicate the route could change, and the possibility that other riders could join.

Traffic

 

Lyft riders frequently complained about long pickup and ride times. Most of this was due to traffic, which is out of Lyft’s control. I explored ways to introduce traffic conditions into the app. The options could be displayed automatically, or as a slightly hidden feature by holding down on the route itself.

Traffic

 

Lyft riders frequently complained about long pickup and ride times. Most of this was due to traffic, which is out of Lyft’s control. I explored ways to introduce traffic conditions into the app. The options could be displayed automatically, or as a slightly hidden feature by holding down on the route itself.

UI Elements

 

I explored many ways to bring the elements of the new interface to life. These subtle animations were crucial in bringing character to the simple clean design.

UI Logic

 

The way elements and pages are introduced inform the user a lot about the logic of the interface. I created a system for panel movement to keep the new app consistent.

 

Every animation uses the same animation style and motion curves. This system was later documented and handed off to developers.

Overlays and Popups

 

Card and full screen notifications slide up from the bottom of the screen and dismiss in the reverse direction. This in and out motion return the card to its origin, indicating nothing has changed. If an option is accepted the card scales back into the screen, subtly signaling an alteration has been made.

Menu

 

The main menu reveals itself in a similar direction to the overlays. When drilling further into the menu, a quick left to right crossfade is used. This gives a refined airy feeling as opposed to reverting to the standard page structure.

Promotions

 

One way Lyft added a touch of whimsy to its previous app was the promotional car illustrations. Users would find the cars on their map changed to pumpkins or zombies during Halloween, or their local sports team colors during events.

 

One goal during the redesign was to fix some of the chaos that came from local vendors creating odd car illustrations, and keep the Lyft cars on brand. This left a void for promotions so I explored many different areas to reintroduce this feature. I found the matching screen was the perfect fit for this, since users were waiting on this screen anyway.

Quick Actions

 

The new redesign let users call a car in as little as three taps, but could we do better? I explored ways to let users call a car to their most used destinations with just a swipe and confirmation tap.

App Loading

 

Many different factors can lead to a bad app launch experience, like slow data connection, car density, and GPS load time. I explored ways to smartly orchestrate the app launch to create a great experience, no matter how long it took.