I went to a Design Guru Summit workshop on May 17th. At the workshop, Frank Yoo, the head of UX and product design at Lyft, talked about the Lyft re-design. I learned useful design insights from his presentation and thought I should 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: I researched more about the Lyft re-design on the web, and decided to turn this into a case study.

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

Maslow’s Hierarchy of Needs

Lyft used this concept to define their design principles in a Pyramid shape. I find it interesting 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, and 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)

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 — the name of your driver, and the color/model of your driver’s 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.

3.Price Estimate Feature
The new UI includes a feature that allows users to get a quote on a ride. 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. UI for further actions in the request flow are also located in the same spot, resulting in a seamless experience.

• 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).

• 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.

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 Tanshared 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

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 — 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, ask them questions and listen to their feedback. By doing so, the design team is able to find out 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

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:

Organizing and structuring design principles is just as important as creating them in the first place. I’ll continue finding ways to better structure the design principles we created at work, and visualize them so that everyone can get a good understanding of it across the organization.
Don’t be afraid of doing product re-designs. If you have good reasons and understand what the usability issues are, start planning! Get to know your real users — user testing is the key. Collect as much quantitative user behavior data as you can, then analyze and categorize them to make sure you have solid qualitative data to support re-design thinking. Follow the cycle of design, release, get user feedback and iterate.
Lyft’s re-design is a great example to show how to create a successful product. If you care about your users, put yourself in their shoes to understand what they need and what they actually do when using a product. If you don’t have a UX research team yet, build one or become a researcher yourself! At work, I work closely with our UX research team, they help the design team tons by recruiting users, setting up user testing, and analyzing the massive data comes in every month. Thanks to their hard work, the design team can take over the numbers and metrics, analyze further to define specific usability areas, and to communicate re-design decisions to our leadership.
Lyft’s re-design case study helped me understand how other companies generate business value by implementing great design in both UI and UX. It gives me confidence that if we apply similar principles, and keep doing what we are doing on UX research, our product team can help the company product achieve much more success in the near future.