The Bike Stand
reading time: 5 mins
Project Summary
The dramatic rise in e-commerce amid COVID 19 restrictions forced many retailers lacking an online presence to rethink their business strategy. Amid escalating prices and scarcity of supply during a global pandemic, I set out to create a solution to improve the website of a small business bicycle retailer.
Overview
Improved e-commerce redesign passion project. The Bike Stand is a local business in Scotch Plains, NJ who embodies small shop appeal through great customer service and a highly curated product range.
Scope
4 week sprint
Role
UX/UI Design
Tools & Methods
Figma, Pen & Paper, Figma Jam, Trello, Notion, Marvel, Optimal Workshop
Exploring the problem space
I began by conducting research to understand the behaviors of online shoppers and discover what advantages, if any, do users associate with online shopping versus the in-store experience.
What advantages and disadvantages were users presented to depending on the selling environment? How could I align the needs and wants of the users to provide solutions that lead to a seamless e-commerce shopping experience?
User Research
Virtual format
4 participants
3 of 4 participants had prior bicycle purchase experience
4 of 4 participants had prior e-commerce purchase experience
User interview insights
Online shopping does not convey the same experience as in-person shopping, especially when determining stock levels
Users secured their purchases through the selling method which is most convenient to them during the point of sale; online or in-person.
Quicker is better. Users almost always prefer obtaining their item(s) without little or no wait.
Industry research & analysis
Charting the businesses competing for market share, I was able to identify what products and features are critical to the value proposition to their customer bases. I selected three direct competitors and included a local brick and mortar to gain a better understanding on how locality might impact a product.
Next I chose three indirect competitors who share the same customer base as The Bike Stand, but provide a different product and tackle the problem in a different way. The three global retail giants(NIKE, Apple and Zappos) combined 2020 revenues exceeded $70 billion.
I plotted a feature inventory to identify overlap with insights from the user research interviews to inform user expectations, trends and interactions and other e-commerce behavior. I surmised that consumers wanted a clear indication of a product’s availability and to be afforded the quickest method of delivery or pick-up.
Revised problem statement
Cyclists need a way to increase the visibility of product availability, because they want to be able to make purchasing decisions based on what’s available
How might we…
How might we showcase product availability on The Bike Stand webpage, so that users may more quickly obtain their goods
Persona development
Evan’s Journey Map
I constructed a journey map to condense Evan’s end to end experience. I found it helpful to plot his emotional state inline with his thinking to shed light on what phases he experienced the most frustration and least amount of delight.
Click to enlarge
The Bike Stand homepage
To address the needs of the new site’s information architecture, I had to dissect the existing product.
The navigation was cluttered and justified to the left margin. There was a large body of text and no attention paid to design principles with spacing. There were very few product images to give a sense of balance. I would address the landing page first.
By simplifying the navigation design, limiting chunks or large text, and eliminating the extra steps to get to product pages, I was designing with the intention to map out a clear content strategy to aid in the users search for the product they need, and the quickest path to obtaining that product.
click above to visit The BIke Stand’s landing page
Sketches
landing page · site navigation · user checkout · order confirmation
Translation to higher fidelity
landing page · site navigation · user checkout · order confirmation
Solutions
Navigation Strategy
Faceted navigation improves the speed to which users are able to locate products. By filtering out extraneous items, users can focus their search results to expedite a potential purchase, mitigate frustration, and reduce bounce rates.
Faceted Navigation
Store Pick-Up
An affordance on the product page identifies if a product is available for same-day store pick-up or delivery. This filter criteria is also available as a drop down in the faceted navigation bar in the product search page.
Hi - fidelity prototype
Users were provided with the task of searching and securing a Men’s red cycling jersey that will be available for same day pick-up. A round of 5 usability tests yielded completion times that were, on average, 43 seconds quicker than the same task tested on the existing e-commerce page.
Conclusion
This project highlights the importance of a creating a better user experience with content strategy. At the moment, the proprietor of The Bike Stand has no intention of adapting his business model to include online sales, direct to consumer. Sharing my experience in the design process, especially the ideating of the solutions I was proposing, it became apparent that he understood the value of his website as a tool to impact the growth of his business and preserve brand image and identity.
I demonstrated that, throughout the design process, the strengths and weaknesses in how the existing content was laid out, and how it could be improved upon, could provide new and old customers with a streamlined shopping experience.
If afforded the opportunity, I would like to conduct additional field research and include input from his staff to understand their unique perspective about the existing website and customer behaviors. This would like lead the generation of additional user personas that could potentially reflect other targeted audiences(i.e. first-time bike purchasers, professional athletes).
Next steps
Conduct additional testing of high-fidelity protype and iterate
Conduct research on user payment habits
Discover new personas through additional research
Pull traffic analysis reports to address event tracking, audience, pageviews, time on page, and bounce rates to build greater trust and alignment with stakeholders’ tracked goals.