City Cycles
Designing and online bike rental system for an existing site.
|
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.
User ProblemsUsers seem frustrated that they can't complete a reservation online and are asked to email their reservation requests. |
Business ProblemsThe shop is getting overwhelmed with calls and drop-ins, and there was a steep decrease in bike rentals over the past year. |
How might we get more City Cycles patrons to reserve their bikes online?
Research & Data Collection
Competitor DataBefore 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. I put all this information into a SWAT Analysis, from which I learned where the gaps in their online reservation system were, and some opportunities for growth outside of their reservation system. |
Site MapAs a systems thinker, this is always my first step, which gives me an overview of the big picture of what I'm working with. Since this product is a website, I created a Site Map to get an idea of what's there, and where any friction points may be. On this site, 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 CollectionBecause 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
Key Quantitative Takeaways
|
Qualitative Data CollectionUser 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. 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. Key Qualitative Takeaways
|
(Click on the image to open a PDF of the Journey Map)
Main Research Takeaways
|
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"
Most Important Ideas (Wow!)
|
New Site MapBefore implementing these ideas, I wanted to get clear on my ideas for improving the navigation and architecture before tackling a new reservation system to make sure users would have a more positive experience from the start.
|
|
Designing
Hi-Fidelity Wireframes
Their current homepage 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. Click here to see new wireframes for each of the other pages as well.
(Click on image to view larger)
Before1 - Cluttered text & search bar over the background image
2 - Confusing navigation 3 - "Online Call Ahead" button doesn't lead to the reservations page |
After1 - 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 |
Prototyping
ResearchI 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:
|
DesignI found and customized a template for a multi-step form and then grouped all the features I wanted into five steps:
|
Scroll through the pop-up windows:
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:
|
Conclusions
Next Steps
User TestingNow 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:
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 DataThe 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:
|
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 caught myself 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 craft 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.
|
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
|
