Lyft Ebike Reservation

Making how you get around reliable.

Image alt tag

For those who like to get around on two wheels, I designed an e-bike reservation user journey.

Ebikes are in high demand. Finding an ebike feels like hitting the jackpot. Score! But in a megacity like NYC, all you can do is hope that an ebike is there when you arrive at the dock station. So I created the option to reserver ebikes to rid riders of their worries. No more leaving it up to the fate of, well, New Yorkers.

The Problem

Currently, the Lyft Citi bike app only indicates if an ebike is available. There's no way to know in advance if an ebike is defective (i.e., broken wheel, seat, handlebar, etc.). And there's also the chance that there are no ebikes by the time a user arrives at the dock station. This frustrates riders because they'll need to decide if they want to find another ebike, take a regular bike, or take another mode of transportation altogether. So inconvenient, right?

The Solution

Design a feature for Citi bike users that allows them to reserve an ebike in advance to promote a smoother No worrying. No rushing. No problems. might we design a feature for Citi bike users that allows them to reserve an ebike to ensure their commute is seamless and reliable?


  • Figma

My Role

  • UX Design

  • UX Research

  • UI Design


  • Overall: 12 weeks

  • Discovery & Research: 4+ weeks

  • Design & Testing: 8 weeks

My Design Process
User Research

Before diving into the mind of my target user, I conducted a competitive analysis to see how Lyft can differentiate itself in the shared bike-riding market. I looked at Uber, Lime and Bcycle.

Lyft Citi Ebike Reservation

Empathy Map

Empathy Map

To really get inside the head of my target user, I created an empathy map to better understand how they think and behave. This design artifact also helps to identify the types of decisions a user will make to achieve their end goal. Considering my users' mental processing styles steers my design in the right direction.

Lyft Citi Ebike Reservation

Initial Concept

User Interviews

To better understand my user's pain points, I first wanted to understand their experience with the current Lyft app. I conducted individual interviews with four city bike riders to get a better idea of their frustrations. I also showed the interviewees a rough draft of my design concept and asked questions about their initial impressions and honest feedback. Using empathic listening techniques, interviews were recorded over Zoom in a controlled environment.

Lyft Citi Ebike Reservation

Interview Data


  • Users want more visual/assistance cues to find ebikes and navigate the app

  • Ebike mileage is not ready visible

  • Users prefer to ride ebikes over regular bikes

  • Users want the option to reserve an ebike

Lyft Citi Ebike Reservation

User Persona

User Persona & User Story

Based on findings from my user interviews, I developed a user persona to represent the goals and motivations of my target user. I referred to my user persona, Quenie, throughout my design process to avoid the pitfalls of self-referential design and guide my decisions.

Lyft Citi Ebike Reservation

User Story

Conceiving a user story puts my solution in context for my target user and helps to identify the types of decisions and actions they will make to achieve their goal.

Lyft Citi Ebike Reservation

Site Map

Site Map & User Flow

To understand how the new user flow of reserving an ebike fits into the current Lyft app, I outlined a site map to establish an information hierarchy. Then I zoomed in on the new user flow to identify the critical decision points presented to the user. This helped me to consider alternate paths a user can take to accomplish their goal.

Lyft Citi Ebike Reservation

User Flow

Lyft Citi Ebike Reservation



Using Figma, I designed a low-fidelity mockup of my new user journey. I designed the homepage and bike view of the Lyft app and then added the new screens for the ebike reservation journey. I maintained the same informational structure and design components throughout.

  • Greyscale wireframes help to keep the user journey the focal point and allow for fast iterating.

  • I referred to my user interview findings to guide my design choices and create the most logical flow.

Lyft Citi Ebike Reservation


  • In addition to the ebike reservation, I also addressed the user paint point of ebike mileage by making it visible immediately after they select an ebike.

  • I added a timer of 5 minutes that starts as soon as a user reserves an ebike to create a sense of urgency and to prevent users from abusing the reservation feature.

  • The user also has the option to cancel their reservation at any point.

Lyft Citi Ebike Reservation

Ebike Reservation Screen

UI Design

For my high-fidelity prototype, I maintained the Lyft brand colors and design system.

  • I followed the dark mode color palette and used a font similar to Lyft's custom-made font. I used SF Pro Text.

  • Putting together the design system helped me understand the purpose of each color to make the primary action on each screen clear to the user.

Lyft Citi Ebike Reservation

Design System

Lyft Citi Ebike Reservation

High-fidelity user interface design.

Lyft Citi Ebike Reservation

High-fidelity prototype of ebike reservation user flow.

Usability Testing
Lyft Citi Ebike Reservation

Usability Testing Results

User Testing

I used my high-fidelity prototype to conduct 1-on-1 usability tests over zoom with 4 users that fit the profile of my target audience. I had an average success rate of 90%. The part where my users did not take the desired action was on task #4: it was not clear which action was required to minimize the menu to view the map again. This is a point of friction that I resolved in my updated prototype.

Lyft Citi Ebike Reservation

Synthesis of Usability Testing Results


I synthesized the findings from my usability testing into two groups: change considerations and feature requests. Grouping my findings into these categories helped to determine the improvements I needed to incorporate into my updated prototype.

Lyft Citi Ebike Reservation

MoSCow Prioritization Method


I prioritized the change considerations and feature requests using the MoSCow method. This helped to determine the order of importance of design elements to incorporate into my updated prototype.


Updated Prototype

Below are the changes I made to my prototype based on the synthesis of my usability testing results. I improved my design by making the primary action clearer on the ebike reservation screen and adjusting elements to create more consistency across screens.

Lyft Citi Ebike Reservation

Second iteration of hi-fi prototype with design changes.

Updated Prototype

Next steps

My next steps would be to conduct usability testing with my updated prototype to test the efficacy of my design changes. I would also time how long each participant stays on each screen to accomplish the task. And I would conduct usability testing with at least 5 subjects to gain further insights.

Something I would've loved to add to the prototype was the horizontal scrolling of the dock numbers to show the full number of bikes at the selected dock station. The horizontal scrolling would show the user journey I designed for selecting classic bikes and the state for unavailable bikes. Another feature that I would've loved to add was a live timer that starts immediately after a bike is reserved.


One of the most important skills I learned while working on this project was to pose the right questions to my interviewees to promote unbiased and honest answers. I learned how to reframe questions into non-leading questions and record their answers verbatim to avoid sprinkling my biases in the data.

This project contributed to my growth as a designer because it taught me the value of conducting usability tests in the earlier stages of the design process. I conducted my usability testing with my high-fidelity prototype when I should have conducted the testing with my low-fidelity wireframe first. Implementing design changes at the wireframe stage is much less timely and costly than incorporating updates into a high-fidelity design.

Thanks for making it to the end! It was a journey.

Feel free to contact me if you'd like to work on something together.
Or drop me a line on social.