E-commerce BIKE SHOP
Objective:
Design a responsive e-commerce website that allows users to:
-
Browse a curated selection of bikes
-
Filter products based on preferences
-
Choose between home delivery or in-store pickup
-
Utilize streamlined checkout options, including digital wallets
Project Overview
The Product:
An online bike store, with a mobile and desktop view.
​
Project Duration:
January 6-28, 2024
​
The Problem:
A local brick-and-mortar bike shop aimed to expand its reach by establishing an online presence. The goal was to provide customers with a convenient platform to browse and purchase bikes, reducing the need for multiple in-store visits.
​
Deliverables:
User Research, Personas, Wireframes, High-Fidelity Prototypes, Usability Testing
​
My Role:
Lead UX designer and UX researcher.
​
Tools:
Figma, Invision, Miro
User Research
Methodology:
Conducted in-person moderated usability testing with five participants in Detroit. The sessions focused on understanding user behaviors, pain points, and expectations when shopping for bikes online.
​
Key Findings:
-
Simplified Checkout: Users preferred a quick and straightforward checkout process.
-
Digital Wallet Integration: Desire for options like Apple Pay to expedite purchases.
-
Flexible Delivery Options: Interest in in-store pickup to avoid high shipping costs.
-
Affordable Alternatives: Demand for used bikes as cost-effective options.
Persona
Background
Lupe, a 35-year-old chef from Oaxaca, Mexico, recently relocated to the U.S. Without a car, she relies on public transportation and walking.
​
Details
-
Age: 35
-
Education Level: Bachelors
-
Hometown: Oaxaca, Mexico
-
Family: 2 cousins who live with her
-
Occupation: Chef
-
Personal Quote:
"No matter how good a chef you are, it’s no good only cooking for yourself; the joy is in cooking for others. It’s the same with music."
Goals:
-
Find an affordable and reliable mode of transportation.
-
Browse and purchase a bike online with the option for in-store pickup.
​
Pain Points:
-
Limited mobility without a personal vehicle.
-
Language barriers and unfamiliarity with local stores.
User Journey Map
Trigger
Doing
-
Customer needs a bike
-
Is not near a bike store
-
Limitations on travel
Thinking
-
"I need a bike."
-
"Not near a bike store."
-
"I don't have a car."
Feeling
-
Limited without a car
-
Tired from the work day
-
Wish for alternative way to shop online
Research
Doing
-
Searches online bike store
-
Views what's popular
-
Filters by price range
Thinking
-
​Carefully considers choice
-
Evaluates their price range
-
Day dreams of new bike
Feeling
-
Grateful to shop online
-
Overwhelmed by options
-
Excited about new bike
purchase
Doing
-
Decides on a bike
-
Places order
-
Opts for pickup delivery
Thinking
-
Imagines new easier commute with new bike
-
Plans bus route to pickup the bike when its ready
Feeling
-
Relieved bike is ordered
-
Excited for brand new mode of transportation
pickup
Doing
-
Gets notification the bike is ready for pickup
-
Takes bus to bike shop
Thinking
-
Anticipates new bike
-
Imagines life w/ new bike
Feeling
-
Anxious about if they miss the bus stop to get off on
-
Excited about new bike
arrival
Doing
-
Arrives at bike store
-
Confirms order with clerk
-
Heads home on new bike
Thinking
-
Its fun to ride a bike
-
Traveling is much faster
-
Service was fantastic
Feeling
-
Grateful for convenience
-
Dopamine is boosted
-
Riding a bike reminds her of childhood at the park
Design Process
1. Empathize:
Gathered insights from user interviews and usability testing to understand needs and pain points.
​
2. Define:
Identified key user requirements: streamlined checkout, flexible delivery, and affordable options.
​
3. Ideate:
Brainstormed features such as:
-
One-click checkout with digital wallets
-
In-store pickup scheduling
-
Used bike listings
4. Prototype:
Developed wireframes and high-fidelity prototypes for both desktop and mobile views.
​
5. Test:
Conducted usability testing to refine the user interface and ensure intuitive navigation.
Digital Wireframes
As the design proceeded to digital, I ensured that my designs were based on the feedback from my research. I created a digital version of the wireframes in Figma and proceeded to test it with users.
​
The lo-fi prototype depicts an early version of the app.
Usability Study
I recruited participants in Detroit to an in person moderated usability test for the lo-fi prototype. I asked users to think out loud so that I can understand their thought process. This way, I was able to identify problems early on.
​
The following is what I looked out for while observing users:
-
How long does it take for users to place an order?
-
Are there any parts where the users are getting stuck?
-
Is the payment process easy and intuitive for the customer?
​
Findings
-
The importance of accommodating diverse user needs, such as language preferences and transportation limitations.
-
The value of integrating user feedback throughout the design process to create intuitive and accessible solutions.
-
Further personalize preferences
-
Happy with ability to sort menu
-
Ability to confirm successful completion of task
​
Key Features
-
Responsive Design: Optimized for both desktop and mobile devices.
-
Product Filtering: Users can filter bikes by type, price, and availability.
-
Checkout Options: Integration with Apple Pay and Google Pay for quick transactions.
-
Delivery Choices: Option to choose between home delivery and in-store pickup.
-
Used Bikes Section: Dedicated area for affordable, pre-owned bikes.
Accessibility
Keeping in mind the needs of those with different abilities and needs, you'll end up finding solutions that help a wide range of the diverse human population.
-
To overcome language barriers, I made the app more focused on photos and be less text heavy. This also helps users who don't know much about bikes or the different names.
-
I used high contrast in my design to help the colorblind.
-
For those with executive dysfunction, I made the checkout process involve as few steps as possible.
-
Delivery can be expensive when shipping bikes, so I included the option to have in store pickup.
-
Because delivery is expensive, I highlighted that part of the checkout process so that the user isn't unwittingly saddled with an expensive shipping fee if that wasn't what they wanted.
Takeaways
Impact:
Users found it easy and straightforward to place orders. Both experienced and novice bike shoppers found the products easy to browse, since it includes photos of the bikes to help users better understand what they’re ordering.
​
Outcomes:​
-
Improved user satisfaction with the shopping experience.
-
Increased online visibility and customer reach for the bike shop.
-
Enhanced conversion rates due to simplified checkout and flexible delivery options.
