Just Bike It

Overview

Project Overview, Role and Responsibilities

In this case study, I designed a mobile app called Just Bike It to help people order bikes from a local bike shop in New York City. After designing the mobile app, I needed to determine if the main user experience, choosing and ordering a bike, is easy and intuitive for users to complete. The final prototype can be found here.
I used the design thinking process to empathize with users, define problem statements, ideate and iterate on prototypes.

preview

View Prototype

The project details are:

devices

The Project

Just Bike It is a mobile application for a local bike shop in New York City.

watch

Project Duration

March 2022 - July 2022 (3 months)

priority_high

The Problem

Users were having trouble with the end-to-end process of selecting and ordering a bike.

star

Goals

Create a streamlined and easy way to order and track a bike order.

person

Role

Lead UX Researcher, Lead UX Designer

list

Responsibilities

User research, Wireframing, Prototyping

Research

User Research, Personas, Problem Statements, User Journeys

For this project, I interviewed 5 different users about their experiences using bike shop websites and apps. I was able to get these volunteers through a fitness app that I use called Strava. I asked them all similar questions and was able to get a lot of great feedback. From there, I created user personas and empathy maps to better understand the users.This user group confirmed initial assumptions about our customers. However, the research also revealed more interesting problems that the users were running into. The users weren’t only concerned about saving time and being able to track their order live.  Other user problems included anxiety and various disabilities that made it difficult for them to get their orders.

The four main pain points that I observed during our user interviews were:

timer

Time

Users were spending too much time tracking down their orders and wanted a better way to be informed.

accessible

Accessibility

The app wasn’t straightforward and simple enough for some of our less tech-savvy users.

straighten

Sizing

Users were very anxious about being able to select a bike that was the right size. This concern was especially amplified due to the purchase being online.

assist_walker

Disabilities

People with certain disabilities or limitations might have trouble carrying large packages and wanted help, especially in buildings with stairs. In addition to this, assembly was a concern. Bikes can be very difficult and time consuming to assemble.

After completing the five user interviews, I created two personas along with user journeys:

Persona 1: Rita
Persona 2: Lars
  • Age: 25
  • Education: College
  • Hometown: Boston
  • Family: Single
  • Occupation: Writer
  • “A happy life starts by being healthy and fit.”
Rita is a journalist who focuses on writing on health and fitness. She is also an avid biker and buys a new bike every 5 years or so. When Rita orders a new bike, she wants to be able to have full transparency in the product when it comes to delivery status. If there’s a delay, she wants to be notified. Rita believes live tracking of a delivery is essential to online shopping.
Problem statement: Rita is a fitness focused person shopping online who needs live updates about her bike order so that she could know when it’s coming and if there are delays
  • Goals
  • To help people become happier and healthier through her writing
  • Be able to focus on her writing and her fitness
  • Order a bike and track bike delivery
  • Frustrations
  • “Sometimes there are delays and it’s not immediately obvious why.”
  • “I think it would be a good idea to send a notification whenever there’s progress in the order.
  • “Bike sizes are confusing. What is the right size for me?”
Rita’s primary concern is being updated whenever there is progress with her bike order. She wants to be notified of any delays. She is worried about the difficult and time-consuming assembly of the bike.
  • Age: 67
  • Education: College
  • Hometown: Salt Lake City
  • Family: Married, 3 children
  • Occupation: Retired
  • “Family should always come first.”
Lars is a retired school teacher. He bikes small distances on occasion. He enjoys spending time with his grandchildren. He wants to order a bike for his grandson, Timmy. Normally he would go to the bike shop to buy it in person, but the shop doesn’t have the bike Timmy wants. Lars isn’t comfortable ordering things online, but will do so for little Timmy. However, he wants the application to be easy and intuitive. He also wants to know if the box is heavy, since he lives on the third floor of a building with no elevator. He has trouble reading small text.
Problem statement: Lars is a retired grandfather looking to buy gifts for his grandchildren who needs to contact support when neededbecause sometimes he needs help with his order.
  • Goals
  • Wants to focus on being a good grandfather
  • To enjoy his retirement peacefully and quietly
  • Wants to order gifts for his grandchildren and know when the gifts are coming
  • Frustrations
  • “It would be nice to know how large of a box I should be expecting.”
  • “Tracking an online order shouldn’t be rocket science.”
  • “I want to see how long the order will take. When will it be delivered?”
  • “I was unable to contact support within the app.”
