Bike Plant

ux / ui design

Bike Plant is a female-owned bicycle repair shop in the Bedford Stuyvesant neighborhood of Brooklyn, New York. Opened in April of 2021, the shop has had a successful start as a new business but has not yet had time to focus on their online presence.

The Problem

The current Bike Plant website features a limited menu of services and basic information about classes, but nothing further. There is no e-commerce currently, though the owner has noted that as an important feature to add. Most critically, the site does not currently function on mobile, which I hypothesize is where users are most likely to first encounter the business.

The existing mobile site:

Project Phases

Discovery

Market Research

To kick off work for this project, I wanted to get a better understanding of bicycle ridership in New York City, demographic trends and the current state of the bike market on a local and national level.

Statistics from the NYC Department of Transportation indicate that local ridership has seen explosive growth over the past 10 years, however during that time up to 40% of local bike shops have closed nationwide. This is a sobering figure for a new bike shop, however there's some silver lining in the fact that bike sales have increased as much as 40% during the covid pandemic.

Competitive Analysis

After getting a general understanding of the bike market, I wanted to take a closer look at other local bike shops - both direct competitors in the neighborhood as well as shops across the country that the Bike Plant owner referenced as shops that she would like to emulate.

Contextual Interviews

To learn more about Bike Plant customers, I went straight to the source. I visited the shop and interviewed 6 customers outside of the store, either after completing a purchase or while waiting for work to be done on their bike.

Summary of interview subjects and findings:

Additional inquiry into customer interest in learning about bike repair:

Key Findings:

As hypothesized, most customers find local bike shops through Google maps on their phones, frequently when a repair such as a flat tire is suddenly required

Key reasons for clicking through to the shop website include checking store hours, checking prices for basic services, and more generally, getting a sense of what to expect from the shop

Community is a key draw for cyclists. Several subjects referenced visiting bike shops just to socialize with the staff or being interested in finding events through shops

view full interview debrief report

Persona Development

The average Bike Plant customer is fairly young, independent and excited about exploring the city on two wheels. I developed personas that would communicate that spirit at the very first glance. Actual quotes from user interviews are prominently featured to enhance the characters.

Interpretation

Feature Roadmap

Based on stakeholder interviews, competitive analysis and customer feedback, I plotted a feature roadmap to determine what aspects of the new website to prioritize.

Storyboard

Talking to bike shop customers, a common story emerged: they are out biking when they get an unexpected flat. This is the moment when users tend to first find and engage with a local bike shop. I put together a storyboard to illustrate one user's journey of discovering Bike Plant and how they might continue to engage with the shop over time.

User Flow

The storyboard explores the whole user journey, but to take a closer look at the online user journey, I developed a user flow to determine the pages that would be the most important to develop and test with users.

Ideation

Wireframing

With the product roadmap and user flow as a guide, I began ideating and iterating on low and mid-fidelity wireframes of the site. Based on user research, I decided to take a mobile-first approach to the design as most customers are finding Bike Plant on their phones while on the go.

A strong focus was placed on making sure the most critical information (hours, directions and contact information) is quickly accessible to users on their bikes. I explored different navigation patterns and combinations of different floating action buttons to create the most streamlined interaction possible

Mid-Fidelity Prototype

As I iterated on the navigation, I also worked to develop a mid-fidelity prototype of the primary user flows for usability testing including the homepage, tutorials, product pages and checkout flow. Since most users are finding Bike Plant on their phones, a mobile version of the site was prototyped for user testing.

Experimentation

Usability Testing

I tested the prototype first with the shop owner who was very happy with the results but surprisingly made a few requests to make the site less sales focused.

I continued testing with 3 frequent bike riders, one of whom is also a former bike mechanic.

Given Task: You want to learn how to do some basic bike maintenance, specifically, how to patch a flat tire.

Subtask: purchase a repair kit so that you’re prepared for your next flat

User feedback on the tutorial screen:

Key Takeaways from User Testing:

FAB for the menu button: several users did not immediately notice the menu button as it does not follow the standard pattern of the top left or top right positioning, though all users liked the convenience of having it within thumb reach.

Tutorials:

3/3 users did not initially scroll down far enough to see the step-by-step instructions

Users reacted negatively to the prominent "recommended product" and the shop owner also requested that the recommended product be moved to the bottom or embedded into the dropdown section to ensure that the focus is on the content

Services: Several users referenced services as one of the most critical things they need to see when they come to a bike shop website. It may be worth adding a services section above the fold on the homepage

UX writing: The menu items “classes” and “tutorials” lack clarity for users. All users were able to infer the difference, but most were unsure of where to look first to learn how to patch a tire. It may be helpful to specify “in-person classes” and “online tutorials"

Evolution

Improvements from Mid-Fidelity Prototype

A stakeholder presentation and user testing uncovered some critical weak points in the design. A few notable revisions to address those weak points are detailed here:

+ To increase user awareness, the static positioning of the menu FAB was replaced with a dynamic animation on load

+ A link to the services menu is now featured above the fold - something users made clear was very important to them during testing.

+ The recommended product was embedded into the dropdown menu to make the tutorial less sales-focused

+ Step by step instructions were moved above the fold to make them more easily discoverable for users

High-Fidelity Prototype

With the revisions from user testing in place, I began to fully realize the design with photos and branding from the shop to refine the user interface.

view prototype

UI Kit

Responsive Site

While user research shows that Bike Plant customers are primarily accessing the shop website on mobile, the site is also optimized for users to access across all devices.

Lessons Learned

This project was all about balancing UX goals with business priorities (and tech capabilities of a small shop). Since bike mechanic classes are already a big part of the Bike Plant business model, an idea came up early on to develop that educational component into an in-depth online learning platform. While it would have been a really exciting and interesting project, it didn't make sense for this business, at least not right now.

Instead of creating an online community for Bike Plant, what I heard from the business owner and the local customers was that they all wanted in-person community, not online. I used that idea as my guide for this project - creating a website that users could easily access on the go while out on their bikes. Creating resources that would add value for local bikers and draw people into the in-person community that Bike Plant is working to cultivate.

work about connect