What Is thebicyclerepairshop.com?

Locally owned and operated business in downtown Seattle, they have been bicycle experts since 2011. They started simply as a repair and rental shop and have grown quickly over the years to encompass many more services while remaining local bike professionals. As bicycle repair experts, they are available rain or shine to help get people back on their feet (or their wheels?) for daily commutes or weekend bicycle adventures.

Overview

I started this project by learning about the business and its customer demographics. The goal was to deliver a layout with an intuitive, simple flow that makes it easy for users to navigate through the website, find what they need, and finally, complete their tasks.

My Contribution

The Process

DISCOVER

I started the project by doing the heuristic evaluation, then continued by interviewing people to learn about how and what users think about the existing product. Taking the results of the previous steps and synthesizing them helped me identify some gaps and opportunities. As a result of the usability heuristic practice, I had a list of items that needed to be addressed in the new design. The list was narrowed down to the most important items after comparing it against users' expectations.

User interviews

My takeaway:

• The website has an unorganized structure.

• It doesn't follow a single pattern and is not consistent in design.

• It is not easy to choose the right bicycle on the website due to a lack of enough information about the products.

• Footer navigation occupied almost a third of the page.

Persona analysis:

• He is 38 and the father of 12 years old girl.

• As an art teacher, he cares about Design and brands.

• He is a cost-conscious person.

• He is looking for an activity that could do with his daughter.

Problems:

• He has a limited budget for spending money on his daughter's birthday gift.

• Only 5 days left to his daughter's birthday.

• He needs more information about products like more pictures and videos.

• He doesn't know what size bicycle he should buy for his daughter.

Solutions:

• Make the website easier to navigate by iterating the taxonomy of the navigation.

• Fast shipping option would be a great add-on feature.

• Add more information about the product would make it easier for users to make decision.

• A “Size Chart” would be beneficial for those who don't know what size bike they should purchase.

Competitive analysis chart

Based on my context scenario, red crosses are the areas I targeted to improve the product experience.

DEVELOP

Sitemap

Flow diagram

A flow diagram is a great tool that can help you to check every single step that our users would take to finish their task and have an overall idea of the user journey throughout the process. This practice would also help you identify the opportunities, as well as the gaps in the flow.

Sketching

Task scenario and usability test (paper prototype):

The task is to go to the online shopping section and find your desired type of bicycle, find the right size for yourself and then add it to your shopping cart. After adding your item to the shopping cart, find the fastest way for having the item shipped to your address and then proceed to checkout.

Feedback from the paper prototype:

• The main navigation items need to be labeled.

• The header and footer are confusing.

• The filter section on the shopping page needs to be revised.

• It would be great to have some common sizes ready to pick, In the sizing tab in the filter section.

DELIVER

Wirefarmes (mid-fi prototype)

After I selected the best sketch for this business, based on feedback on my paper prototype, I created my wireframes and made a clickable prototype for it. In wireframing, I tried to create all screens that my users would go through to finish their tasks, according to my task scenario.

Usability test (clickable prototype):

The outcome of the usability session:

• The sizing chart is too detailed and it is not easy to find the desired size.

• Make the Breadcrumb clickable for easier navigation.

• The "Sort By” filter on top of the products page is redundant since you have all other filters on the left side of the page.

• In the shipping option section, it is better to show the expected delivery date.

Iteration based on the feedback:

• Filter added to the sizing chart

• Clickable breadcrumb

• Showing expected delivery date

Next step:

• Redesign the home page and add more relevant content about bicycles and their details.

• Side panel for sizing chart: Let user select the size in the side panel, to save time on the main screen.

• Design a new dedicated page for the products’ rates and reviews.

• And, have it tested again…

Lessons learned:

The multidisciplinary nature of the UX role was both exciting and challenging. I had a great time and enjoyed identifying problems, experimenting with different solutions, and validating them with qualitative and quantitative results. Also, a clickable prototype is a better choice for usability test sessions since it is easier for the facilitator to observe the participant's behavior and interaction, without any influence caused by swapping paper components in front of them.