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

Final Prototype
Final Figma File

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!