Derek
Derek is a paralympic champion and veteran who needs an wasy way to find and customize a bike based on their needs and style because they like to make outdoor biking.
Case Study
Custom Bikes Responsive Website
Project Overview
The Problem
The need of creating a better personal identity has made made people look for more personalized items that they can have. One item they are interested in is a bike customized based on their specifications.
The Goal
Create a responsive web app that allows people to customize a bike and order it online.
The Product
An easy to use web app that allows the user to customize a bike and order it online. The CustomBikes website is owned by a family company that builds customized bycicles for over a decade.
My Role
UX designer leading the responsive website design from conception to delivery.
Responsibilities
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs, determining information architecture, and responsive design.
Project Duration
August 1, 2021 to August 24, 2021
Understanding the User
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research were the people with powerful personalities that feel the need to have items that are specially built for them, based on their specifications. This user group revealed other user problems like obligations, interests, or challenges that make it difficult to find bike shops that are willing to make customizations, not even simple ones.
Personas & Problem Statements
Sofia
Sofia is a busy young student who needs a personalized bike because they want to have a bike that fits their style and personality.
User Journey Map
I created a user journey map of Derek’s experience using the site to help identify possible pain points and improvement opportunities.
Starting the Design
Sitemap
I started work on designing the responsive website by using the sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience across devices.
Paper & Digital Wireframes
After ideating and drafting some paper wireframes, I created the initial designs for the bFit app. These designs focused on delivering personalized guidance to users to help them create a workout schedule and workout even more when possible.
Usability study findings
To prepare for testing, I created a low-fidelity prototype. I used the prototype to conduct an unmoderated usability study with 5 participants. Here are the main findings uncovered by the usability study:
Choose
Some people were confused by “Start Customizing” button that was not doing anything unless you select an item.
Customize
It was unclear for the user how they will be able to customize the bike because we have not shown the bike options.
Account
During the checkout process, there wasn’t a clear way for users to log in to their account to pre-fill previous billing and shipping info.
Refining the design
Mockups
Based on the insights from the usability studies, I applied design changes like providing a clear section for users to customize the bike.
Accessibility Considerations
1. I used headings with different sized text for clear visual hierarchy.
2. I used landmarks to help users navigate the site, including users who rely on assistive technologies.
3. I designed the site with alt text available on each page for smooth screen reader access
High-Fidelity Prototype
The high-fidelity prototype followed the same user flow as the low-fidelity prototype, including design changes made after the usability study.
Responsive Designs
I have made each screen’s design to ensure a cohesive and consistent experience across devices.
Going Forward
The Goal
Impact
Users shared that the app makes it very easy for them to find the custom bike they were always looking for. One quote from peer feedback was that “CustomBikes have delivered me an awesome bike which I have personally customized on their website, I love it!”
What I learned:
I learned that even though the problem I was trying to solve was a big one, diligently going through each step of the design process and aligning with specific user needs helped me come up with solutions that were both feasible and useful.
Next Steps
1. Research
Conduct research on how successful the app is in reaching the goal to help people make more physical activity.
2. Features
Find if users might be interested in other types of custom bikes and see if we can add more customization options.
3. Rewards
Provide rewards to users that create the most unique bikes to create more engagement.