Image from lyft.com

I went to a Design Guru Summit workshop on May 17th. At the workshop, Frank Yoo, Lyft’s head of UX and product design at Lyft, talked about the Lyft re-design. I learned useful design insights from his presentation and I wanted to share some takeaways with my design team at work. On May 26th, I met Vicki Tan, Lyft’s product designer, at Tech in Motion + Verizon Present: Data and Design Tech Talk. She generously shared how their design team did A/B testing, and answered a few questions I had regarding their UX challenges. In order to better support my takeaways presentation, I did extra homework by researching more about the re-design online, and then creating a case study.

Photo of me presenting my takeaways at work

Workshop Notes

1. Lyft 4 year Overview

Year 1: Market Fit

Year 2: Unlocking Supply

Year 3: Growth — Growth levers, new regions, marketing (data numbers)

Year 4: Case Study — Redesign Lyft

2. Lyft Redesign Goals

• Scale for the future

• Provide better context

• Improve ergonomics and discoverability

3. Lyft Design Principles

• Nail the basics — Clear choice and context

• Build confidence — Consistency and transparent

• Be unique — Own-able and delightful

1–3 are notes I took from Frank Yoo’s presentation at the Design Gurus Summit workshop.

A photo of Lyft’s design principles, taken at the workshop

Lyft used this concept to define their design principles in a Pyramid shape. I was fascinated by how Lyft integrated psychology to define the principles order of importance.

As a designer, I often run into situations where people have different ideas about design decisions; it can be tough to judge without any design principles. Therefore, with the encouragement from my colleague Klara Pelcl, I convinced our leadership to let me and Jules Cheung initiate and collaboratively set core design principles among our design team.

We brainstormed together and created our own 6 principles: Know Your User, Clarity, Consistency, Efficiency, Collaboration and Beauty. By looking at Lyft’s design principles graphic, it encouraged me to think about what we can do next to apply them in practice.

Online Resource

UX Challenges

I wanted to know what type of UX challenges Lyft faced while designing the app. I was glad to find some useful resource from Nectar Design, where Frank did a webinar about how Lyft handles UX challenges, and used the same pyramid method to tackle UX challenges. Here is a summary from Nectar Design: • Usability — It must solve a compelling user issue

• Reliability — Everything must work seamlessly and be as transparent as possible (Ex: ride times and costs)

• Differentiate — It must be visually and interactively interesting (Ex: Lyft’s glowing buttons and interactive options menu)

Image from Nectar Design

Reasons for Redesign

During the webinar, Frank talked about the reasons they re-designed the Lyft app, something I wish I could have asked him in person. Again thanks to Nectar Design I was able to find the reasons: • Poor representation of the driver that is requested

• No transparency about price or estimated time of arrival

• Cars were not directional

• Poor use of color

• Options panel awkwardly placed

• Request Lyft is vague for first time users

Images from Nectar Design, I added title before and after to show comparison

Success Analysis

Now you probably want to know what results the Lyft re-design achieved. I might not be able to cover everything here but I’ll share what I have so far.

1. Enhanced Transparency and Safety

After the system matches you with a driver, you can see all the important information you need — your driver’s name and the color/model of his/her car. More importantly, displaying the driver’s license plate number helps you quickly pick the right car so you know you’re with the right driver.

Image on the left is from pdxlyft, image on the right is a screenshot from my Lyft app

2. Better Usage of Primary Color

From what I can see, Lyft uses hot pink as the primary color, and purple as the secondary. During the workshop Frank talked about the pink color and how they decided to limit the use of it, applying it only in important situations. My understanding is that they made the pink color an action item color, such as the logo, the “Request Lyft” button, the destination pin and “Free Rides” on your profile menu.

Screentshots from my Lyft app

3. Price Estimate Feature

The new UI includes a feature that allows users to get a ride’s quote. By clicking on “Price estimate” (see the image above), you have a good understanding of how much the ride is going to cost you. For example, a trip to Spicy King restaurant in Chinatown will cost me about $7-$11 from my pickup location.

4. Made It Ergonomic

Ergonomics make the user experience much better. The older app design had actions at both the top and bottom of the screen, which made it harder to use because your fingers had to cross the screen back and forth. What about the new design? I really like it myself as a user for the following reasons:

• Tab Menu

All important menu actions are now at the bottom of the app, where you can select a type of ride you need (Carpool, Line, Regular Lyft, Plus and Premier), and you can set a pickup location right after. The UI for further actions in the request flow are also located in the same spot, resulting in a seamless experience.

Image on the left is from pdxlyft, image on the right is a screenshot from my Lyft app

• Lyft Cars

On the map, the little Lyft cars were re-designed nicely, with a hint of pink and purple that shows color consistency across the app. Cars now turn directionally, which is a big help to people like me who don’t have a great sense of direction with maps — I can now easily figure out if the car I requested is heading towards my location or if the driver is going the opposite way (which also explains why sometime it takes longer than the estimated arrival time).

Image on the left is from pdxlyft, image on the right is a screenshot from my Lyft app

• Options Before Car Arrival

The new UI provides 4 options (Cancel, Split, Send ETA, Call driver) to users before their car arrives. I remember the hard time I had with the older UI, when I had to call my driver but couldn’t find the button. Ease of use is much greater with all the options displayed up in front.

Screenshot from my Lyft app

UX Research

Lyft has different type of users — passengers and drivers, how does UX research collaborate with design? As I mentioned in the beginning, Vicki Tan shared her insights during the panel at Tech in Motion + Verizon Present: Data and Design Tech Talk, where I learned quite a bit about their research.

• Qualitative data vs. Quantitative data

Image from Valient Market Research

Like many other companies, Lyft is metrics-driven and focuses on quantitative analysis (usually the numbers and graphs can be shared with the teams and the stakeholders in many formats, such as email, keynotes). However, quantitative data needs analysis to be useful. Because of that, qualitative data comes in handy and that’s what they focus on more now.

• Gather User Feedback

Image from Medium post by Violeta

According to Vicki, Lyft invites real users (both passengers and drivers) to do regular weekly Q&A sessions in the office to ask them questions and listen to their feedback. By doing so, the design team learns if the users understand the features and what can be improved.

I believe Lyft also uses other methods to collect qualitative data, so I did some research online and it looks like Lyft has been using “Lookback” to aggregate a database of experiences where they can generate a montage of user feedback to better understand their needs. I tried “Lookback” a few months ago, and found it very easy to record prototype testing on mobile. At my company, our design and UX research team have been using “Validately” to do both moderated and unmoderated testing.

• A/B testing

Image from vwo.com

During re-design progress, Lyft ran many A/B tests. As a result, Vicki found that the design they wanted was not the design the users wanted. At work, my design team faces this struggle all the time where we have different assumptions about what works for users the best. Without A/B testing, we are essentially designing features that suit our best interests, and might not be what the real users need.

• Outcome

According to Nectar Design, Lyft has conducted hundreds of hours of user testing and validates their assumptions along the way. This is good because it builds confidence in the team, stakeholders, and customers.

Conclusion

Here is what I learned from doing this case study: