Project
Overview
City Cycles is a favorite bike rental shop for locals and tourists in the city of Riverside. The company asked me to join the team to design a more user-friendly online rental process.
Roles
- UI Design
- UX Design
Deliverables
- Data Analysis
- User Persona
- Journey Map
- Wireframes
- Prototype
- User Testing
- Exported Assets
Goals
- Solutions for Pain Points
- Intuitive Checkout
- Readable UI
Problem
City Cycles found that usage of the online bike rental process has been declining for the last year. Initial user interviews revealed many pain points throughout the process. My job was to analyze web analytics to create a user persona, journey map, site map, and a user-tested Figma prototype. I worked directly with the client as well as their data researcher. The goal for this website was to direct customers to rent bikes online rather than calling or showing up in-person.
How can we make City Cycles’ online rental process more usable than calling or going into the store?
Approach
Google Analytics
Analytics revealed that almost half of users don’t even begin the rental process when they land on the homepage. This 80% drop-off rate demonstrates that very few users complete their reservation. And because there are so few users returning to the website, it can be inferred that they decided to call or go to City Cycles to process their rental.
Heat Mapping and User Interviews
Heat mapping revealed that 75% of users paused their mouse over the navigation menu, relied heavily on the search bar, and the phone number link saw the highest traffic. This was congruent with initial user interviews where customers said they felt more comfortable reserving over the phone. And although they liked the layout of the website, they were frustrated and confused by the reservation process and whether or not their reservation was complete. Using a word cloud, I could visualize the language used in interviews to see that customers we “annoyed” and “frustrated,” potentially pushing them to call City Cycles for their rental needs.
User Persona
Using these analytics and transcripts of user interviews, I was able to create the persona of someone who loves to bike and be outside. She is a city local who would be interested in renting from City Cycles regularly.
Journey Map
With user interviews and Linda in mind, I could then create a journey map of the pain points users experience as they are trying to rent a bike online. It was evident that users became more and more demoralized with each unhelpful click they made, resulting in calling the City Cycles store frustrated and annoyed.”.
Site Map
To avoid those feelings of frustration, I created a site map that allowed the user to go easily from the Homepage to Rentals, ending with a clear reservation confirmation page.
A/B Split Testing
To start the rental process on the original City Cycles website, there was a black button at the bottom of the page labeled “Online Call Ahead”. This control was tested against a variation with a bright blue button in the navigation bar labeled “Reserve”. Over 3 weeks testing 1,500 visitors, the control conversion rate came out to be 7.68% while the variation conversion rate came out to be 44.78%, making it clear the the variation yielded better conversion to the rental process than the original homepage.
A/B split testing revealed that users were far more likely to continue from the homepage to reserving a bike when the reservation button was moved to the main navigation bar, was a bright blue color, and labeled”Reserve”.
Wireframes
With all of this information, I was able to create a paper wireframe and lo-fi prototype that included:
Lo-Fi Prototype
Results
User Testing
I completed two rounds of user testing to ensure the site was as user friendly as possible. Within that testing it was clear that users wanted:
- More distinction between each action of the rental process and where they were within in it
- The ability to edit the reservation at any point
- Indication that bike cards were clickable
- Information for after the rental to be removed
- An explanation of each bike available
Solutions
Home Page
I revamped the hero image and text scrolling to be more readable. I also added a “Reserve Now” button to make clear how to begin the rental process. I also changed one navigation tab from “Hours” to “About Us” to help users navigate the site better. I also moved the search bar to the top so it is easier to see as well as grouped with the other navigational tabs.
Choose Date and Time
I created modal cards to separate each step of the process to overlay a darkened hero image for better readability and hierarchy. On the first page that appears after clicking the “Reserve Now” button, this card appears with a date and time picker so the user knows that bikes are available on the day they choose.
Choose Your Bike
This card includes a small description of each bike so users know what is appropriate for their skill level and where they want to ride. It also includes a hover drop shadow feature so they know they can click the card to select the bike. This, along with a quantity counter, allows users to rent different bikes for a group of people in one reservation process.
Order Summary
I included a progress tracker so the user is clear that they only have one last step before having their rental confirmed. I also added an ability to edit your bike selection and/or time and date. The user also has the ability to go back to the previous card using the “Back Button.” This way, the user feels like they know exactly where they are and how to move within the rental process.
Confirmation Page
The confirmation page gives the user a sense of security that their reservation went through. Indicating that details will be sent to the email lets the user not feel overwhelmed in the moment with too much information about the day of their rental. If at this point, the user still would like to call the shop, the phone number and email are available on this page.
Challenges
Working with City Cycles was great practice in staying within scope. Although their rental process was the most pressing matter, there were many aspects of the site that could have been improved. Their information was a bit messy and could have a lot of potential. However, there was only so much money and time City Cycles wanted to spend on their website. By focusing solely on the online rental process, I fully accomplished the goals of my client.
