ONLINE BIKE SHOP
I made an online bike store for customers to be able shop from the comfort of their homes.
Project Overview
The Product:
An online bike store, with a mobile and desktop view.
Project Duration:
January 6-28, 2024
The Problem:
A brick and mortar bike shop wants to expand their customer base by reaching a wider audience through an online way to shop. This also allows customers to save multiple trips to the store when deciding on which bike to purchase. Customers tend to shop online first, for the sake of convenience. Making products available online would give the store more visibility, appearing in online searches.
The Goal:
Create a way for customers to browse products and make purchases from anywhere online.
My Role:
Lead UX designer and UX researcher.
Responsibilities:
User research, Wireframing, Design, Prototyping
User Research
Summary
I used an in person moderated usability testing with 5 users in Detroit. The participants shed light on areas for improvement in the user journey and usability of the app.
User Pain Points
Users wanted a simple checkout process that was short, sweet and to the point. For an even faster checkout, some wanted the option to use Apple Pay or anything similar that already has their payment and shipping information recorded and ready to use- so that they don't have to enter it by hand. Shipping is also expensive for something as large and heavy as a bike, so users want the ability to pre-order the bike and pick it up in person at the brick and mortar store. Bikes can also be pricey, so users would like to have the less costly option of buying used from a trusted source.
Persona
Problem Statement
Lupe just moved from Mexico to the US and doesn't have a car, but needs a way to get to work. She currently takes the bus and walks everywhere, but would appreciate an affordable way to expand her mobility. Buses have bike racks; so she can ride a bike to the bus stop, take it with her on the bus, and once she gets off she can ride the remainder of the way on a bike.
The lack of a car makes buying a bike at a brick and mortar store difficult. But it would help if she can browse bikes at the store online, make a decision, and place an order. From there, she can have it delivered. Alternatively, she can also save money on shipping by ordering a bike to pickup at the brick and mortar store. The online shop would still save her extra trips, since she can browse at home and take as much time as she needs.
Persona 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:
-
Needs an affordable mode of transportation
-
She loves sushi, and Maru is her not-so-guilty pleasure.
Frustrations:
-
She just moved to the US and doesn't speak much English
-
She doesn't have a car, so she has limited transportation
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
Browsing
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
Ordering
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 email 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
Paper Wireframes
The time to it actually takes to physically writing things out affords me time to think. I appreciate how quickly this process helped
de-risk some things that would have been time consuming to figure out after going straight to a high fidelity prototype.
I studied other online stores to help me figure out what to include in my own product. After doing so, I realized the importance to give users the choice to have a bike delivered or to pick it up in store, since shipping bikes can be expensive. Users also appreciate a quick checkout process, and the option to expedite it with the use of Apple Pay or a similar service that has the user's shipping and payment info ready so that they don't have to manually type it.
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 order their meals?
-
Are there any parts where the users are getting stuck?
-
Is the payment process easy and intuitive for the customer?
Findings
-
Requested ability to save favorite meals
-
Further personalize preferences
-
Happy with ability to sort menu
-
Ability to confirm successful completion of task
Hi-Fi Prototype
Taking into account the usability issues in the lo-fi prototype, I then created the 1st version of the hi-fi prototype. Once that was completed, I did a second round of usability testing. I kept in mind Lupe (our user persona) who doesn't know English very well. So I made the designs image heavy, to overcome that language barrier. It also helps out English speakers who simply don't know that much about bikes to begin with. At least this way, they can make a purchase based on aesthetics, prices, and the reviews from customers.
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.
What I learned:
-
How to conduct a usability study
-
How to build an app from start to finish
-
How to empathize with users
-
How to plan a study
