Empathy Map
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.
So...how might we design a feature for Citi bike users that allows them to reserve an ebike to ensure their commute is seamless and reliable?
Tools
Figma
My Role
UX Design
UX Research
UI Design
Timeline
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.
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.
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.
Interview Data
Insights:
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
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.
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.
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.
User Flow
Ideating
Homepage
Wireframes
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.
Wireframes
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.
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.
Design System
Prototyping
High-fidelity user interface design.
High-fidelity prototype of ebike reservation user flow.
Usability Testing
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.
Synthesis of Usability Testing Results
Synthesis
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.
MoSCow Prioritization Method
Prioritization
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.
Iterating
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.
Second iteration of hi-fi prototype with design changes.
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.
Learnings
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.