Project
City Cycles is a bike rental shop in the city of Riverside in need of a website re-design to eliminate pain points in their bike rental process
Roles
- UI Design
- UX Design
Deliverables
- Data Analysis
- User Persona
- Journey Map
- User Flow
- Wireframes
- Prototype
- User Testing
- Exported Assets
Goals
- Solutions for Pain Points
- Intuitive Checkout
- Increase Online Rentals by 20%
- Decrease Time Spent in Store
Problem
Online bike rentals are low due to confusing navigation and a reserve-by email process. Analytics and interviews with users and employees revealed:
- High bounce rate from homepage
- High drop-off rate during the reservation
- Few returning visitors to the site
- High use of search bar
- CTA was hard to find
- Users found the booking process frustrating
- Employees were overwhelmed with in-store and call-ahead bookings
Solutions
I worked directly with the client as well as their data researcher. My job was to analyze web analytics, heat mapping, and user interviews done by the data researcher to create a variety of UX deliverables. These will allow me to gather information about user pain points and create a user-friendly checkout process to increase online rentals.
Approach
Google Analytics
Analytics done by the data researcher revealed that many users are not inclined to start the rental process and even less inclined to 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
- Users relied heavily on the search bar
- The phone number link saw the highest traffic
These insights told me that users were not sure where to start their reservation and preferred to call instead. This conclusion was reinforced by initial employee and user interviews. Customers said they were confused by the rental process and employees were over-run with calls and in-person rentals. I created a word cloud to represent user conversations about the online rental process.
A/B Split Testing
Based on these analytics, their data researcher conducted an A/B split test over 3 weeks and 1,500 users and found their variation to yield a higher conversion rate by:
- Changing the “Online Call Ahead” CTA to “Reserve”
- Changing the color to a bright blue
- Moving the CTA to the top navigation
User Persona
Using these analytics and transcripts of user interviews, I was able to create the persona of someone is in City Cycles primary target audience. This was helpful to empathize with the user and better understand their user journey.
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.
User Flow
Because my focus was on the rental experience, I created a Fig Jam user flow that addressed the pain points in the user journey. This user flow:
- Gives users overall information about City Cycles on the homepage, then guides them to sub pages for optimal informational architecture, yielding a more intuitive website
- Better visualizes at what moments the user could experience pain points
- Makes sure the user can start a reservation from any page
- Reduces the amount of clicks it takes to get from start to finish of the rental process
Wireframes
Based on my user flow, I created a paper wireframe to get ideas out to the client quickly to make sure I was going in a direction they approved of without getting distracted by pixel perfect designs.
Low-Fidelity Prototype
With my wireframes approved, I was able to create a low-fidelity prototype with a:
- Minimal click user flow from the homepage to rentals to reduce bounce-rate
- “Reserve” button at the top of the homepage to easily begin reservation, per A/B testing
- Payment page so users spend less time in store, putting less burden on employees
- Date & time, and bike picker for easy reservations
- White background behind the scrolling words for easier readability
- Page to confirm the reservation so the user knows when the action is complete
Results
User Interviews
I completed two rounds of user interviews to ensure the site was as user friendly as possible. I found users wanted:
- Clearer navigation, readable text, excess copy removed
- More distinction between each action of the rental process
- An indication of the bike card click-ability
- An explanation of each bike
- To be able to rent multiple bikes at once
- The ability to edit the reservation at any point
Solutions
Home Page
- Replaced the hero image and text scrolling for readability
- Added a “Reserve Now” CTA to make clear how to begin the rental process
- Changed one navigation tab from “Hours” to “About Us” for a better description of the website’s pages, so users are less reliant on the search bar
- Grouped a more visible search bar with the other navigational tabs for better informational architecture
Because early rounds of user interviews described an “annoying” and “frustrating” rental process, all of these elements make starting the reservation more user-friendly and less confusing, encouraging site visitors to start the rental process and reduce the 40% homepage bounce rate.
Choose Date and Time
- Created modal cards to separate each step of the process into their own clear action
- Made the date and time picker the first step in the process as seen on competitor sites
These changes aimed to reduce the cognitive overload users felt in the low-fidelity prototype where each booking step was on the same page along with excessive copy about day-of-rental information. Now, that information is received through an email after rental confirmation.
Choose Your Bike
- Included a hover drop shadow feature and selection border so users know how to select a bike
- Made a quantity counter because users wanted to be able to rent multiple bikes at once
- Gave a small description of each bike with its skill level and where to ride
- Included a “Back” button for reservation flexibility
These features were all requested by the users during user interviews. With more information given online, this could reduce calls into the store regarding types of bikes and skill level.
Order Summary
- Included a progress tracker so users know where they are in the process, with the intention of lowering the 80% drop off rate
- Added an ability to edit your bike selection and/or time and date, allowing users to refine their reservation and encourage them not to abandon their rental
These changes were made because users in all rounds of user interviews requested more flexibility in the rental process, which could elicit more trust in City Cycles, their website, and the completion of their rentals.
Confirmation Page
- Included a reservation confirmation page
- Added information about their next steps
- Incorporated contact information if the renter still needs assistance
- Featured a “Back to Home” button to encourage visitors to continue browsing the website
These elements gave the user a sense of security that their reservation went through and what will happen next which continues to give the user trust in the rental process. If they still have questions, City Cycles is happy to take their call, boosting the customer service experience and encouraging repeat customers.
Takeaways
- 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, but keeping business goals in mind kept me focused on the most important features.
- Conducting various types of qualitative and quantitative usability testing can give the most well-rounded view of user pain points
- Booking a product that adds to an experience should be just as easy and care-free as the experience itself.
Next Steps
To know if online rentals increased due to the website redesign, I would conduct the same tests over again such as:
- Analyze data from Google Analytics to reveal post-redesign bounce rate, drop-off rate, and returning visitors.
- Implement heat mapping to see if users are more likely to use the “Reserve Now” button as opposed to the search bar.
- Conduct user interviews to get a qualitative view on the new user journey.
I would also see if our goal of an increase of 20% in online rentals over 3 months was reached, as well as seeing if there was a decrease in in-person or over the phone rentals without decreasing reservation and revenue. By conducting this research, we can help City Cycles reach their business goals as well as inform my future designs.
