Overview
Meet CustomSpokes
CustomSpokes helps people build or upgrade their cycles without any confusion. It makes the process simple, even for those who don’t know much about bikes. CustomSpokes offers easy ordering, affordable prices, and good warranties. It is designed to make getting a custom cycle smooth and stress free.
My role
I worked as the sole UX designer, handling everything from understanding user needs to creating wireframes, prototypes, and testing the final design.
Timeline
The project took place from 30 May to 2 July 2023.
The Problem
Ordering a custom cycle is a hassle. People often have to visit different dealers, deal with unclear pricing, worry about whether parts will arrive on time, and don’t get any warranty support.
The Goal
To design a website that makes ordering a custom cycle simple and stress free by providing clear prices, easy steps, and reliable warranty support.
Design Process
Research
Ideation
Prototyping
Testing
Research
Understanding the Frustrations
Before jumping into design, I spoke to a few cycling enthusiasts and friends about their experience of building a custom cycle and buying cycle parts. A few common frustrations kept coming up…
Limited Availability
People often struggle to find the exact parts or customization options they want. This limited choice forces them to compromise on the cycle they had in mind.
High Costs
Custom cycles usually come with high price tags, making them hard to afford for people on a budget or anyone looking for a cost friendly option.
Lack of Warranty
Many hesitate to buy custom cycles because there’s often no warranty. This leaves them worried about defects or problems with no proper protection.
Getting Into the Rider’s Mind
I created empathy maps to better understand what customers think, feel, say, and do when trying to buy or build a custom cycle.
Meet the Riders
To guide my design decisions, I created personas to capture the goals and frustrations of people looking to build or upgrade their cycles.
The Road to a Custom Cycle
I mapped the user journey to understand how customers search, select, and order custom cycles and also where they face frustrations along the way.
You can view the full user journey maps for both Rahul and Sophia here↗
Finding the Gaps
I conducted a competitive audit to understand how other platforms handle custom cycle shopping, and to find opportunities where CustomSpokes could stand out.
You can view the full competitive analysis table here↗
Areas for Improvement
Visually Unappealing Designs
Most websites feel plain and outdated. They don’t grab attention or make the experience enjoyable from the start.
No Personalized Recommendations
Websites don’t suggest parts or builds based on user needs, leaving customers confused or overwhelmed with options.
Complicated Checkout Process
The checkout flow is often long and confusing, which makes users frustrated and more likely to drop off.
Lack of Parts Information
Many websites don’t provide enough details or specs about the parts, making it hard for users to make confident choices.
Poor Accessibility Standards
Inconsistent colors, bad contrast, and lack of screen reader support make the experience harder for users with disabilities.
Ideation
Designing the Route
After completing the research, I started the ideation process by creating a sitemap to organize all the pages and features so users can easily find what they need without feeling overwhelmed.
Pedaling Through Ideas
To quickly explore different ideas, I used Crazy Eights, where I sketched out eight different ideas in eight minutes. Some of these early concepts helped me shape the wireframes I designed next.
Drawing the Blueprint
I sketched paper wireframes to explore layout ideas and focus on structure. I sketched out different versions of the home screen to see which one felt the most simple and intuitive.
I also sketched versions for mobile and tablet to get an early sense of how the design would adapt across devices.
From Sketch to Screen
After finalizing the paper sketches, I moved to digital wireframes in Adobe XD. This helped me refine the layout, add key elements, and start shaping the overall user flow.
Adapting for Mobile
I also designed the mobile version to make sure the website works smoothly on smaller screens, while still maintaining the same functionality as the desktop version.
The Early Prototype
After designing the digital wireframes, I built a lo-fi prototype to test the basic user flow and also prepare for the usability testing
You can view the prototype here↗
The First Test Ride
Before jumping to the high fidelity phase of the design, I ran a usability study to get feedback on my designs and use the insights to improve the wireframes further.
The Setup
Parameters
Methodology: Unmoderated usability study
Location: Remote (India)
Participants: 5 total – 4 males and 1 female
Length: 30 minutes per session
KPIs
Time on task
Conversion rates
System Usability Scale
Organizing the Insights
After the usability study, I organized the feedback into an affinity diagram to identify patterns and group similar observations. This helped me identify themes and focus on areas for improvement.
Areas for Improvement
Homepage Navigation
Users wanted an easy way to return to the homepage after placing an order. So I added a “Go Back to Homepage” button on the confirmation screen to make navigation smoother.
Product Details Page Updates
The PDP (Product Details Page) needed more clarity, so I added key details like part availability, whether the part fits the user’s cycle, and the expected delivery date.
Cycle Type Selection
I added a new screen that lets users choose between a mountain bike or a road cycle right at the start.
Prototyping
Visual Foundations
I started the high fidelity phase by creating a style guide to set the visual foundations of the website.
The Final Look
Based on the style guide, I created mockups that completed thelook and feel of the website.
Bringing the Ride to Life
After designing all the screens, I created the hi-fi prototype to test the overall experience and prepare for the second usability testing. I also prototyped the entire cycle building experience, which took quite a bit of time but was key to making sure the flow felt complete and realistic.
You can view the prototype here↗
The Second Test Ride
After creating the hi-fi prototype, I ran a second round of usability testing to see how users interacted with the full design. This helped me validate and make final tweaks.
The Setup
Parameters
Methodology: Unmoderated usability study
Location: Remote (India)
Participants: 5 total – 4 males and 1 female
Length: 45 minutes per session
KPIs
Time on task
Conversion rates
System Usability Scale
Organizing the Insights
After the second usability test, I organized the feedback into an affinity diagram to identify patterns and group similar observations.
Areas for Improvement
Clear Base Pricing
Users wanted to know how much a cycle would cost upfront. So, I added the base price of each cycle early in the flow to help them make informed decisions.
Multiple Product Images
Participants felt that seeing just one image wasn’t enough. I added an option to view multiple images of each part or cycle, making it easier for users to check details and feel confident before ordering.
Outcomes and lessons
The Result
The final prototype was well received by users. They liked how simple the cycle building process felt, and also appreciated the clear prices and detailed information which helped them in their decision making process. The changes from both testing rounds made the experience easier, more transparent, and more helpful for users.
What I learned
This project taught me how to design a website from start to finish. Since websites usually have more content and pages, I learned how important it is to guide users clearly through pages and menus.
I also learned how to use Adobe XD for the first time. It felt a bit different from Figma at first, but I got the hang of it. I also learned features like components, repeat grids, and layout grids, which helped me speed up my design process and also keep everything consistent.
Improvement Opportunities
Looking back, I probably spent too much time designing the cycle building flow. I got caught up in the details and could’ve balanced my time better.
I’ll also focus on using more advanced tools like components, layout grids, and repeat grids from the start. This will help me keep things consistent and save time during the design process for my future projects.
Thank you!
And with that… I’ve crossed the checkered flag on CustomSpokes :)
Thank you so much for taking the time to review my case study! You can check out more case studies below.
SeatFoodie
An all in one movie theatre app that lets users book tickets and order snacks without standing in long lines
Google UX Certificate
Mobile Apps
View case study
SkillSeekers
A job search platform that helps fresh graduates find career opportunities tailored to their skills and interests in their city
Google UX Certificate
Mobile Apps
Websites
View case study