%20(Copy)_.png)
City Cycles
Tools used: Figma and InVision
A research and design project to improve the user experience for customers of a bike rental shop.
THE PROBLEM
City Cycles wanted customers to use the online reservation tool to reserve bikes, however, customers were calling to reserve bikes instead because they found the online reservation tool frustrating. Users were complaining that the site was “frustrating” and "confusing" to use and they felt “misled.”
THE OBJECTIVE
Create an online reservation tool that is less confusing and that customers enjoy to urge them to make reservations online instead of calling City Cycles.
BEFORE
This is what the homepage of the original site looked like. You can also view the original City Cycles site here!
AFTER
%20(Copy)_.png)
Here is where you can view the interactive prototype I created using InVision from these wireframes!
MY ROLE
For this project, I acted as both a UX Researcher and UX Designer.
My role in this project involved improving the user experience (UX) of the existing City Cycles website. Throughout this UX project, my job included completing the following tasks:
-
Ideating solutions for the users’ problem or pain point.
-
Produce wireframes and mockups of the selected solution.
-
Put together an interactive prototype of the solution.
-
Conduct a usability test with the prototype.
-
Revise and refine prototype based on feedback provided by the user during the usability test
UNDERSTANDING THE USER
My approach to this UX project started by taking the following steps:
1. Collecting, analyzing and interpreting research data to pinpoint users’ problems and devise proper solutions that users will enjoy
2. Creating a journey map of data collected from user interviews to understand areas where users encounter a frustrating experience on the City Cycles website
3. Creating a user persona to understand the customer base of City Cycles
The data collection methods used for this project were: User Interviews, User Analytics, and Heat Maps. Below is some data that was collected:
During user interviews:
​
-
Users said they were “struggling” to find what they needed.
-
Users said the website was “unclear.”
-
Users were relying heavily on the search bar to navigate the site.
-
They were “frustrated” and “confused” by the online reservation process
Analytics data showed:
Analytics data showed that the number of bike rentals decreased by over 50% over the past year. Most users described their experience with the City Cycles site as: annoying, frustrating, and confusing. They struggled to understand how to navigate the site and place a reservation and felt that the site was unclear. We also noticed that users seemed to heavily rely on the search bar to navigate the site.
This site shows that 82% of the City Cycles site users are new users. This implies that once users experience the site, the majority of them do not return to the site.
Data from Click-Tracking Heatmaps showed:​
​
-
75% of users pause their mouse over the portion of the page that contains the navigation menu.
-
89% of users click the City Cycles logo, and 80% click the search bar.
-
60% of users click the menu links to navigate the site.
-
Only 25% of users scrolled down to view content at the bottom of longer pages, like the Blog or About Us page.
I used the collected data to create a Journey Map and User Persona to get a clearer picture of the users I would be redesigning the City Cycles site for.
Moving from data to design...
After interpreting and visualizing the data, I began the process of designing an efficient reservation tool for City Cycles. The process is explained in more detail below.
BREAKING DOWN THE PROCESS
After analyzing and interpreting the data to better understand City Cycle's users, I started ideating ideas to improve the City Cycles bike reservation experience.
First, I created a userflow to determine what screens needed to be included in my design. Once I had an idea of what screens needed to be designed, I started ideating. I started the ideation process using the Matrix Method. Once I completed my matrix, I used a "Now Wow How" Matrix to determine which ideas should be implemented and which ones should be considered at a later time. I took this step to ensure that the solutions that were implemented would effectively address the users' pain points and to help me respect the client's requested timeframe for completion.​
Userflow
Matrix Method Ideation
Now Wow How Matrix
Low-Fi Wireframes
Once I decided which ideas to implement, I created low-fidelity wireframes to solidify the designs of the pages for the new reservation process.
Based off my paper prototype, I created a high-fidelity wireframe using Figma, and an interactive digital prototype of my proposed solution. After performing a usability test on my prototype, I received the following feedback:
The user felt that the elements on the page seemed somewhat large and because of this, they felt that there was too much scrolling needed to view the full page. They described it as annoying. Because of this, I decreased the size of multiple page elements. However, when it came to the reservation process, the user said the experience was comfortable and they felt confident that their reservation was placed and completed. This feedback showed that the problem at hand was solved.
​
I made the necessary adjustments to my mockups and prototype based off of the feedback from my usability test to form the final mock ups shown below.
Final Product Mock-ups
%20(Copy)_.png)
TITLE OF THE CALLOUT BLOCK
LESSONS LEARNED
With this project being my first UX Research and Design Case Study, I gained valuable insight of this process.
The biggest challenge or obstacle I faced during this UX project was having to prioritize and put off certain improvements for the City Cycles website in order to maintain the scope of the project and not go over time and budget constraints.
The lessons I learned from this UX project included how to analyze and interpret data collected from users to establish an MVP for the project and then use the data to implement improvements on the client’s website while also staying within the scope of the project. I also learned that there is always room for improvement even after completing a prototype.