top of page


I made an online bike store for customers to be able shop from the comfort of their homes.

View desktop Figma prototype
View mobile Figma prototype

walling-UP7JSnodG2M-unsplash 2_edited_edited.png

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.


User research, Wireframing, Design, Prototyping

User Research


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.



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."



  • Needs an affordable mode of transportation

  • She loves sushi, and Maru is her not-so-guilty pleasure.


  • 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



  • Customer needs a bike

  • Is not near a bike store

  • Limitations on travel


  • "I need a bike."

  • "Not near a bike store."

  • "I don't have a car."


  • Limited without a car

  • Tired from the work day

  • Wish for alternative way to shop online 



  • Searches online bike store

  • Views what's popular

  • Filters by price range


  • Carefully considers choice

  • Evaluates their price range

  • Day dreams of new bike


  • Grateful to shop online

  • Overwhelmed by options

  • Excited about new bike



  • Decides on a bike

  • Places order

  • Opts for pickup delivery


  • Imagines new easier commute with new bike

  • Plans bus route to pickup the bike when its ready 


  • Relieved bike is ordered

  • Excited for brand new mode of transportation



  • Gets email notification the bike is ready for pickup

  • Takes bus to bike shop


  • Anticipates new bike

  • Imagines life w/ new bike


  • Anxious about if they  miss the bus stop to get off on

  • Excited about new bike



  • Arrives at bike store

  • Confirms order with clerk

  • Heads home on new bike


  • Its fun to ride a bike

  • Traveling is much faster

  • Service was fantastic


  • 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.

Screen Shot 2024-01-28 at 7.15.55 PM.png

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?


  • 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.



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.


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

jessy-smith-zFOm6KzA-7g-unsplash 2.jpg
bottom of page