Design challenge post-mortem: Lfyt.com redesign

10 min readMar 9, 2024

Overview

I was recently given a design challenge for a job opportunity I was up for. Although I didn’t get the role, I wanted to share what it was so I can talk about how I approached it and what I designed. For context:

I had a few days to turn this in
Used Figma’s free version which is limited to 3 pages and I couldn’t use the conditional logic features for my prototype :/
Used Mobbin for UX/UI design pattern research and inspirations
Vecteezy for icons and illustrations (free trial)

The Challenge

“For this challenge, we would like for you to design a high-fidelity web/desktop application for Lyft.com. Feel free to be as creative as you would like for this product, but branding-wise it should feel like it goes in line with Lyft’s style guides.

You have the freedom to add as many features and functionality into the concept as you would like, but at its core, we would be looking to make sure a user could:

Enter a location that they need a ride to
View the time and cost it would take for the ride to complete
Confirm and pay for the ride”

Note: this design challenge did come from Lyft.

Results

Current state (above the fold)

Redesign (above the fold)

Full page

Note: more designs are shown later in this post

My Approach

Before I began any design work, I considered:

Context: Who is the audience?
Goals: What are they trying to do?
Which UI patterns/flows are relevant to this?
Current state of the product

Context: Who is your audience?

Riders (e.g. adults of various ages, local or from out-of-town)
Drivers (e.g. adults of various ages with access to a vehicle)
Note: there were “Business” pages which seems directed at potential business partners that want to use Lyft

Note: For this challenge, I mainly focused on the “Rider” user type and the main ask of this challenge to request a ride. For the other user groups, I wanted to review what content/features Lyft.com currently offered them before deciding what other designs I wanted to make for this challenge.

Goals: What are they trying to do?

Riders: traveling for personal/business reasons wanting to get from A to B in the most convenient, safe, and low cost way possible
Drivers: willing to share their time/car to earn as much extra cash as possible
Business: exploring how/why to partner with Lyft to address their business travel needs

Note: This general framing provided me with a direction on what content to include/remove from Lyft.com when building the final designs.

Which UI patterns/flows are relevant to this?

Key to my efforts for this challenge were the following design patterns:

Navigation (e.g. top-nav, sidebars, footers, tabs, segmented controls) to help address some key issues in the current state, noted below
Drawer sheets to provide a way for the desktop version to leverage some of the mobile designs in Lyft (e.g. requesting a ride)
Cards to help with modernizing the aesthetic and provide a place for content

Current State

When reviewing Lyft.com, I had a couple key observations:

Lyft’s desktop version has pages for “Riders”, “Drivers”, and “Business” each of which contained mostly informational content that pertains to each respective audience; however, there wasn’t much feature/functionality beyond that
When you first open Lyft.com, it seems they prioritize the needs of prospective drivers based on their content on that page
Each page displays new navigation options in the top-nav, but it’s not clear why that was necessary
There is no way to book a ride from the desktop version as any CTA directs you to downloading the app
The overall information hierarchy and aesthetic seems to follow a pretty standard look and feel which struck me as off-brand for Lyft

Key issues I wanted to address:

Navigation: I believed the navigation needed to be reworked to help with usability because the current state felt clunky
Request a ride: Add a way for users to request a ride from the desktop version (as per requested by the challenge)
Content: I believed there was repetitive content that I wanted to reduce to help highlight essential information for the Rider, Driver, and Business audiences
Visuals: Lastly, I wanted to apply Lyft’s branding (e.g. colors) to new components (e.g. cards) to help modernize the layout and aesthetic

Iterations

Navigation

Initially, I believed the core navigation could include:

Home page
Rider (w/ consolidated content)
Driver (w/ consolidated content)
Lyft (w/ consolidated content)

When I started iterating, I wasn’t sure which navigation pattern I wanted to use. However, I didn’t want to start making components for the content until I felt like the core navigation would address the navigation issue I noted above.

So I reviewed the following designs via Mobbin:

