This design challenge was for an e-commerce bike shop and their mobile website.
MY ROLE
Lead UI/UX Designer
TEAM
Solo
TOOLS
Adobe XD, Google Sheets, Adobe Illustrator, Adobe Photoshop
DURATION
4 Weeks
LOCATION
Remote
MY CONTRIBUTIONS
Competitive Research, User Interviews, Empathy Mapping, Persona, Sitemap, User Flows, Wireframe Sketches, Prototyping, Usability Testing
Competitve Research
User Interviews
Empathy Mapping
Personas
Sitemap
Wireframe Sketching
High Fidelity Prototype
Usability Testing
The project needed a redesign for parts of their mobile website because they had trouble with retention and the conversion rate in two areas: Bike features and cart abandonment.
50% of the customers gave up after clicking through seven different bikes without picking one. One hypothesis is that user can’t figure out what bike is the best based on features.
If that customer did select a bicycle, 70% of users abandoned the cart after having to sign up for an account. The PM wants a guest checkout made to smoothen out the checkout process.
In order to figure out the potential answers to the given problem, I figured I would do a little digging on some competitor’s websites. Their features related to feature comparison and cart abandonment would of course be of most importance.
There are many types of bicycles so I figure the best websites to look at are of ones of global bike brands. I had to look no further than the 2020 Tour de France to help me identify some of the best. (Or at least ones with high marketing budgets.)
Specialized has great information architecture in their menu design.
This can help users find their right style of bicycle without having to search around. Less searching = better chance of finding the right features they want.
Out of all the product comparison features, Trek ended up with the cleanest and easiest to navigate. Having a feature like this in the app will make comparing multiple bikes easier and allow users to make easier decisions
The final feature, is not a feature. Specialized manages to hide their guest account creation in their checkout process. Seamlessly hiding this process greatly improves the checkout flow without having to take the user away from purchasing the bicycle.
I needed to see if the helpful features I picked had any weight in the decision making process for people who had recently bought bicycles.
Through my personal network, I interviewed three male cyclists between 28-35 that recently purchased bicycles between $3000 and $6000.
Due to the Covid-19 pandemic, all sales were made partially through a website experience rather than in person.
I collected all the important information from each interview and distill it down into this empathy map that is more relevant to the target user.
All my reference material in one Serious Sean. With him in mind, my design process was more focused on the target market I was trying to hit.
There are a lot of potential pages that are necessary for a full ecommerce experience one would expect of an online bike retailer.
The sitemap really helped me simplify my prototyping down to just the road bike section due to time constraints and deliverables.
I made a user flow knowing that I needed to focus on only purchasing a road bike.
The flow helps me get into the mindset of Serious Sean and his actions and interactions on this mobile website.
I modified my sketching to include greater detail and copy to act similarly to wireframes and speed up the development process.
The main goals here were to build out the menu navigation, product pages, compare feature, and guest checkout.
Without these, the high fidelity work would not have gone as smoothly.
I had eight people over two rounds of virtual moderated usability testing.
All testees were within the appropriate age range of the target market and familiar with buying bicycles online.
The ability to find and access the compare feature seemed to be the biggest hurdle for users trying to compare bicycle. The lack of confirmation states when clicking on the compare button led to initial confusion.
Why are there two compare buttons? It seems like having it follow you around the screen like on Trek's website would be better.
When I changed the prompt from finding a road bike to gravel bike, the users who were not familiar with the style of bicycle initially thought they were under the mountain submenu.
Those individuals then tried using the search function to help them out when it was not apparent where to look.
All the information in the product comparison section was overwhelming to some. They wanted to break up the information into more collapsable sections.
This is a lot of scrolling and info. I wish there were more sections so I could look at just a bit at a time.
