Case study:

CustomSpokes

Google UX Portfolio Project

Project Overview

The Problem:

Ordering custom cycles can be a hassle, involving multiple interactions with cycle dealers, uncertainties regarding part delivery, lack of transparency in cost, and absence of warranty coverage.

The Goal:

To design a website that provides a seamless, simplified and hassle-free ordering experience while ensuring competitive rates and warranty coverage.

Project Introduction

Introduction:

CustomSpokes offers budget-friendly custom cycles and parts for new and existing bikes. It simplifies technicalities, enabling those with limited tech knowledge to craft their ideal cycle. Our goal is to provide a seamless ordering process, competitive prices, and comprehensive warranties, ensuring a hassle-free experience.

Project Duration:

28 May 2023 to 2 July 2023

My role:

UX designer leading the CustomSpokes website design

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understaning the User

User Research - Summary:

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. During my user research, I uncovered common frustrations among potential customers when ordering custom cycles, including the hassle of contacting multiple dealers, uncertainty about costs and delivery times, and the lack of warranty coverage. Additionally, many users expressed a desire for a simplified approach that didn't require extensive technical knowledge.

User research - Pain Points

1

Limited availability

Customers struggle to find the exact components or customization options they desire, leading to a limited selection and compromising their ideal cycling experience.

2

High costs

Custom cycles are often associated with premium price tags, making them inaccessible for budget-conscious customers or those seeking cost-effective options.

3

Lack of warrenty

Customers hesitate to invest in custom cycles due to the absence of warranty coverage, raising concerns about potential issues or defects without proper protection.

User Research - Empathy maps:

Based on the user research, I created two empathy maps. which I then converted into a aggregated empathy map, So I could understand the potenial users of my website

User Research - Personas:

Based on the user research, I created two personas whose needs, goals, motivations and frustration represent the potenial users of my website

User Research - User journey maps:

Based on the personas, I created two user journeys. one for Rahula and other for Sophia. These journeys outline their interactions and experiences with the product, capturing the diverse paths and needs of our potenial users.

Link to User Journey map for Rahul and Sophia

Starting the design

Starting the design - Sitemap:

After completing my user research, I initiated my design process with the creation of a Sitemap. My goal here was to make strategic information architecture decisions that would improve overall website navigation. The structure I chose was designed to make things simple and easy.

Starting the design - Paper Wireframes:

After creating the sitemap, I moved on to drawing paper wireframes for each webpage, ensuring a responsive design for tablet and mobile devices. I carefully refined these sketches to ensure that the digital designs would solve user issues effectively. For the homepage, I focused on making it easy for users to build their custom cycles and choose parts, keeping our user-friendly approach in mind.

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

Starting the design - Digital Wireframes:

Once I made sure the paper sketches had all the things we needed, I moved on to creating digital versions. These designs were based on what we learned from user research and aimed to make our website easy to use.

Quick and easy access to movies to help users save time

Easy access to popular parts

Starting the design - Digital Wireframes:

Starting the design - Digital Wireframes Screen Size variation(s):

Starting the design - Low-fidelity prototype:

Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was customizing cycles and ordering parts, so the prototype could be used in a usability study.

View the low-fidelity prototype - Low-Fidelity Prototype

Testing and Iterating the designs - Round 1:

Summary

I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.

Parameters :

Methodology: Unmoderated Usability study

Location: Remote, India

Participants: 5 Participants, 3 Males, 3 Females and 1 Non-Binary Individual

Length: 1 Hour

Key Performance Indicators (KPIs):

Drop-off rates

Conversion rates

System Usability Scale

Findings

1

Users wanted a more obvious way to go back to the home page

2

Users wanted more information on the PDP page

3

Users wanted additional features in the cycle builder

Affinity diagram

After the usability study, I created an affinity diagram where I grouped similar observations in order to create themes

Iterations

Based on the insight from the usability study, I added a “Go Back to Homepage” button at the confirmation screen, to make it easy for users to back to the Homepage after they have placed an order

I made changes to the PDP page. I included a few things like Availability, whether the part would fit the cycle and the expected delivery date. This allowed users to make an informed decision before ordering the part.

I added a new screen that lets users pick between Mountain bike and Road cycle and I also added the price of the parts so users can make an informed decision.

Refining the design

Refining the design - Typography and color:

Typography:

Logo: Mozaic Italic Variable - Black

Heading: Effra CC VF - Bold

Information: Effra CC VF - Light

Color:

#006B3F

#F0EDEE

#000000

Refining the design - Mockups:

Homepage

Cycle builder

Parts

Checkout

About

Refining the design - Digital Wireframes Screen Size variation(s):

Refining the design - High-fidelity prototype:

Using the completed set of mockups, I created a high-fidelity prototype. The primary user flow I connected was customizing cycles and ordering parts, so the prototype could be used in a usability study.

View the low-fidelity prototype - High-fidelity prototype