City Cycles' online reservation system caused confusion and frustration, leading users to abandon the digital process and return to in-store bookings. My goal was to redesign a responsive, intuitive interface that reestablished user trust, simplified the booking flow, and boosted overall engagement.
The Wheels Weren't Turning.
The Bicycle Rental Process Was Broken
Project Type:
Conceptual UX Redesign (based on secondary research).
A bicycle rental company called City Cycles had a problem. Their website was having more turnover and was converting less people during checkout. After reviewing the process of checking out from the user's perspective, it was revealed that the process was not clear. I dug into the details to determine the reason and resolve the problem for City Cycles.
The City Wasn't Cycling The Same
City Cycles' digital reservation process was outdated and confusing. Users were forced to email the store to book bikes, leading to a 40% drop in online reservations and a spike in in-store queues.
The Original Site Design
Not much pizzazz — inconsistent labeling made the reservation flow harder to follow than it needed to be.
Early Draft
A very rough first pass exploring how the previous version's flow could be restructured.
Digging Into The Details
Though this was a conceptual project, I grounded the process using secondary research and interviews.
🔍 What I Did
Competitive Review
Reviewed leading mobility platforms (Lime, Spin, Citi Bike).
UX Pattern Analysis
Identified UX patterns for quick checkout and confirmation — fast checkout flows, real-time availability, immediate confirmation feedback.
Secondary Research Synthesis
Synthesized secondary data on micro-mobility user behavior.
💡 What I Found
Diverse Rider Types
Riders range from commuters to families and competitive cyclists.
Split Booking Preferences
Bike-first users — "I want that specific model." Date-first users — "What's available on Saturday?" One path doesn't serve everyone.
Universal Expectations
Regardless of rider type, users expect speed, clarity, and flexible booking options — anything that feels indirect breaks trust immediately.
Card Sorting
Here is where I could see where the mental model of features made sense — and where it didn't.
Focusing On The User Needs
In order to put the user first, I also laid out the needs of the user and identified some ways to address them.
Realizing What Riders Actually Needed
Users need a simple, modern, and reliable way to reserve bikes online without relying on outdated email workflows.
- Streamline the reservation flow
- Provide immediate confirmation
- Support multiple user types (commuters, families, athletes)
- Ensure responsive, accessible design
Early Research.
Considering What Comes Next
My initial idea was to give users two paths to reserve a bike (as seen in the sketch to the right): Choose by Bike Type and Choose by Date Needed.
Users found this redundant and confusing. Based on feedback, I simplified the flow to focus on choosing a bike first, then setting dates and details within that process.
Lo-Fi Sketch
My lo-fi sketch of a two path flow.
Card Sorting
Users had spent time looking for their bikes and prices — persona groups included families with kids and competitive cyclists.
Prioritizing Website Features
One of the ways I laid out priorities on the overall website — some features tested as more fun than practical for riders navigating packed areas.
What I Worked Out In The End.
How We Got There
The redesigned interface prioritized clarity and control.
Key Features:
- One-click reservation with instant confirmation
- Real-time availability calendar
- Progressive disclosure for details (duration, extras, etc.) across all devices
- Accessible design — WCAG-compliant color contrast, keyboard navigation
"Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals." — Chelsea, Store Associate
Outcomes From Redesign
Projected metrics showing how the redesign would ideally improve usability, satisfaction, business impact, and customer retention.
High Fidelity Prototypes.
Prototype Screens
Checkout Page
The user lands here after confirming their bike reservation.
Bike Selector Page
Here is where the user selects the bike and its options.
New City Cycles — through the hi-fidelity redesign of the original site, the booking experience became something riders could trust.
Conclusion.
Reflection & Next Steps
This project taught me that "I am not the user."
I can think like one, but true design requires stepping outside my own assumptions. This required me to employ the same method that carpenters in construction would use: "Measure twice, cut once." In this case, measure three times — having multiple checkout options was a good idea in theory, but became even more confusing to the user in practice.
I knew that the feature would need cutting, so instead of scrapping it entirely, I moved it to the homepage for users to interact with when they wanted to. The feedback was a redirection, not a rejection.
Overall, I'm thrilled with how much feedback shaped this project, and it left me with more than a few ideas for where to go next.
Home Page — Top
Here is the introduction. Right at the top, users can choose which style of bike fits them best.
Home Page — Bottom
Toward the bottom, users get to see reviews and get the option to browse more of the fleet.
