City Cycles
Executive Summary
City Cycles is a conceptual UX case study focused on redesigning a bike rental website to streamline the online booking experience. Research revealed friction points at:
- Navigation
- Opaque pricing
- Reservation booking flow
Through a process of user interviews, journey mapping, and iterative wireframing, I developed an intuitive interface designed to align with user mental models. The final solution simplifies the path to purchase and ensures a seamless, accessible booking experience.
Introduction
Introduction
I led the end-to-end UX process, from initial research and information architecture to high-fidelity prototyping and usability testing.
The Constraint: To maintain brand consistency, I focused on structural optimization and functional usability rather than a visual overhaul, leveraging the client's existing imagery and brand assets.
My Role: Lead UX Designer
My Responsibilities: Identify issues and design/test solutions to validate effectiveness.
Tools Used:
I led the end-to-end UX process, from initial research and information architecture to high-fidelity prototyping and usability testing.
The Constraint: To maintain brand consistency, I focused on structural optimization and functional usability rather than a visual overhaul, leveraging the client's existing imagery and brand assets.
My Role: Lead UX Designer
My Responsibilities: Identify issues and design/test solutions to validate effectiveness.
Tools Used:
- Figma
- User Interviews (In person and over video)
- Google Analytics
About City Cycles
City Cycles is a conceptual local bike rental company. The website serves as their primary tool for communicating offerings and managing online reservations.
The Data
While the project is conceptual, the insights are driven by real-world data. I conducted user interviews and analyzed existing Google Analytics to identify authentic friction points, ensuring the redesign addresses actual user behaviors rather than assumptions.
The Problem
The current experience lacks a clear information hierarchy, causing significant confusion during the booking journey. Inconsistent calls to action (CTAs) further hinder user conversion.
The Challenge
Modernize the user experience and streamline the booking flow while preserving the established brand identity and existing imagery.
Project Goals
City Cycles wanted to retain their general design and branding, but resolve the issues with their online booking system and reduce confusion about navigating their website, hopefully leading to:
%
Increase in online bookings within the following 6 months.
Complaints about confusion in the booking process (validated by user testing)
Discovery & Research
My Initial Hypothesis
I identified four primary barriers to conversion:
- Low Hero Readability: High visual noise obscuring key messaging.
- Hidden CTA: The primary action was "buried" below the fold on multiple screen sizes.
- Misleading Navigation
- Opaque Booking Flow: A four-step process that lacked a clear success state.
Validation & Insights
To move beyond assumptions, I analyzed Google Analytics and conducted user interviews to pinpoint why customers abandoned the online system.
- The "Discovery" Gap: Analytics confirmed the CTA was physically cropped on many devices, leaving users unaware the online booking even existed.
- The "Trust" Gap: Qualitative interviews revealed that the 4-click flow felt "unreliable," as users never received clear confirmation of a successful reservation.
I conducted user interviews to identify specific friction points, and attempt to understand why they were frustrating the users. This gave me an intimate understanding of where clients felt lead astray.
-
Participant Information
User Research & Interviews I conducted moderated walkthroughs with four participants to evaluate the end-to-end reservation process. Using a "think-aloud" protocol, I captured real-time cognitive load and emotional friction points.
A Note on Sample Size: While the industry standard for usability testing is typically five participants to identify the majority of usability issues, the consistent patterns observed across these four sessions provided a statistically significant foundation for the redesign.
-
User Interview Prompt
For the purposes of this study, you are a potential client looking to rent a bike online so you can commute the city. Please know that we are not testing you, we are testing this software, so rest assured that there is nothing you can do or say that is wrong. Your feedback is extremely helpful to me, so as you proceed through the study, share as many of your thoughts and feelings as possible - even if they seem irrelevant. You may have questions throughout the process that I cannot answer, and just know that I will probably respond to your questions with additional questions. At the end of the study, we will discuss your questions.
Key Findings
Users found each step of the online reservation process more confusing than the previous step:
- Difficulty reading the hero text over bike background image
- Confusing call to action text: Online Call Ahead - Users thought they would be calling the shop
- Mostly empty “Make A Reservation” page - no real purpose, but is the /contact/ page
- Confusion about the “Book A Reservation” page being mostly policies
- False hope with broken final call to action
The research validated parts of my hypothesis but revealed a more systemic issue: A lack of system feedback. While 100% of participants successfully completed the task, 0% felt certain they had actually reserved a bike. The users’ primary goal was simple: "Just let me rent the bike." However, the overly complex flow and lack of clear confirmation states created a "False Failure" perception.
The Directive: Simplify the path to completion and provide immediate, high-visibility confirmation at every milestone.
The Directive: Simplify the path to completion and provide immediate, high-visibility confirmation at every milestone.
User Persona: Leah
Synthesizing my research led to the creation of "Leah," representing a younger, tech-savvy demographic that prioritizes convenience.
The Strategic Pivot
Developing this persona revealed a key opportunity: City Cycles’ audience is digitally native. Their reluctance to use the current system wasn't due to a lack of technical ability, but rather a lack of efficient tools. This shifted my focus toward building a high-speed, convenience-first booking experience that rewards their digital competence rather than slowing them down.
Ideation
To bridge the gap between business needs and user expectations, I framed my design process around three "How Might We" (HMW) statements:
How might we clarify the booking entry point?
How might we deliver essential reservation details without interrupting the booking flow?
How Might We make user's Certain They're Making The Correct Actions?
To start answering the first and third questions, I designed an ideal user journey that omitted major confusion points.
Information Architecture
To reduce cognitive load, I decoupled logistical policies from the active booking flow.
General Info: I consolidated high-level policies and "About" content into a dedicated section for easy reference.
Contextual Info: I integrated task-specific data—such as tiered pricing and bike specifications—directly into the relevant booking steps.
General Info: I consolidated high-level policies and "About" content into a dedicated section for easy reference.
Contextual Info: I integrated task-specific data—such as tiered pricing and bike specifications—directly into the relevant booking steps.
The Sitemap Overhaul
The improved user journey required a foundational sitemap redesign. I transitioned from a fragmented structure to one that follows standard mental models, organizing content by logical topics to ensure intuitive navigation.
From here, I started to brainstorm potential visual elements that would represent these ideas in a ui using the matrix method. I chose features that would clarify the user throughout their journey:
- Accessible Progress Tracker: to provide clear system status and reduce "completion anxiety."
- Calendar With Selectable Dates: to simplify date selection with real-time availability.
- Supporting Information For Building City Cycle's' Credibility
I developed low-fidelity mockups mapping each phase of the booking process. Adopting a mobile-first approach, I prioritized the small-screen experience to align with Google Analytics data, which identified mobile devices as the primary entry point for City Cycles’ customers.
I have included my reasoning and decision making in my mid-fidelity mobile prototype because it is much easier to read than my chicken scratch. Please enjoy below.
Finally, I created a high-fidelity version of a mobile view of the website before moving onto testing the effectiveness of my solution through user testing.
Here is the new homepage hero area. I’ve sharpened the CTA and updated the link styling to meet WCAG accessibility standards by adding non-color visual signifiers. Since the full prototype spans several pages, you can view the complete flow via the link below.
Validation User Testing
To validate the effectiveness of my prototype, I organized another round of user interviews, but this time with a few additional users.
I provided test subjects with the same prompt as before
I provided test subjects with the same prompt as before
-
User Interview Prompt
For the purposes of this study, you are a potential client looking to rent a bike online so you can commute the city. Please know that we are not testing you, we are testing this software, so rest assured that there is nothing you can do or say that is wrong. Your feedback is extremely helpful to me, so as you proceed through the study, share as many of your thoughts and feelings as possible - even if they seem irrelevant. You may have questions throughout the process that I cannot answer, and just know that I will probably respond to your questions with additional questions. At the end of the study, we will discuss your questions.
Iteration I
The first round of user testing was a success, which consisted of 3 users who tested exclusively on mobile phones. Users delighted in the new layout, and were able to walk through the booking system without no additional guidance. However, one user made a powerful recommendation: make the pricing of the bike clear before reaching the checkout page, and one of the other participants highlighted minor flaws in the design regarding spacing.
Iteration II
For the second iteration, I adjusted the “popularity” callouts in the bike slider to reflect the pricing instead of the demand point. I also did the following:
- Added the capacity for interactive forms (to the degree that my figma subscription would allow me) for advanced prototyping.
- Moved the bike descriptions into the cards for a better visual hierarchy
- Fixed a couple errors with the interactive slider
- Added a link to edit/modify the reservation on the reservation confirmation page
At this point, I was running out of free and willing research participants, and had to re-use a subjects from my preliminary research, totalling in 3 participants for this iteration. I recognize that this may contaminate results, but given the success of the first iteration, I am confident in my results. All in all, users were happy and able to book rentals without issue.
Results
The final solution improved the clarity and usability of the City Cycles booking experience. By restructuring the reservation flow, surfacing important information earlier, and aligning the interface more closely with user expectations, the redesign created a more intuitive path to booking.
Validated Outcomes
Usability testing showed that users could complete the updated flow without the confusion that appeared in earlier stages of the project. Changes to content hierarchy, navigation, and pricing visibility helped make the experience easier to understand and more efficient to move through.
Business Outcome Note
Because City Cycles was a conceptual client, long-term business impact, such as increased online reservations, could not be officially measured. Even so, the final testing confirmed that the redesigned experience resolved key usability issues and better supported the goals of the project.
What I Learned
This project reminded me how crucial it is to validate assumptions through real user feedback. Even though I entered the project with a clear hypothesis, watching users interact with the flow revealed gaps I never would’ve caught on my own. It reinforced that user expectations—and the emotions behind them—matter just as much as UI clarity.
I also learned the impact of small, thoughtful improvements. Simple changes like clearer CTAs or surfacing pricing earlier dramatically increased user confidence. Finally, this project strengthened my appreciation for iterative testing. Sharing early ideas, even rough ones, led to better decisions and a more intuitive final design.
I also learned the impact of small, thoughtful improvements. Simple changes like clearer CTAs or surfacing pricing earlier dramatically increased user confidence. Finally, this project strengthened my appreciation for iterative testing. Sharing early ideas, even rough ones, led to better decisions and a more intuitive final design.