UX/UI Designer
City Cycles
Online Reservation System
.png)
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
-
Timeline: 6 months
-
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!
Empathize
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.
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.
.png)
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.
​
Click the photo to zoom in and take a closer look!
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:
I believe this would increase online reservations by 80%, ending in a completed online reservation, and reducing the amount of phone reservations.
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.
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
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
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.