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.
Usability Testing Success Rate
66%
Item #1:
Where to Reserve
66% of users clicked one of the two ‘reserve’ buttons on the top of the homepage (100% of that group clicked the CTA ‘reserve now’ button).
The user who did not, stated, “At first, I would look at Bikes and Rides… but that doesn’t do anything, so next I would click on the ‘Reserve’ button.”
100%
Item #2:
Rent a Bike
When given the task of reserving a specific bike with specific reservation parameters, 100% of users were able to complete the task.
33%
Item #3:
Bike Size
When asked about finding the bike size chart, only 33% of users were successful in clicking on the ‘?’ icon in the ‘select bike’ step of the reservation system.
The other 66% got stuck. Of the group that got stuck - half didn’t know how to proceed and gave up on the task. The other half clicked around until they discovered it, but stated, “It looks like if I click this question mark it gives me a size chart. But that was really confusing. I wouldn’t have thought to click the question mark to find that.”
66%
Item #4:
Remove/Change
Bike Selection
2 of 3 users were successful in clicking the ‘X’ button to delete the bike from their cart.
1 of the 3 users skipped the ‘X’ button and just selected the ‘back button’.
Next Steps
Based on the usability test feedback, some design choices presented users with challenges, so I implemented the following changes:
Updated Prototype
Click the button below to view City Cycles online reservation system prototype v.2.
Lessons Learned
Takeaways
Last but not least, I presented my findings and recommendations to the stakeholders in the project through a slide presentation over Zoom.
Throughout this UX/UI design project, one of the key lessons learned was the critical importance of establishing a clear project scope from the outset. Defining the boundaries and objectives of the project upfront helped to align stakeholders' expectations and maintain focus on the primary goals.
However, as the project progressed, there were instances where stakeholders wanted to introduce additional features or elements that fell outside the agreed-upon scope (what if we added a live feed of the bike shop so users can see what’s happening in real-time?!). These requests, while often well-intentioned, posed challenges to the project timeline, budget, and overall vision.
It became evident that effective communication and reiterating the Main Goal of the project were essential to address these scope creep tendencies.
By reaffirming the initial project scope and facilitating transparent discussions about any proposed changes, I was able to keep stakeholders aligned and maintain momentum toward achieving our objectives.
Ultimately, this experience underscored the importance of not only defining a project scope but also actively managing it throughout the project lifecycle to ensure successful outcomes. For future projects, I plan on creating a header that lists the main goal of the project and including that in all correspondence and presentations.
