City Cycles

Project Overview

This class project works with City Cycles, a fictional bicycle shop that rents bikes in the downtown area of Riverside, CA. City Cycles wants to update the online reservation feature on its website to increase the number of rentals.

Problems

User Problems

Users seem frustrated that they can't complete a reservation online and are asked to email their reservation requests.

Business Problems

The shop is getting overwhelmed with calls and drop-ins, and there has been a steep decrease in bike rentals over the past year.

How might we get more City Cycles patrons to reserve their bikes online?

Hypothesis

I have the belief that users are leaving in the middle of a reservation because they do not want or trust email to do this. It’s also my belief that if I create an online reservation form that is more user-friendly, and offers immediate confirmation, online reservation use will increase.

Research & Data Collection

Competitor Data

Before starting my process, I want to see how other competitors have designed their sites. This will help me understand what’s standard practice in the area, where City Cycles can shine, as well as what their areas of opportunity are.

After conducting a Competitive Analysis to see how other bike shops compared, I put all the information into a SWOT Analysis to see where their strengths & opportunities are. I was shocked to see that none of the competitors (granted, this is a fictional shop for a class project) offered same-day online reservations, so this would be a fantastic opportunity!

Site Map

As a systems thinker, this is always my first step, which gives me an overview of the big picture of what I'm working with.

I was surprised to see how many steps it took to find and get to the reservations page. The blog page was also very messy, and the navigation was not clear.

Quantitative Data Collection

Because this was a class project, I was given the analytical data. As an entrepreneur, I have direct experience with Google Analytics, so that was familiar. Below is a collection of data and visualizations that I created from Google Analytics & Heat Mapping data.

Google Analytics Data Results

Almost 75% of users are new, with 25% returning.
85% of users were immediately leaving the site after clicking the “Make a Reservation” link.
The link to the "Contact" page has the highest traffic.
Online bike rentals dropped by 80% last year.

Heat Mapping Data Results

75% of users pause their mouse over the portion of the page that contains the navigation menu.
89% of users click the City Cycles logo, and 80% click the search bar.
60% of users click the menu links to navigate the site.
Only 25% of users scrolled down to view content at the bottom of longer pages, like the "Blog" or "About Us."

Key Data Takeaways

I wonder why only 25% of users are returning customers.
The huge drop in online bike sales last year (80%) means users really don't like their online reservation system.
The data hints at users being confused because they click/hover most on/over information-seeking areas like "Contact," navigation links, and the search bar.

Qualitative Data Collection

User Personas

A good first step in empathizing with the users is to get an understanding of who the users are and what motivates them to shop at City Cycles. From a user survey that City Cycles sent out to its customers, I created both a local and tourist persona, to get both perspectives and help prepare for user interviews.

User Interviews

I gathered user interview data both provided to me and through my own in-person and virtual interviews. My first step was to look at the language, emotions, and steps users were experiencing during their journey of reserving a bike online.

From this word cloud, you can quickly see how the user's negative experience with the online reservation system outweighed their positive experience.

Journey Map

I was able to combine my data into one big picture of the user's journey. As a systems thinker, I love seeing the whole process or picture of something, so I can see how the pieces work together to succeed (or not!). A Journey Map is a great way for me to see the whole customer journey and highlight the pain points that need to be addressed for the site to be more successful.

(Click on the image to open a PDF of the Journey Map)

Main Research Takeaways

Users need to be able to find the reserve page/process quickly.
There needs to be clear information about the types of bikes and prices.
There needs to be an online reservation system, not an email or phone call to reserve.
Contact information needs to be easier to find.
Navigation and architecture need to be improved, so that users are not having to search for information.
Keep in mind accessibility on different devices.

Design Process

Planning

Ideating

After generating a list of ideas that evolved from my research process, I decided to put them into a How, Now, Wow! framework to start prioritizing where to start my design process, which starts with the ideas in the "Now" and Wow!" sections.

(Click on image to see details)

Ideas to Implement "Now"

Redesign main navigation & structure to include:
- Home - Reserve - About - Blog - Contact - Search
Add prices & short descriptions to bikes.

Innovative, Most Important Ideas (Wow!)

Add footer & include contact info & reserve link .
Add a new interactive online reservation system! (Include the ability to choose date/bike and pay)

New Site Map

Before implementing these ideas, I wanted to get clear on my ideas for improving the navigation and architecture.

New Site Map
- To get to reservations directly
- Find contact information quickly
New Footer
- For quicker navigation & consistency

Designing

First Goal: Improve the navigation & flow

In preparation for designing solutions, I got a UI kit from City Cycles, which gave me fonts and colors to use, as well as the main background image. I ended up going to the source code of their website to get more photos and added some of my own.

Wireframes

Because this is not a full website redesign, I skipped sketching out wireframes and created a couple of HiFi wireframes of the homepage to get these elements set, as well as create a template to use for the other pages that would be uniform and user-friendly.

