Chainring Responsive Website

Client:
Role:
Duration:

Student Project
Product Designer
Four weeks (part-time)

Background

This project was an assignment for Designlab’s UX Academy. Neighborhood bike shops face stiff competition from online sales, subsisting on narrow margins from repair and in-person sales. How can a website help them reach out to new customers and bring existing ones back again?

Clickable Prototype

You can access the clickable prototype by clicking the link at the left. It's designed to test the following tasks, so not every affordance is clickable:

  • Book a repair appointment
  • Find gear cables on the site
  • Purchase gear cables

Process

Research

Get up to speed on the product landscape and understand potential users.

Define

Based on insights in research data, get clear on the problems to solve and who to solve for.

Prototype

Quickly build a prototype to test whether users can accomplish core tasks. Visual design fidelity relates to project needs.

Test

Test prototype with users representing target demographic. Come up with insights from this data to spotlight usability issues and reframe design questions.

Research

The research phase included both secondary and primary research. Secondary included a quick survey of the home furnishing purchase space and a more focused competitor and adjacent analysis. I also conducted user interviews to get a closer look at how users were actually buying furniture.

Market Research

Repairs and maintenance

Running any bike shop is tough in the age of e-commerce, but times are especially lean for small, independent bike shops. Bike sales are the most profitable activity, followed by repairs, although the former is a much larger share. Roving, on-demand bike maintenance startups aim to compete with shops for these last scraps, but the profitability of this model is still unclear.

$55.3 Billion

The value of the US home furniture market in 2019.

76%

More than three quarters of revenue comes from online sales

User Interviews

To better understand how potential users were approaching bike purchase and repair in my area, I reached out to six participants. These interviews revealed a more detailed picture of how customer loyalty, and the presence of an unexpected class of bike owner whose attitudes about DIY maintenance were rooted in family tradition.

What digital or brick-and-mortar stores do cyclists buy bikes from?
What research do buyers or repair clients do pre-purchase?
Why do cyclists choose to buy or get repairs from one place or another?
How do people find and decide on a bike repair shop?
Are there other relationships relevant to purchase and repair decisions?
What products are involved in customers’ bike purchasing and maintenance?
How do people feel about brick-and-mortar bike shops?

Define

With the help of empathy mapping and personas, two distinct user types emerged from the interview data. Based on these trends, I set the scope for the ideation and prototyping by defining design problems.

Affinity Map

Personas

Self reliance and talking humans

Based on my interviews, I found two clusters of bike repair and purchase behavior motivated by either self-reliance, or a high value on in-person interaction.

One was defined by the coincidence of DIY skills and tradition, giving them the confidence to purchased used bikes and perform small repairs. Unexpectedly, these users were often apathetic about repair, viewing it as an act of fiscal responsibility and self-reliance rather than a hobby.

The other was more likely to rely solely on shops for purchase and repair, focusing on enjoying the experience of cycling. They disliked having to understand what made different bikes more or less expensive. These users were more loyal, preferred brand names, and valued in-person demos of bikes.

User Journeys

Dividing the site by user flow depth

Personas would end up seeing different parts of the site, with Allison reaching a greater depth. Because of Christian's focus on in-person demonstration and building a strong shop relationship, his goals with the site are really to help him visit in person. Allison would not only end up on parts pages that Christian would not see, but would likely bounce back and forth from the site to Youtube.

Design Questions

How might we support Allison as she weighs different options and compares information with other sources?

How might we help Kevin get into the shop for purchasing or repairs more quickly?

Prototype

To satisfy these different purchase and repair journeys, I created a site that both allowed easy, streamlined browsing of bike stock, and featured a comprehensive parts list with basic information about common DIY maintenance.

Low-fidelity Wireframes

Quickly explaining product differences

Hand-drawn sketches of the interface being discussed

I opted for a design of the inventory list that included some type next to the product images. For both categories of user, explaining features like disc brakes or frame materials helped make informed decisions. Otherwise, telling bikes apart from appearance, brand, and price alone is difficult.

Spotlighting inventory in a quick read

Hand-drawn sketches of the interface being discussed

I settled on using text links in a descriptive paragrah to put a shorter summary of key ideas at the top, helping get to bike inventory sooner. For less DIY-minded cyclists, getting a quick sense of bike inventory was helpful in determining whether to visit a shop.

Site Structure

Helping DIYers help themselves

The site gave weekend riders a quick tool for checking out the shop and making an appointment. For DIY-minded users, I created a menu to help select parts by bike system, including less lengthy descriptions on the filtered list/grid view of items.

Branding

Fun, local, professional

Even the most experienced cyclists that I interviewed bemoaned bike shop snobbery. Many interviewees discussed the importance of customer service and person-ability in choosing a shop for repairs. Thus, being approachable was an important brand attribute. Most casual cyclists mentioned having fun with friends, so I made sure the identity spoke to this while still seeming competent and professional.

Test

I used Maze to conduct unmoderated, remote testing of the main user flows with a mid-fidelity prototype. Users were able to complete all the main tasks.

Insights and Changes

Taking advantage of multiple routes

Participants didn’t overwhelmingly choose one route into the next screen, validating the choice to provide multiple ones. The most popular route was through the diagram, instead of via search. This makes sense, since as only one of the original participants recognized, gear cables are part of the bike’s shifting system. This suggests that the site’s multiple routes do in fact cater well to a range of knowledge about bike maintenance.  It also suggests that a few examples of items found in each category would be helpful.

Next Steps

Making the personal digital

User interviews revealed the value of seeing things in person, and speaking directly with staff. How might we use virtual assistants, embedded video, augmented reality or live feeds to help connect potential consumers with the in-person shop experience?

Rethinking equipment categories

Confusion over the categorization of "gear cables" (a term for the cables that control shifting) suggested that there was a lot of room to improve on the information architecture of the site. A card sort would definitely be part of further development.