City Cycles’ Bike Reservation Process

UX/UI, web design


City Cycles, a fictional bike rental store, wanted to improve the online bike reservation process to be easier and more efficient, thus increasing the number of online bike reservations. 

Project Type: Personal
Role: User interview, usability testing, wireframing, prototyping, visual design

The Challenges

City Cycles’ online bike reservation process was confusing and frustrating to the users because the information and navigation were misleading.

As a result, the users could not complete booking bike rentals on the website. This led to fewer bikes rented via websites. 

The Goal

The primary goal is to improve the online reservation process to increase online bike rentals.


1. Emphasize

Key Findings

  • 80% of users don’t complete the reservation process and leave the site
  • Data also shows that the link to the phone number to be the link with the highest traffic. 
  • The interview revealed that users seem generally frustrated when using the online reservation system. Some users always call to reserve because it’s the only real way you know you have a reservation.


We have the belief that the current online reservation system is too frustrating, confusing, and misleading for the user to complete the reservation after analyzing the data provided. Also, it is inconvenient that the users cannot complete the booking bike online process alone, and they have to contact the store as a part of their reservation process.

2. Define

User Persona

Defining the Users: Understanding the Why with User Research

Based on the data collected from the user survey provided, I had a clear understanding of my target user and created a persona to empathize with their pain points, and brainstorm better ways to help solve common problems.

User Journey Mapping

After a few user interviews were conducted, the journey map was created to illustrate the user’s steps, touchpoints, and pain points with the existing website.

3. Ideate

Potential Solutions

  • Improved the overall information architecture of the website to avoid any confusion with where to go to rent a bike.
  • Make the “Reserve Bike” button stand out and place where it’s prominent and easy to find.
  • Let users complete booking a bike online and get the confirmation without contacting the store.
  • Build the reservation process that is intuitive and easy to follow.
    • It shows the available bike options after a user selects the date.
    • Show the number of steps that are included to complete the reservation.

User Flow

A user flow was created to understand how a user would navigate through the online reservation process of booking a bike online. My main focus was to improve the user flow of the reservation process and make it intuitive and easy to follow.

Sketches and Wireframes

Based on the user flow, I designed a new user interface by starting with sketching out design ideas and wireframes before moving on to creating paper and digital prototypes.

4. Prototype

Paper Prototype

After a few paper wireframes were created, the paper prototypes were created and tested before moving on to the hi-fidelity prototype.

5. Test

Usability Testing

The user feedback I received for the prototype was positive, stating that finding the reservation button was easy and the new online reservation process was easy to follow, straightforward, and intuitive. It was frustration-free because the users were able to complete reserving bikes online and got the confirmation.

Next Steps

Based on the user testing, the implemented solutions were validated that they have solved the user’s problems with the online reservation process. Ideating potential solutions based on the collected data and the user flow was essential. Continuing the UI improvements and additional user testing to identify any potential new features would be the next steps to take to further improve the reservation process.