There were many more examples but these ones stuck out to me based how they used a mixture of the top-nav and dropdown menus to help present the amount of information and nav-options in a digestible way. This resonated with me because of the multiple top-nav options Lyft.com used within each driver, rider, and business page.

Sidebars are useful ways to take pressure off the top-nav to contain numerous options. As you can see from the examples above, the top-nav still exists but the sidebar does the heavy lifting in navigating from one area to the next. Again, this resonated with me because of the multiple top-nav options Lyft.com used within each driver, rider, and business page.

Within each page, the tab design patterns seen above presents options to view different content without having to leave the page you’re on. This is a pretty powerful design pattern when you have lots of content and/or features needed for a particular audience with various needs. While I thought this could be useful for this design challenge, I didn’t believe there was enough content/features to justify using this pattern.

As mentioned before, I found the drawer sheet pattern useful to simulate mobile experiences on web products. The size of the component (which looks/feel similar to a mobile screen) gives me the flexibility to add as much content/functionality needed without having to leave the page you’re on. The examples above show a variety of ways it has been used to make reservations, finding out more information, paying for things, and more.

Then I combined layouts/design patterns I thought could work best and created these wireframes:

I decided to go with the one below because:

I felt like the combination of the sidebar and top-nav gave me the most flexibility in handling the content and usability needs I wanted to address
Leveraging a drawer sheet design pattern (e.g. “Enter destination”) would give me the flexibility to recreate how booking a ride works on the Lyft mobile app
Providing a “Map” feature could give users the same visibility to see where drivers are similar to the app, but with a bigger canvas

Home page iterations

What became clear was the “Map” feature would add too much visual noise above the fold.

Therefore the “Map” would just be an image. But what image should I use and what will populate my “nav options”? Doing the same as before, I used Mobbin for some guidance:

I also got inspired by the game “Mini Motorways”:

Then I created this first design and added my nav-options:

Before settling on this design:

Nav-options reasoning

For the sidebar, I used those nav-options because I wanted to help address what content each user type would be interested in the most when visiting Lyft.com.

I later changed those nav-options based on the iterations I did for the card design content. That left “Log in”, “Sign up” and “Download app” as the remaining top-nav options.

Lastly, the “Download app” CTA in the drawer sheet component did change once I started working on how someone would request a ride.

Requesting a ride

After reviewing the drawer sheet design pattern, I realized I could replicate mobile designs and flows onto web versions by using this pattern.

For instance, I could repurpose some of the designs from the Lyft app (e.g. booking a ride) to address the core experience need for this challenge and place that flow in the “Rider” page above the fold. I found that flow on Mobbin and picked out which components/content I wanted to replicate in my designs.

The designs I made below represents the “request a ride” flow in the following order:

Card design

Next, I created multiple card designs to help address other content needs for the Rider, Driver, and Business pages to modernize the visual design of the site. For inspiration, I looked at the following designs:

I then evaluated which content I thought was essential on Lyft.com, most of which are represented below:

Final result

All of this effort resulted in these final designs (starting from the top are the Rider, Driver, and Business pages):

Prototype

Below is a short video of the prototype I made showing the navigation and requesting a ride flow in action.

Note: I unfortunately couldn’t represent proper affordances in the sidebar nav-options when you’re navigating on those pages. I think the way to do that is locked behind a feature you have to pay for. Please let me know if I’m wrong in the comments below :)

Reflection

While I’m not generally a fan of design challenges being used in the interview process, I’m reminded of a quote by the late/great actor Philip Seymour Hoffman when asked about his acting career: “If you get a chance to act in a room that somebody else has paid rent for, then you’re given a free chance to practice your craft.”

I take that as meaning any chance you’re given an opportunity to practice your craft, do it and try to do it well. I decided for this challenge I wanted to practice my process, UX audit skills, and stretch my visual design capabilities. If this were real and I was a part of the Lyft design team, I would have pried more about the project goals, requirements, etc., conducted some amount of user research to help with my iterations and more.

Alas, that was not the case for this challenge and although I didn’t get the role, it felt good to practice my craft.