Mineola Bicycle Responsive Redesign
A responsive website for a local family-owned bicycle store
Project Background
Mineola Bicycle Fitness & Mower is a 4th generation family owned retail and service provider mainly for bikes, fitness equipment and mowers.
As the world of e-commerce grows, it’s been tricky for brick and mortar bike shops. Mineola Bicycle have been struggling with keeping their website up-to-date, however, now they’re feeling the pinch from more competition from e-commerce. The client wants to redesign their website to increase e-commerce sales.
Project Type
Responsive Web
Redesign
Redesign
Duration
4 Weeks
Role
Sole Designer, User Research, Visual Design, Interaction Design, UX Design
What's the Problem?
Mineola Bicycle’s customers struggled with navigating through their dated website and the client wanted to expand its online presence.
The Current Experience
Heuristic Evaluation
User Pain Point #1 – Hard to Browse for Bikes
Mineola Bicycle's website makes it hard for users to browse for bicycles. When users click on a bicycle brand to browse, they find that the site redirects them to the brand's website. Users aren't able to view bicycles without combing through the website to find an area that brings them to a product page.
User Pain Point #2 – Product Cards Misaligned
On the product listing page, the alignment of the product cards are off when users browsing through the products. There is also very little consistency across each card.
.gif)
User Pain Point #3 – Lacking Product Details
The product detail page struggle to provide users with enough information to the users to make an informed decision. Leaving users to do research outside of the website.
Goals
Help Users
Navigate easily and find what they need
Help Mineola Bicycle
Increase e-commerce sales by updating their brand to show a more modern look and appeal
Help Expand
Uncover any further pain points and insights from users
Gain Understanding
I first set off to better understand the bicycle market. I looked into the competitors in the bicycle ecommerce space to understand if there’s a standard for information architecture, identify opportunities, and find an edge. I found four competitors REI, Decathlon, Target, and TheProCloset, who lead the market in selling bicycles.
I found that:
- Brands are seeing the growing market of new and pre-owned bikes and the need to shift their focus and attention to this category.
- The e-retail space for bicycles is still in its infancy stage with huge room for growth
- Companies are increasing their brand recognition for bikes but fail to have staff knowledgeable about bicycles
Learning Through Others Experiences
User Interviews
I looked to find participants who bike and have shopped for a bike previously. As such, I interviewed five participants about their experiences with shopping for bicycles.
Through the interviews, I learned what motivates users to shop at certain bike websites, how they navigate through a bike e-commerce website, and what they look for in a bike.
Through the interviews, I learned what motivates users to shop at certain bike websites, how they navigate through a bike e-commerce website, and what they look for in a bike.
100%
Of participants who are both experienced and inexperienced with bicycles struggled when researching & browsing for them.
Of participants expressed that the visual appeal and layout of the website are important when they shop online.
Of participants said that filters play a huge role when they search for bicycles. However, too many filters is overwhelming and too few filters leads to a frustrating search experience.
Of participants expressed that the visual appeal and layout of the website are important when they shop online.
Of participants said that filters play a huge role when they search for bicycles. However, too many filters is overwhelming and too few filters leads to a frustrating search experience.
80%
Of participants felt frustrated when going through websites to look for a bike that suited their needs.
Of participants usually compare bikes across multiple tabs and pages to see which is the best fit for them.
Of participants usually compare bikes across multiple tabs and pages to see which is the best fit for them.
“Most bike websites I’ve visited are similar in how they look and they feel dated.”
- Bike Enthusiast Interview Participant
Creating Personas
Conducting research and user interviews gave me a better understanding of the problem space surrounding shopping for bicycles online. Navigating and shopping for a bicycle is an uphill challenge for everyone.
After synthesizing my research, it was time to move on to the next step. With my head fresh with insights from user interviews, I went to create personas to represent my users. Meet Lucas, your biking warrior!
After synthesizing my research, it was time to move on to the next step. With my head fresh with insights from user interviews, I went to create personas to represent my users. Meet Lucas, your biking warrior!
.jpg)
User Journey Map
Creating personas helped me to focus on my target audiences. However, I wanted to understand how a customer moves through each touchpoint and what their experience looks like when they look to buy a bicycle. So I looked to a user journey map for help. I looked through the lens of our persona Lucas and saw how he would navigating with shopping for a bicycle.
Problem Statement
How might we make comparing products easier so that users will save time when making a decision?
From Ideas to Wireframes
Looking at the old sitemap, I understood why Users found it hard and overwhelming to navigate through the website. I created and optimized a new sitemap so that users would be able to navigate and find content with ease.
Old Sitemap
New Sitemap
With a deeper understanding of the sitemap and layout, I was then comfortable with starting to think about the solution and how I could set up the framework. The main flow I wanted to tackle for this MVP was "Buying a bike".
User Flow
Capturing the Look and Feel
It was important to maintain the brand attributes and feel of the family owned store as I modernized their brand and website. I made sure to add in the compare feature as I sketched out and digitized the mid fidelity screens.
High Fidelity Wireframes
.png)
Determining Effectiveness
Usability Test
It’s important that solutions actually address the frustrations and issues at hand. As such, I conducted a usability test with 4 participants who are in the market or have bought a bicycle previously. I had participants run through three tasks:
- Create an account
- Compare three bicycle products and add to cart
- Purchase a bicycle
Competion Rate
100%
Satisfaction Score
100%
Intuitive Score
4.8/5
Net Promoter Score
4.8/5
Discoveries
Users navigated with ease across the different pages. However, when users got to the product listing page, some users expected the card to display some sort of detail when they hovered over each product card.
Some users also faced difficulties when using the compare feature due to technical prototyping limitations. It was only when I explained what the feature's intended action was supposed to look like were they able to understand.
Some users also faced difficulties when using the compare feature due to technical prototyping limitations. It was only when I explained what the feature's intended action was supposed to look like were they able to understand.
Impact-Effort Prioritization Matrix
Grabbing the recommendations for the next round of iterations, I added the recommendations on to a prioritization matrix to figure out the priorities as the next steps.
Iterations
From the impact-effort matrix, I added the Compare feature onto the Top-rated products section. I also added a help section for users to get more assistance on choosing a bike.
Final Thoughts & Next Steps
Overall, I was happy with the results of my usability test. I shared the designs with the client, and they loved how it turned out. They did express that this was over their budget and it would take a bit longer to reach out to developers.
The post MVP actions are to hand-off the designs to the developers. The next steps for the product roadmap would be to conduct a second round of usability tests with my updated iterations on a new set of participants. I would love to add on the “schedule a test ride” feature for users to help the business increase their conversion rate.
The post MVP actions are to hand-off the designs to the developers. The next steps for the product roadmap would be to conduct a second round of usability tests with my updated iterations on a new set of participants. I would love to add on the “schedule a test ride” feature for users to help the business increase their conversion rate.
