City Cycles is a bike rental company that exists to serve locals and tourists who are looking to get out an about on two-wheels.
Project Type and Scope
This was a solo project where I served as lead designer. I provided:
- qualitative and quantitative research to learn about users
- market research to identify opportunities
- conceptual design of a revamped website and ordering process
- high-fidelity prototype
- user texting
Project Overview
City Cycles has a broad following with locals and tourists. However, bike rentals have declined consistently over a year's time, reducing revenue.
In this case study. I’ll walk you through my process, and how I identified key issues with the website and redesigned the home page & reservation process so users could easily find information they wanted, start a reservation quickly and have options to meet their desired reservation needs.
Primary & Secondary Research
I wanted to understand the extent of the decline in reservations and look for any trends that might give us clues to the issue.
Review Google Analytics
I reviewed Google Analytics data provided by City Cycles. The data clearly showed what City Cycles was reporting, that online bike rentals had dropped 80% over the course of a year. We noted key drops in April and October.
Google Analytics Graph
Interviews
I wanted to understand how existing & potential customers were experiencing the website.
User Journey Map
Review Customer Feedback, Test Site & Map User Journey
City Cycles shared feedback from a regular user that I reviewed. I compared that to a user interview and usability test that I conducted. During the interview I produced an empathy map and plotted a user journey to highlight pain points and look for opportunities to improve the experience.
Research & Interview Takeaways
SWOT & Competitive Analysis
I wanted to understand what similar companies offered, how they organized the information on their sites and how they took reservations.
Competitive Analysis Table
Competitive Analysis
I looked at various bike rental companies to see how they were handling factors noted by users as challenging as well as those that would impact business goals of increasing rentals - online reservations, ease of use of the website, bike availability, customer service and social media presence.
Conduct SWOT Analysis
I used what I learned in the Competitive analysis and conducted a SWOT analysis to identify what City Cycles was doing well, document areas of opportunity in the design & reservations process and see how they measured up to competitors.
Strengths, Weaknesses, Opportunities & Threats Table
SWOT & Competitive Analysis Takeaways
User Persona
I wanted to get a better understanding of the users motivations for renting bikes to focus my design work.
User Personas Based on Varying Behavioral Styles
Behavioral Based Personas
I developed four personas based on varying user motivations for renting bikes - Commuter, Tourist, Local day-tripper & Local Student. This allowed me to think about their pain points and goals as I moved into designing solutions.
User Persona Takeaways
Ideation & Prioritization
I wanted to generate ideas that would help users make reservations quickly and also provide revenue generating feature options for City Cycles.
Card Sort, Idea Matrix and Now, How, Wow Ideation Exercises
Card Sort, Matrix of Ideas & Now, How, Wow Prioritization
I completed a card sort exercise with the intent to organize all the content categories and help redesign the home page. Then, I focused on those pages or sections where the reservation process would be most prominent to users. I generated ideas that would meet user goals of making same day, multi-day or recurring reservations online, allow users to see bike options and guide users through a reservation process to completion in order to increase online rentals.
I used the Now How Wow method to narrow down ideas for the home page and reservation process.
I used the Now How Wow method to narrow down ideas for the home page and reservation process.
Priorities from Sorting, Ideation
Sketching & Wireframing
How might we organize content so users can quickly find what they are looking for, make reservations of varying lengths & lay out an intuitive reservation process?
Laying Out a Content Redesign & Rental Options
For the Home page, I separated content into sections by user interest or action, keeping the reservation CTA displayed prominently, allowing a user to easily scan and find what they were looking for.
Taking user interest in various length reservations, I worked on a design that provided users to select a rental length before starting their reservation. I modeled the reservation flow on a competitor’s site.
Low-fidelity Designs
Prototyping
I wanted to know if the redesigned home page and reservation process would increase user happiness with the reservation process.
Adding Fidelity to Initial Design
Prototyping a Step by Step Process
Using a reservation system discovered during Competitive Analysis as a model, I mocked up a prototype to begin building user interaction flow. When users clicked on the CTA buttons or on the Reservation in the navigation menu, they would come to this flow and start by selecting a reservation length. They would be guided through the reservation and breadcrumbs would show them where they were in the process.
A 3-step Reservation Process Didn't Seem Feasible
Because users wanted options for how long their rental was as well as selecting from a variety of bikes, the number of steps in the reservation process required more than three clicks from start to finish.
High Fidelity Design & Interactive Prototype
I wanted to build a flow that was intuitive for users and would help them start and complete a registration process quickly and easily.
High-fidelity Design of Home Page & Reservation Screens
Designing Interaction
Using Figma, I created high fidelity designs and interaction that would be tested with users.
Key features prototyped for testing were reservation length selector, start date, bike selection and seeing key information about the reservation as they moved through the process. Key information listed included available reservation dates, rental duration, bike rates prior to selection, selected bike, and time of reservation. Breadcrumbs and Next Step messages were used to orient users to where they were in the process and go back if they wanted to make a modification.
Key features prototyped for testing were reservation length selector, start date, bike selection and seeing key information about the reservation as they moved through the process. Key information listed included available reservation dates, rental duration, bike rates prior to selection, selected bike, and time of reservation. Breadcrumbs and Next Step messages were used to orient users to where they were in the process and go back if they wanted to make a modification.
Where is the MVP Line? More Can Always Be Done
Deciding how much interaction to program before getting users to test was challenging. Ultimately, I designed just one piece of interactivity on each screen, hoping that would be enough for users during testing, with guidance.
Usability Testing & Prototype Refinement
I needed to understand if the updated user flow would limit frustration and increase the number of reservations made online.
Script Writing
I wrote a usability test script with nine questions and interviewed two users to get feedback on the updated site design and reservation process.
Based on feedback, I updated the prototype, tracking changes in an iteration log. Two rounds of revisions were completed before the final prototype was created.
Iteration Log for Site Redesign
Usability Testing Takeaways
What I Learned
This project allowed me to delve into creating interactions in Figma and explore SWOT and Competitive Analysis methods. I also learned about the connection between a usability script and the interactive pieces set up to test. Having built out an interactive prototype, I was surprised when users were still experiencing frustration. However, I realized that my usability script was not specific enough to guide users to only the interactive pieces of the prototype to assure their success.
Next Steps
To continue this project, I would build out the interactivity further - bike carousel, navigation, more complete reservation options - and repeat usability tests, asking users to complete a reservation online.
To see if user and business goals were met, we would look at online reservation data over a 3, 6, 9 and 12 month period following the launch of updates.
Thanks for Riding Along!
