CityCycles
As part of a User Experience course, I conducted user research and testing to improve a bike reservation website
Conducted user research and user testing sessions to develop new design solutions
UX Testing
Created site map, user journey, paper and digital wireframes, and prototypes using Figma and InVision
UX Design
Developed visual style guide and implemented in final prototype
UI Design
Overview
CityCycles is a bicycle rental business that is aiming to be more digitally minded. Currently, most of their reservations are done over the phone and no one seems to be using the online reservation system. This is due to the website being confusing and difficult to use and the reservation process being very unclear, leading to users calling the shop to make their reservations instead.
The primary goals for this project are to:
Decrease amount of time required to reserve a bike
Increase usage of online reservation system by 25% in the next quarter
Increase repeat online reservations by 15% over the next quarter
Planning
I started by conducting user testing on the current website to identify pain points, as well as conducting user interviews to see what CityCycle’s ideal user would expect from an online reservation system. I found that the current website is nearly impossible to use and users set on reserving online without making a phone call would bounce to a different business. I also found that users expect online reservation systems to be seamless - especially nowadays with everyone using apps like DoorDash to order food, and Vagaro for making hair appointments.
Using this information, I reworked CityCycle’s site architecture and created a new user journey that streamlines the reservation process.
Wireframing
With our goals in place and planning completed - it was time to get to work! I started with sketching paper wireframes, focusing on the new reservation user flow - homepage, reservation page, and the confirmation page. I then turned these into digital wireframes in Figma, and then applyed the company’s UI kit to the wireframes as well.
Here, you can see that in each step the date/time inputs changed a little. In the first step, I have a calendar but no times. In the second step I have a drop down for date and time - but the time isn’t clear since it’s a bike reservation and you could need it for an hour or a whole day. So in the last iteration, we have the date, pick up, and drop off times.
Prototyping
Next, it was time to prototype my proposed design. First, I created a paper prototype and did some user testing to get feedback for my final digital prototype. The feedback I got was that there’s no pricing or payment information and clicking a drop down and then a date on a calendar was adding an additional interaction that didn’t need to be there.
For the final prototype, I also included indicators that a field was entered properly (blue outlines on input fields when done) and made it so the submit button was grayed out until all the necessary information was filled out. I also added pricing that populates once the hours and bike have been selected, making it clear what to expect for the cost before entering your payment information.
The next step was to test it out on some users!
Testing & Visual Design
Final Figma Prototype: Here
Final Figma File: Here
After finishing the prototype and conducting a few user tests, a few things became apparent about my initial concept:
There was no way to pick more than one bike
There was a lack of information about each bike
The pricing information is too far away from the time and bike selection
With these things in mind, I revised my design to:
Include a way to select quantities of each bike so group reservations could be made
Included information on each bike, especially what height range they were appropriate for
Moved Contact Information to the top and included the Total with the bike selection, so any budgeting changes can be more easily made with minimal scrolling
Lastly, based on the results of an A/B Test, I also included a reservation CTA in the navigation bar, since it was testing well.
After making these changes, I gave CityCycles a bit of a makeover based on their existing branding and added a coat of paint to my final design!