Lars isn’t buying the bike for himself. He often has trouble with mobile apps and is apprehensive about using it to track his order. He is worried about the assembly of the bike and is also concerned about getting the bike up 3 flights of stairs.

Wireframes

Paper Wirefames, Digital Wireframes, Low Fidelity Prototypes, Usability Studies

To start the ideation process, I sketched 5 rough ideas of what I wanted the app to look like. Sketches are a great way to quickly jot down some quick ideas. The goal here was to integrate body measurements into the bike shopping process seamlessly without making it the focus. Ideally, small filters would work best. After thinking through all of my ideas, I created a refined paper wireframe. In this refined wireframe, I decided to go with a list of bikes because it was the simplest way to show the bikes and their information. After this, initial digital wireframes were created in Figma.

The following images are five paper wireframes and one refined paper wireframe:

The following screenshots are two digital wireframes, created using Figma:

Getting filtering right was critical in the digital wireframes. In the first wireframe, users are able to filter by common filters like brand and bike type, but also to do the more unique filtering of weight and height. By integrating body measurements seamlessly into the filtering, users will be empowered to confidently select bikes that they know will be the right size for them. In the second wireframe, the activefilters are shown on the top of the screen. Below the filters, are a list of bikes with descriptions and prices. After digital wireframes were completed, I created a low fidelity prototype.

The following screenshot is a digital prototype, created using Figma:

In the low fidelity prototype, users can filter for bikes using unique features such as their height and weight. After selecting their bike, they go through a confirmation and checkout process. Users can then check on their order status through the Orders screen. Using this low fidelity prototype, I ran a usability study with our original 5 users to get some feedback.

Some of the feedback I got from the usability study was:

Prototypes

Mockups, High Fidelity Prototypes, Accessibility

I'm particularly proud of this loading screen. During the short load time, I decided to give the user something fun to look at, and also throw some helpful tips at them. In the prototype, the user is reminded to 'stay hydrated' and 'always wear a helmet. While they read these tips, they get to see a cool biker riding from left to right!
I split it the checkout process into steps to make sure the users were aware of what was happening. There is a very clear "Confirm" screen with the price of all their items. The users select their delivery options, including the option to receive the bike fully assembled.
This is where the magic starts to happen. The users can configure their size options in their 'Profile'. Once they do that, they can opt to only search for bikes that fit their measurements. This proved to be a seamless integration for our users, giving them high confidence in their purchases. Users can also set their preferred language and set permanent filters.
Here are a few more screenshots from the high fidelity prototype. The full prototype can be found here.

Users are able see which bikes fit them through a vibrant "Available in your size" tag. They can also track their bike orders effectively through an intuitive and easy to use tracker.

Going Forward

Takeways, Next Steps

The research in this project proved to be interesting. Talking to a diverse group of users helped me get insights that I otherwise wouldn't have gotten. For example, interviewing a 67 year old who struggles with technology helped me empathize with his anxiety about ordering a bike that he'll potentially have trouble assembling.

Users interviewed spoke positively about the Just Bike It mobile application. They were particularly excited about the body fitting functionality in the application. Being able to make sure that the bikes they ordered fit them gave them more confidence in their online purchase.

Going forward, there are three features I would like to add more features specifically for people who can't ride regular bikes. An example of this are people who ride recumbent bikes. Often times, people with back pain will ride recumbents to alleviate the stress on their backs. Emphasizing recumbents as an option is something that should be integrated into the bike application, to make it easy for these folks to find their bikes. The second feature I would like to integrate is a bike builder wizard. This would be an optional wizard that the user can opt to go through to build or find their own personalized bicycle. Questions asked in this wizard would range from "How tall are you?" to "Will you be riding with a child?". At the end of the wizard, users will be presented with a list of options to choose from. The third feature that I believe would be helpful is allowing users to store more than one set of body measurements in their account. For example, a user who is buying a bike for their child would be able to store their child's measurements alongside theirs in their account.

Thank you so much for taking the time to read through this case study. The link to the final prototype is here. Feel free to reach out if you have any questions or comments!
Overview
Research
Wireframes
Prototypes
Future