Bikechain Website Redesign

Redesigned a website for a local bike shop to improve the navigation experience and to encourage customers to book bike repair appointments online.

role:
UX Researcher, UX/UI Designer
Timeline:
3 weeks
Project type:
Web design 
Preview of the website redesign for Bikechain

Background

Bikechain is a non-profit bike repair shop. Their mission is to make bicycle repairs more accessible for the wider community in Toronto. During the pandemic, demand for bikes in Toronto has gone up significantly, especially during the summer season. Bikechain is looking for suggestions to redesign their website and branding to create a better interaction experience with customers.

research

Competitive Analysis

I first analyzed Bikechain’s website and compared it with 5 other local bike shops to understand the industry landscape. I noticed Bikechain's website allows customers to book bike repair appointments online, which is a feature that many competitors do not have.  I also identified some improvement opportunities for enhancing the website experience.

Competitive analysis


Pie chart showing 86%

86% believe ingredients are important. However, they also don't understand all the ingredients listed on the packaging.

Pie chart showing 80%

80% feel sort of confident that the food they give to their dog is healthy.

Pie chart showing 7%

7% believe there is sufficient transparency in the dog food industry.

Person with frustrated expression
"I didn't like any part of the vaccine booking experience. It was hard to find information on where and how to book an appointment. Even when I do find information, it seems to conflict with other sources."
Person with disappointed expression
"My appointment booking experience was not great. There was no centralized portal. Information provided from one website can be different from one another, so that can be frustrating."

Understanding Bikechain customers

I interviewed 3 Bikechain customers via Zoom to understand what motivates them to use Bikechain's services so I can gain additional insights on how to improve the website experience. I was able to translate the key insights into design opportunities:

100% mentioned ingredients are important but it's difficult to understand chemical ingredients

75% also look at product reviews and nutritional content when picking dog food

75% indicated there is a lack of educational resources for finding healthy dog food

75% have had poor experiences with a dog food product due to health concerns

Customers pick Bikechain over other bike shops because of positive google reviews, reasonable pricing and convenient location

Design opportunity: highlight factors above in the home page

Customers prefer to book bike repair appointments online due to convenience

Design opportunity: Add a clear CTA for bike repair appointments

Participants want to know pricing for bike repair services before booking an appointment

Design opportunity: The service offering page should easily be discoverable with pricing details captured

Pie chart

80% indicated vaccine appointments were not centralized which made it difficult to find available appointments

Pie chart

80% did not feel informed when booking an appointment. They would like to know the following information: type of vaccine, eligibility criteria, potential side effects

Pie chart showing 100%

100% had to rely on sources that are not affiliated with the provincial healthcare system to find available appointments (i.e. Twitter, word-of-mouth)

Connecting the Dots

Define

Defining the target audience

With the insights gathered, I was also able to identify one distinct persona group: Oliver, a recreational cyclist in the city.

Persona

ideate

Information Architecture

With the research findings in mind, I made changes to the information architecture of the current website. I renamed the navigation menu categories so that it’s more intuitive to first time visitors.

wireframes

Wireframe for the home screenWireframe for the product detail screenWireframe for the search results screen
Wireframe of home page

Home Page

  • Added a clear CTA for booking a bike repair service appointment
  • Included a “Why Bikechain” section to highlight Bikechain’s mission and values as a non-profit organization
  • Highlighted services available at Bikechain
  • Added a testimonial section to highlight Google reviews
Wireframe of service detail page

Service Offering Page

  • Added a clear CTA for booking a bike repair service appointment
  • Provided an overview of all the types of bike repair services available
  • Explained how pricing works for each services
Wireframe

Appointment Booking Form

  • Added progress bar at the top to guide visitors through the appointment booking process
  • Added a back button so users can go back anytime and update the appointment details as needed
  • Added a step for the user to review their appointment information prior to finalizing the booking

Branding

As part of the redesign initiative, I created a new logo for Bikechain and chose a new colour palette and typography with the brand adjectives in mind:  active, reliable and friendly.

Style guide

usability testing

From here, I created a clickable prototype in Figma for usability testing. I recruited 5 cyclists (based on the persona type) for testing. The 5 participants were asked to complete the following tasks:

  1. As a first-time customer, learn more about Bikechain’s tune-up service with the website.
  2. Book an appointment for a tune-up service on July 20 at 4:00PM.

Measuring Success

All participants successfully completed the tasks and said the prototype was easy to use (100% completion rate). Participants said they preferred the new website design because of the following reasons:

Key Suggestions

Participants also provided valuable feedback to further improve the website design. With the feedback gathered, I was able to make revisions to further improve the experience. Suggestions were mostly content related:

final design

Play the video demo below to view the final prototype or explore in Figma.

Onboarding screen

Onboarding

Get familiarize with the app’s features with an optional onboarding tutorial.
Quick search screen

Quick Search

Scan the product barcode or type in the product name to easily look up any dog food products.
Ingredients breakdown screen

Ingredients Breakdown

Uncover the truth behind the ingredients used in dog food and learn how each ingredient impacts your dog's health.
COVID Alert mobile app home screen

Quick access to vaccine resources

Need more vaccine resources? Tap on the vaccine option on the navigation bar to learn more about the vaccine side effects and how to prepare for the vaccine.
COVID Alert app vaccine resource screen

Find out where to get vaccinated

Provide your address in the search bar to find the closest vaccine locations.
COVID Alert app results filter screen

Narrow down the results

Option to use filters to narrow down the results based on personal preference. Option to filter by the location type and/or vaccine type.

reflection

Achievements

Design with the user and business in mind: This project gave me the opportunity to design with the user and business goals in mind from start to finish. Participants were able to successfully navigate the prototype and all had positive feedback for the new website design.

Design with a time constraint:  Due to time constraint, I learned to plan ahead and set priorities in order to meet the target deadline. A Project Plan helped track my progress and ensured I stay on track.

Future considerations

Other Projects

Preview of the new design features for the COVID Alert mobile appPreview of the new design features for the COVID Alert mobile app
COVID Alert Mobile App
Preview of the Spot mobile appPreview of the Spot mobile app
Spot Mobile App