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 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 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 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.
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
|
|
Heat Mapping Data Results
|
Key Data Takeaways
|
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 InterviewsI 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
|
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"
|
Innovative, Most Important Ideas (Wow!)
|
New Site MapBefore implementing these ideas, I wanted to get clear on my ideas for improving the navigation and architecture.
|
|
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.
WireframesBecause 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)
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 |
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:
|
|
|
(Click on image to view PDFs of each wireframe)
Second Goal: Create a New Online Reservation System!
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 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
|