A Better Layout

Their current site has text over the background image, which is difficult to read, so I designed a better layout for the text and image. I also included my new navigation and footer to the design template.

(Click on image to view larger)

Before

1 - Cluttered text & search bar over the background image
2 - Confusing navigation
3 - "Online Call Ahead" button doesn't lead to the reservations page

After

1 - New navigation and search function at the top
2 - Separated text moved to white spaces for better visibility
3 - A reserve button in the header that leads to the reservation page
4 - New footer with contact information and navigation

New Pages & Redesigns

From there, I used the template to create uniform pages that match their current ones for each of the links in the new navigation. I used text from the current site, to maintain as much of the current site as possible. Some of the changes I made included:

Home - Changed name from "City Cycles" to "Home," and added three big navigation tiles.
Reserve - Added further navigation to the “Reserve” page, as there is a lot of information to scroll through.
- Added buttons at the top, bottom, and footer to reserve a bike, to offer more touchpoints to get to the new reservation system.

About - New "About" page includes contact information & hours.
Blog - Remove “About” information from the Blog page, so it’s just blog posts, and highlights events.
Bikes - Expanded the bike photos with details and prices on the “Bikes” page.
Contact - "Hours" becomes "Contact," and links to the new footer instead of a page.

(Click on image to view PDFs of each wireframe)

Second Goal: Create a New Online Reservation System!

Research

I first did a little research by looking at online bike rental forms for a few shops here in Austin. From these forms, I gathered a list of features I wanted to include in my system:

Get user contact information early on in the reservation process.
The ability to choose their day, time, and length of rental.
Agreeing to Terms & Conditions checkbox.
A way to add any custom needs.
Detailed subtotal, and ability to go back and make changes.
Multiple ways to pay, with online payment and confirmation.

Design

I found and customized a template for a multi-step form and then grouped all the features I wanted into five steps:

Pick your date (and contact information)
Choose your bike (and needs)
Your subtotal
Checkout (Payment options)
Confirmation

Now when they click on “Reserve a Bike,” they are led to these pop-up forms, where they can complete their reservation online!

Scroll through the pop-up windows:

Click here for PDF

Figma Template Credits:
Interactive text input fields: Spencer Kelly
Multi step form: Ibrahim Uzun
Payment screen & date/time picker: Mielu Cristian
Interactive drop-down menu: Vishal Chauhan
Interactive calendar: Julieta

Watch a video of the interactive prototype:
(This video has only music)

See My Prototype

Prototyping

Prototyping proved to be the most challenging and time-consuming step for me, as I’m still new to prototyping and I added some complicated features, which I had to learn:

Interactive date and time feature
Drop-down menus
Fillable text fields

I’m eager to practice and make this process smoother!

Conclusions

Next Steps

User Testing

Now that there’s a new reservation system, the next step would be to test it with users via interviews before launching. Here are some SMART goals for this user testing:

We have implemented a reservation system that has achieved a score exceeding 70% in user testing. This corresponds to a rating of 7 or higher on the linear scale used in the user survey, which is linked below.
Users are able to complete the online reservation in under 4 minutes.

Once it is launched, I would then send out a user survey to get a larger sample size to see if we are reaching these goals.

Collect Analytics Data

The goal is for this new system to be launched by the end of Q2. I will then follow up with Google Analytics to see that by the end of Q3:

The bounce rate from the “Reserve a Bike” button will have lowered from 85% to below 50%.
They will have increased online bike rentals by 50%.
There is a decrease of walk-in and phone traffic by at least 25% by the end of Q3.

Learnings & Challenges

Data Collection

I enjoyed learning about many different types of data and ways to collect it to get a fuller picture of the user experience. This also helped guide me with what questions to ask in my user testing. However, I struggled with not making assumptions about what I thought would fix the problems and had to remind myself to follow the data.

Design

I had so many design ideas for the City Cycles website, that it was hard for me to stay focused on the goal of creating a new reservation system. I had to constantly ask myself “Does this align with their main goal?” and “Is this a quick fix, or can this be saved for another project?”

User Testing

Through the user testing, I learned a lot about how to ask the right questions, and how to keep them neutral and open (not leading). I got better at it each time and was able to condense my language and minimize the "fluff" to make it quicker and more meaningful each time. I also got valuable practice in moderating online, which seemed to be easier for most people.

Prototyping

As I mentioned above, there were several new things I had to learn to prototype the new reservation system, which took a lot of time, patience, and perseverance on my part. I look forward to learning more in this area.

Conclusion

This was my favorite project because it focused mostly on research and information architecture, which I really enjoy. I love studying systems and people, and this research process allowed me to see the big picture while also diving into the user experience of what problems they’re facing and why, and of course, how I can design solutions that will improve their experiences.

Thank you for reading!

Check out some of my other case studies by clicking on these images.

Dorothy DeLong - Single-page Portfolio Site Design

Elizabeth Brett - Navigation Redesign