Website Revamp: Passion Gadgets

Introduction

Passion Gadgets is a bike shop in Singapore that prides itself on high quality bikes, competitive pricing and excellent bike servicing.

My team and I were tasked by Passion Gadgets to redesign their online shop to improve the user experience and check out rate.

User Interviews

We began our research by interviewing bike owners and customers at Passion Gadgets. In total, we conducted 20 interviews.

We asked questions with the intention of finding out what motivated people to buy bikes and what they looked out for when buying a bike.

For Passion Gadgets customers, we asked what they liked and disliked about their experience buying from Passion Gadgets.

Affinity Mapping

After the interviews, our team conducted affinity mapping. Below are some of the key insights we found:

Price is an important factor for customers
Experienced riders want to compare bikes so they can narrow down their options
Novice riders want recommendations based on their cycling needs
Customers don’t know the difference between Passion Gadgets test centre and retail store, and often go to the wrong unit

Research

Personas

Based on our affinity map findings, we came up with 2 Personas

Felicia the First-Time Bike Buyer

“I don’t know much about bikes, so I will rely on the salesman for recommendations”

Goals

To own a bike of her own so that she can join her friends when they cycle without having to rent a bike

Behaviors

Asks friends for recommendations
Conducts basic research and reads online reviews
Tends to look at bike aesthetics
Shortlists stores with test rides
Seeks professional advice from bike store staff

Frustrations

Annoyed when she arrived at Passion Gadget’s retail shop at Leong Huat Building only to be informed that she had to walk to a neighbouring building to test ride bikes
Does not understand technical information (e.g. Shimano gear, crank etc.)

Felicia’s Customer Journey Map

Ben the Bargain Hunter

“I know what kind of bike I want, but I also want the biggest bang for my buck.”

Goals

To buy a new bike which meets his minimum requirement in terms of specs
To get a deal that provides him with the most value for his money

Behaviors

Browses the product catalogue to shortlist bikes that fit his budget and technical expectations
Compares shortlisted bikes to determine which is the most value-for-money
Checks sale page to look for other attractive deals
Looks out for freebies and complimentary servicing
Purchases from store with the most competitive pricing

Frustrations

Finds it troublesome to compare bikes. Sometimes forgets the specs of the first bike and has to go back and look at it again.

Ben’s Customer Journey Map

Problem Statements

We then generated problem statements based on the goals and frustrations of our 2 personas

Problem Statements for Felicia

Felicia needs a way to get bike recommendations based on her cycling needs so that she can find a bike that suits her.
Felicia needs a way to know the difference between the retail store and test centre so that she can visit the right place to test the bike.

Problem Statement for Ben

Ben needs an easier way to compare bikes so that he can narrow down his options and buy a bike which is value for money.

Solutions

Online Bike Quiz to Recommend Bikes

Being a novice rider, Felicia needs recommendations when buying a bike.

We designed an online bike quiz to recommend bikes based on users’ riding preferences. The quiz contains a few layperson-friendly questions. We came up with the quiz questions by asking Passion Gadgets staff what questions they ask novice riders before recommending a bike.

The bike quiz would help novice riders like Felicia narrow down their options when buying a bike.

Store Directions & Guide

New customers to Passion Gadgets (like Felicia) often are unaware that the retail store and bike showroom are at 2 different locations.

We created a buyer’s guide for the website to inform customers where they should go and what they should do at each step of their journey. The guide also includes address information and a map.

This guide would reduce frustration for users by informing them upfront that there are 2 different locations, and which location they should go to.

Bike Comparison Feature

An experienced cyclist (like Ben) needs a way to compare the specs of multiple bikes to determine which one best meets his needs and provides the best value for money.

My team and I took inspiration from other online shops and designed a bike comparison feature which allows up to 3 bikes to be compared easily.

Other Improvements

Encouraging Customers to Book Test Ride Appointments

As can be seen from both Felicia & Ben’s journey maps, a common pain point is when they have to wait for their turn to test ride bikes.

Although Passion Gadgets does allow customers to book a test ride appointment in advance to avoid waiting, we found that this feature was under-utilized. Hence, we wanted to encourage customers to use this feature by adding a “Book Test Ride” button at end of the bike quiz, at the comparison page and at the product page for all bikes.

The hope is that by making the booking feature more visible, customers will be more likely to use it and will not have to spend time waiting for test rides.

Navigation Bar

The original website had multiple top navigation bars. We condensed them into just one by reviewing the links and keeping only the essential ones.

Footer

The original website footer was very long and contained several unused or duplicate links. We removed them and made the footer cleaner.

Product Thumbnails

The original product images were cluttered with many smaller images within. We removed most of them and only kept the most important information such as discount percentage and available colours. The idea is to reduce cognitive load for users.

Prototype v1

We implemented our designs and came up with our first prototype.

Usability Testing

We conducted 7 in-person tests with customers at Passion Gadgets to obtain feedback on our prototype. We asked users to perform 3 tasks:

Find a bike that suits your needs
Compare the technical specs of 3 bikes
Purchase a bike and find out what is covered under the warranty

We wanted to find out if users encountered any difficulties while performing these tasks. We also asked users what they liked and didn’t like about our prototype so that we could improve it.

Our prototype received some positive feedback. Users said that:

The buyer’s guide is useful for first timers,
They would be keen to use the bike quiz, and that
The comparison page looks good.

Iteration

Making the Bike Quiz more Visible

We observed that all of our users did not try out the bike finder quiz when we tasked them to find a bike that meets their needs. This was despite the fact that it was displayed in a large hero image on the home page. When we asked them why, they said that they did not notice it.

We realized that the bike finder quiz text was not very visible against the background image, which made it hard for users to read it.

Hence, we changed the background image and text colour to improve readability. We also added a green call-to-action button so that it is more obvious to users that they can click on it.

Bike Finder Quiz Question

One of our bike finder quiz questions asks users about their main reason for cycling. Some of our testers told us that it was difficult to select just one reason. They also told us that fitness is practically a universal reason for cycling, so it is redundant to be one of the options.

We thus tweaked this question and allowed multiple reasons to be selected. We also removed the Fitness option as it was deemed redundant.

Before

After