top of page

City Cycles

Online Reservation System

Laptop mockup of City Cycles new homepage

Who is City Cycles?

City Cycles is a bike rental company, located in downtown Riverside. They have recently experienced a decrease in online reservations on their website.

Problem

City Cycles wants to increase the number of users booking bicycle reservations through their existing website. Users currently prefer to book via phone or in person. This is less convenient for patrons trying to book bike rentals, and all the extra phone calls and in-person visits are making it difficult for City Cycles to take care of their customers.

How might we get more customers to rent bikes on the City Cycles website?

Solution

This project focused on user research to ultimately discover why users weren’t booking their reservations online. Then through data analysis, I designed an effective and easy-to-use online reservation system for their website.

Project Scope

  • Key takeaways and project recommendations, based on user research

  • Website redesign with a high-fidelity, interactive prototype

  • Client/Stakeholder presentation with recommended next steps

My Role

  • UX design

  • UX research

  • UI design

  • Interview facilitator

  • Client contact

Tools

  • Adobe Photoshop

  • Figma

  • Google Forms

  • Zoom

Design Thinking Process

A happy user makes a repeat user!

I used a user-centric, design-thinking process to ensure the end-users' pain points of the online reservation system were discovered and addressed. I also guaranteed that their needs were taken into account every step of the way.

Click the numbers below to jump to different steps in the process!

Empathise

Empathise

Meet the User, Be the User

Why exactly are people opting NOT to rent online?

To ultimately solve the users’ pain points with the site, I conducted user research to determine what those pain points were in the first place.

Quantitative Data - Website Analytics

The following quantitative data was collected from City Cycles website analytics, showcasing the steady decrease in online reservations over the course of the year. Clearly, something is turning users off during the online reservation process.

Graph showing a decrease in online reservations on the website over the course of 12 months
Graph showing responses to the question: "On a scale of 1 to 5 (1 being 'never again' and 5 being 'definitely would') how likely are you to reserve a bike online with City Cycles again?

Quantitative Data - User Survey

Before user interviews, I built and issued a survey in Google Forms to a larger pool of users, to capture a larger sample size.

 

When asked how likely they were to return to the City Cycles website to rent a bike online, the majority of users overwhelmingly chose the option, 'Never Again'. 

User Survey - Key Takeaways

  • The reservation process took much longer than users anticipated.

  • The site was confusing and hard to use.

  • No clear instructions on how to reserve a bike.

  • It left users feeling frustrated.

Survey Responses - City Cycles

A sample of user survey responses

Qualitative Data - User Personas

I created the following user personas for City Cycles, so they can better understand their customers' needs and experiences. Based on survey feedback, I incorporated users' major pain points including:

  • not being able to make a confirmed reservation online

  • not being able to rent bikes for more than one day at a time

Qualitative Data - User Journey Map

The main emotions that kept appearing in users' survey answers were frustration and confusion. I mapped out a user journey to highlight the user’s experiences and what caused those emotions and thoughts.

Define

Define

What are the main pain points?
And how can we fix them?

User Pain Points

After interpreting the research data, I began to see that the users’ pain points fell into 3 categories:

Website Flow

  • Where to go to rent is not obvious and immediate.

  • Users must click through three pages to get where they want to go for reserving.

  • Reserve link was at the bottom of the page - hard to find.

Website Look

  • Website look is cluttered and overwhelming, making the site hard to view and navigate.

  • The wording of the reserve buttons/links is confusing.

Reservation Process

  • Instead of actually being able to reserve online, the reserve link prompts users to write an email to request a bike - not a true reservation.

  • There is no confirmation after an email is sent. 

  • Users are clicking the phone number link because they feel it’s the only way to know you have a real reservation.

Proposed Solutions

I have the belief that the following will be helpful to users who get frustrated and abandon the reservation page, and click the phone number link instead:

#1 - Simplifying the sitemap and overall design
#2 - receiving a real-time confirmed reservation via an online reservation system

I believe this would increase online reservations by 80%, ending in a completed online reservation, and reducing the amount of phone reservations.

Ideate

Ideate

Get the creative and
problem-solving juices flowing.

Website Flow - Sitemap

Before getting into the look of the site, I needed to address its flow. One of the main pain points was that many users found the site confusing to navigate. In trying to get to the reserve page, there are a lot of unnecessary steps.

My first step in the redesign was to condense content and delete unnecessary pages. Below is the new flow on the redesigned, simplified sitemap.

Website Look - Wireframes

The main goal for the website redesign was to make it easy and intuitive to use, so that means - simplify, simplify, simplify! I reduced the LARGE amounts of copy, and divided content into sections with easy-to-navigate headers.

I started with hand-drawn wireframes as the base.

Wireframes for City Cycles website

Website Look - High-Fidelity Mock-ups

My favorite part! I love starting to see it all come together.

Homepage:

Reservation System

On the original site, many users felt misled by the fact that the site said they could ‘reserve online’, when in fact they couldn't make an actual, confirmed reservation - it was just an opportunity to email the shop and request a reservation.

These scrollable mockups of the reservation process highlight the new features, which ensures guests can pick their: date, time, duration (hooray for multi-day reservations!), bike type & size, input their credit card payment, and receive a confirmation message for their reservation.

Scroll the device to view more!

Scroll the devices to view more!

Prototype

Prototype

Bring it to life!

Prototype

Using Figma, I brought the design to life by building an interactive prototype. This prototype focused on the bike reservation process.

Click the button below to view the new City Cycles online reservation system prototype.

Scroll the device to view more!

Test

Test

The data doesn't lie.

Usability Testing

After the prototype was constructed, I conducted a usability test with 3 users. The format was a one-on-one, in-person interview where I acted as moderator. I introduced the users to the City Cycles site and assigned them a few tasks.

The purpose was to verify if users understood how to use all aspects of the online reservation system.