City Cycles

Creating a model project for the UX course at Skillcrush

Image alt tag
The Project

My Role

This project was developed for an introductory UX class that I instruct. Its purpose was to serve as a model for a successful class project and to demonstrate to students how to present and write a case study for their own project.

The key objectives of this project were to demonstrate the following concepts:

  • Conducting both qualitative and quantitative research to gain insight into the needs and challenges of City Cycles users

  • Generating ideas for addressing users' problems or pain points

  • Designing wireframes to visualize potential solutions

  • Building prototypes to test and refine suggested updates to the site

  • Conducting user testing to assess the effectiveness of proposed solutions and making necessary adjustments

  • Presenting recommended solutions and outlining the next steps to stakeholders.

UX courses offered by Skillcrush

UX courses offered by Skillcrush

The Project

City Cycles, a local bike rental company, has noticed that despite offering an online reservation feature on their website, many customers still prefer to make reservations over the phone or in person. This has resulted in a high volume of phone calls and in-person visits, which can make it difficult for City Cycles to provide high-quality customer service. The company is unsure why users are not booking online more frequently and would like to increase the number of online reservations.

As part of this project, students will be tasked with:

  • Developing a plan for a successful UX research process

  • Identifying the target users of City Cycles and any potential problems they may be facing

  • Gathering data through user testing, interviews, and other industry-standard UX research methods

  • Analyzing and effectively communicating research data to non-UX professionals

  • Connecting their research data to identified user problems and ideating potential solutions

“How might we get more City Cycles customers to book their bike rentals on the City Cycles website?”

The Problem

City Cycles' analytics showed a decrease in online bike reservations. User interviews revealed difficulties navigating the website, with customers describing the experience as "frustrating" and "annoying." Users struggled to find the reservation page and were overwhelmed when it opened their default email application.

Based on this information, I came up with the problem statement, “How might we get more City Cycles customers to book their bike rentals on the City Cycles website?” as the focus for the scope of this project.

My Approach

Research > Ideate and Prototype > User Testing > Presentation

City Cycles Customer Journey Map

City Cycles Customer Journey Map

In this project, I conducted research to understand City Cycles users and their pain points. I reviewed user interviews and conducted surveys to create a user persona, and created journey maps and user flows to identify areas for improvement in the reservation process. Based on this information, I iterated ideas and created wireframes and prototypes for an improved reservation process. I conducted two rounds of user testing to validate my solutions and presented my findings and recommendations to stakeholders in a slide presentation.

The Results
City Cycles User Persona

City Cycles User Persona

Key Findings

The data showed that City Cycles users have the major pain points of avoiding traffic and getting to work on time. To address these pain points, the focus of the project was to make the reservation process as convenient and efficient as possible. This would allow users to easily make a bike reservation on the go.

Solutions

To simplify the reservation process and reduce customer frustration, I focused on designing and prototyping the following solutions:

  • Adding a prominent reservation button in the site navigation that can be accessed from any page

  • Including a clear call to action that guides users directly to the reservation process

  • Allowing users to select the type of bike and date for their reservation and make a payment directly on the City Cycles website

  • Streamlining the reservation process to two pages

  • Providing a confirmation page with all necessary information for picking up the bike after a successful reservation

City Cycles

During the first iteration of my bike rental page, I received feedback from users that they were frustrated with the lack of information and the inability to select more than one bike. In response, I made several changes in the second iteration to address these issues. Firstly, I added more detailed information about each bike, including its category and price, to help users make informed decisions. Secondly, I added a feature that allows users to select multiple bikes and add them to their cart at checkout. I included a subheading that highlighted the additional amenities (helmet, water bottle, and optional flat tire kit) included in City Cycles bike rentals. Finally, I designed the checkout button to be pinned to the bottom of the page whenever there are items in the cart, to encourage users to complete their purchase. These changes were effective in improving the user experience and making the rental process more seamless.

User testing the first and second versions of the

User testing the first and second versions of the "Choose Bike" page

I included a large, inactive "Reserve Now" button on the checkout page that only becomes active once all required information is entered. This helped users feel confident and ready to move on to the next step during testing. I also removed the picture of the bike, as users indicated that it was unnecessary, and added the exact rental time as a key element that was missing in the initial version.

User testing the first and second version of the

User testing the first and second version of the "Checkout" page

On the confirmation page, I added a subheading in large text at the top to clearly communicate what users need to bring with them when picking up their bikes and included more details about the pickup and return process as well as the cancellation policy. I also included the address and contact information for City Cycles in the footer to ensure that users feel they can reach out with any questions.

In the second iteration, I added a confirmation number to increase user confidence that their reservation has been recorded. Users appreciated this addition and said they would either take a picture or print out the page to bring with them in case of any issues.

User testing the first and second version of the

User testing the first and second version of the "Confirmation" page

City Cycles

During testing, users expressed confidence in the checkout process and were able to easily locate resources for addressing any questions or concerns.

If I had more time and access to a complete inventory of City Cycles bikes, I would consider adding more specific bike information and additional rental options, such as the ability to choose the bike height and crossbar position. These options could be useful for experienced bike riders who know their preferences and which bikes are best suited for them.

 The final prototype for City Cycles that I created can be viewed here:

Lessons Learned

One of the challenges I faced during this project was ensuring that my example was suitable for students with basic skills, as the course only covers basic Figma skills and prototyping. I had to consider their limitations while still creating a project that they could complete on their own.

I also wanted to communicate the importance of scope management to my students. In my sample case study, I discussed potential options for the City Cycles website that I would recommend if time and budget were not constraints, and explained my decision to focus on the reservation system as it addressed the primary challenge faced by the client. This helped illustrate the importance of considering scope when approaching a project.