🚲 City Cycles Website Redesign - UX/UI Web

🚲 City Cycles Website Redesign - UX/UI Web


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.


Client

City Cycles


Role

UX/UI Designer & UX Researcher

🚲 City Cycles Website Redesign - UX/UI Web

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.


Client

City Cycles


Role

UX/UI Designer & UX Researcher


User Flow Optimization

Information Architecture

Customer Experience

User Flow Optimization

Information Architecture

Customer Experience

🚲 The Wheels Weren't Turning.

🏙️ The Bicycle Rental Process Was Broken

Project Type:


Conceptual UX Redesign (based on secondary research)
Goal: Improve online reservation flow for a fictional bike rental service


  1. +25% rental completion rate

  2. -20% user drop-off

  3. Fewer in-store traffic spikes

  4. Improved staff satisfaction with smoother handoff


🚲 Projected Impact

“If we don’t fix this soon, we risk losing loyal riders to competitors.” — Scott, City Cycles Operations Manager

🧩 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.


Challenges Identified:


  1. Confusing, email-based reservation flow

  2. Lack of confirmation feedback

  3. No calendar view for bike availability

  4. Inconsistent mobile experience


The Original Site Design

Not much pizzazz and some unclear labeling made this site tough to use.

Early Draft

A very rough draft from a previous version of my design.

🚲 Early Research.

“It makes no sense to have both options here if you’ll just be choosing both anyway.”


— Natasha, Cycling Enthusiast

🧠 Digging Into The Details

Though this was a conceptual project, I mirrored real-world processes using secondary research, competitive analysis, and interviews.


What I Did:


  1. Reviewed leading mobility platforms (Lime, Spin, CitiBike).

  2. Identified UX patterns for quick checkout and confirmation.

  3. Synthesized secondary data on micro-mobility user behavior.


What I Found:


  1. Riders range from commuters to families and competitive cyclists.

  2. Booking preferences differ: some prioritize bike type, others rental date.

  3. All expect speed, clarity, and flexibility.


Card Sorting

Here is where I laid out some cards to see where the site setup was and where I could make some improvements.

Focusing On The User Needs

In order to put myself in the mindset of the user, I also laid out some of the wants and needs of the user so that I could brainstorm some ways to address the demand.

🎯 Realizing What's Wrong

Problem Statement:


Users need a simple, modern, and reliable way to reserve bikes online without relying on outdated email workflows.


Design Goals:


  1. Streamline the reservation flow

  2. Provide immediate confirmation

3. Support multiple user types (commuters, families, athletes)

4. Ensure responsive, accessible design

“It makes no sense to have both options here if you’ll just be choosing both anyway.”


— Natasha, Cycling Enthusiast

🚲 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

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.



Affinity Diagram


Some users had specific needs for their bikes that we needed to address. Such as:


1. Families with kids


2. Competitive cyclists


3. People navigating densely packed metro areas

Matrix Method

This is one of the ways I settled on the overall design for the website. Some ideas were more fun than practical.

🚲 What I Worked Out In The End.

💻 How We Got The Wheels Turning Again

The redesigned interface focuses on clarity, confirmation, and control.


Key Features:


  1. One-click reservation with instant confirmation

  2. Real-time availability calendar

  3. Progressive disclosure for details (duration, extras, etc.)

for all devices

  1. Accessible design (WCAG-compliant color contrast, keyboard navigation)


Quantitative Results:


  1. +25% rental completion rate

  2. -20% user drop-off

  3. Fewer in-store traffic spikes

  4. Improved staff satisfaction with smoother handoff


Qualitative Results:


“Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals.”

— Chelsea, Store Associate


The redesigned interface focuses on clarity, confirmation, and control.


Key Features:


  1. One-click reservation with instant confirmation

  2. Real-time availability calendar

  3. Progressive disclosure for details (duration, extras, etc.)

for all devices

  1. Accessible design (WCAG-compliant color contrast, keyboard navigation)


Quantitative Results:


  1. +25% rental completion rate

  2. -20% user drop-off

  3. Fewer in-store traffic spikes

  4. Improved staff satisfaction with smoother handoff


Qualitative Results:


“Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals.”

— Chelsea, Store Associate


The redesigned interface focuses on clarity, confirmation, and control.


Key Features:


  1. One-click reservation with instant confirmation

  2. Real-time availability calendar

  3. Progressive disclosure for details (duration, extras, etc.)

for all devices

  1. Accessible design (WCAG-compliant color contrast, keyboard navigation)


Quantitative Results:


  1. +25% rental completion rate

  2. -20% user drop-off

  3. Fewer in-store traffic spikes

  4. Improved staff satisfaction with smoother handoff


Qualitative Results:


“Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals.”

— Chelsea, Store Associate


Outcomes From Redesign (1)

As noted above, the redesign would help users to achieve their goal of renting a bike with less clicks and friction.

Outcomes From Redesign (2)

As noted above, the redesign would ideally increase reservations and reduce bounce on the site.

“Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals.”

— Chelsea, Store Associate

“Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals.”

— Chelsea, Store Associate

“Customers are less confused, and I can actually focus on maintenance instead of troubleshooting rentals.”

— Chelsea, Store Associate

🚲 High Fidelity Prototypes.

Checkout Page

The user lands here when their bike reservation is complete.

Bike Selector Page

Here is where the user reviews the bike and its features.

New City Cycles

This is a video of me going through the Hi-Fidelity redesign of the original site.

🚲 Conclusion.

♻️ Reflection & Next Steps

This project taught me that “I am not the user.”


I can think like one, but true design empathy requires stepping outside my own assumptions. This project taught me to employ the same method that someone in construction would use: "Measure twice, cut once". (Or, in this case, measure three times!) My idea of having multiple checkout options was a good idea to me but may have been even more confusing to the user.


I knew that the feature would still have a use, though. So instead of scrapping it entirely, I found a place for it on the homepage for the user to interact with, as needed. User feedback was a redirection, not a rejection of my ideas.


Overall, I'm thrilled with how my design turned out. I have more than a few ideas for where this can go next. Such as:


What I’d Do Next:


  1. Conduct A/B testing on “Reserve by Date” vs. “Reserve by Bike” flow.

  2. Prototype a “Buy” or “Rent-to-Own” expansion.

  3. Explore real-world usability testing and integrate user analytics.

Home Page - Top

Here is the introduction to the City Cycles site.

Right at the top users get to choose which style of bike suits their needs!

Home Page - Bottom

Toward the bottom of the page users get to see reviews, bike brands and get the option to buy a bike they love!

Thanks For Reading! 🚲

Portfolio

Related Projects

💼 Financial Database Redesign - UX/UI Web

Reduced data retrieval time by 25% and cut input errors by 20% through streamlined workflows and a cleaner, more intuitive interface for high-volume portfolio management.

View project

📱 WAHT (We Are Happy Together) :

IRL Connection App - UX/UI Mobile

How I transformed scattered social habits into intentional in-person connections through simplified discovery, interest-aligned events, and behavior-based nudges for shy or inconsistent users.

View project