Project Overview
Problem Statement
Cycling has long been one of the fastest, most flexible, and most reliable methods of transport. One in 10 American adults reported having ridden a bike for the first time in a year (or longer) since the onset of Covid-19, according to research by People for Bikes.
Since 2020 Covid-19 brought about a dramatic increase in bicycle sales in response to the pandemic, leading to a so-called “bike boom”.
The phenomenon has been well-documented: suppliers have struggled to keep up with demand; cities have redesigned their streets to accommodate an influx of riders; manufacturers are trying to forecast the longevity of the bike’s newfound popularity. Meanwhile, bicycle retailers cannot meet the current demand for road bikes in the $500-$1,500 range, leading consumers to look online for used bikes, fix up their old two-wheelers, or shell out cash for more expensive models.
Possible Solution
Winslow Bikes store will provide a huge range of bicycles with clear stock and delivery expectation dates. Professional consultants will give all the information about upgrading and fixing clients' old models to save money and start to ride right now. 2nd hand department will provide the clients bicycles after overall repair and diagnostic with an extended warranty. Winslow Bikes is a well-designed online shop with a responsive design for bikes and accessories from famous brands in the world with outstanding services.
My role
UX designer leading the responsive website platform design from conception to delivery. 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
Tools used
December 2021 to February 2022
Design Process
For this project my responsibilities included, UX strategy and visual design
Qualitative Research
I interviewed eleven people over the phone, Zoom, and Google Forms.
The goal was to understand the challenges in the auto service industry from the consumer perspective.
-
What kind of work do you do?
-
How often do you use your bike?
-
What kind of a bike do you have (mountain/trial/other)?
-
Do buy your bike/parts online?
-
How often do you make some changes/upgrades?
-
What is the average cost of the bike?
-
How often do you have problems with parts/bike?
-
What problem do you face when you looking for a new bike?
Key insights derived from the interviews
-
Usually, families have bikes for kids and at least one bicycle for adults to support kids in this activity.
-
Most people prefer to go to the physical shop to choose their bikes. They don't trust online shops most of the time.
-
Advances and professional riders are opposite and know exactly what they need and order bikes/parts online.
-
People look for branded bikes and trust them more than the unknown (not famous in their area) brand.
-
Not all people are sure what kind of service their bikes need during the preservation period in winter and rainy weather.
-
Additionally, only professional and advanced bikers know what and when they need to change and what kind of upgrade will provide better results and experience.
Quantitative Research
I facilitate an online survey using Google Forms to learn the potential users needs and wants. Eleven participants assisted me in framing the problem I opted to solve via the online store.
Shopping bikes online
Number of bikes in family
Average bikes price
Key insights derived from the survey
Most of the users have at least one bike. Every couple of years, they change/upgrade them for their growing kids or themselves.
Users are ready to pay more than a thousand dollars for their bike, which can expand the price and brand range for the shop.
People still prefer physical bicycle shops. Not always online dealers shops can provide relevant information, size, and support on/offline. That's why people choose the higher prices from the brand shop and moved from the better price on dealer's websites.
Personas
The following personas represent the user segments for the mobile app.
Personas explain the user's goals, challenges, demographics, and behavior.
User Journey Map
I made a visual representation of the user's journey across all touchpoints of our application to understand where it’s possible to improve the user experience.
Empathy Map
The empathy map helped me gain perspective around thoughts and feelings. The data in the empathy map is based on insights from user interviews. The following process defines the target audience better and illustrates their needs and actions.
Competitive Audit
During this step, I conducted a Competetive Audit.
-
Where and how do they display information?
-
Are there user-centric, easy-to-navigate mobile apps or online experiences?
-
What are the strengths and weaknesses?
The conclusion from the competitive analysis gave me an idea and better understanding of what my customers will expect from my website.
User Flow
This user flow was created to illustrate how the user will navigate through the website.
Information Architecture
IA Map of the final product helps organize the pages' hierarchy, content, features, ultimate user experience, and interaction with the website.
Low & High Fidelity Design
Low-fidelity wireframes sketched on the paper represent the skeleton of the interface
Low Fidelity Digital Wireframes
The basic structure of the wireframes can be changed per usability testing outcome quickly and efficiently, making the process iterative before development efforts.
Digital Wireframes in Adobe XD.
Usability Study
I conducted two rounds of usability studies. After the first round, I was ready to create Mockups. In the second round of the usability study, I used a High Fidelity prototype that revealed additional refinements.
Refining the Design
I conducted two rounds of usability studies. After the first round, I was ready to create Mockups. In the second round of the usability study, I ran High Fidelity prototype that revealed what aspects of the project I still needed to refine.
Early designs provided a page of primary services to select. Initially, I used a carousel format to showcase the services. The usability study revealed a need to shift from the carousel concept to the hotspots with clear icons representing each service.
High Fidelity Digital Wireframes
I used Figma to build a realistic representation of my app. Then, I tested specifically UI components and interactions of the primary user flow within a screen to understand the look and feel of the app from the user's perspective.
Desktop version
Mobile (responsive) version
404 Page
Going Forward
Takeaways
Impact
Winslow Bikes has met the expectation of the users about how clear and well designed an online shop must look. All the user-centered processes are working smoothly and intuitively. Users move from desktop version to mobile browser and backward easily.
One quote from peer feedback:
"I would like to use this website in a real-life instead a lot of the same I used before"
What I learned
Learning about the impact of bicycles in real life, especially during the pandemic in the world was so exciting. I spoke to a lot of people and met their problems with the hundreds of new grows shops that trying to "hipe" on this situation, struggled to keep up with demand, but every time lose it on good User experience and web design.
Another part of this study was to think more openly and create a good online shop with a responsive design for all the screens. Usability studies helped me to polish my product and I think it looks very nice now.
Next steps
Work on the design to provide high-end quality images, including 3D modeling and the "See It in Your Space" function. Another part of the work will be on bikes customization and customer service before and after the order.
Conduct another round of usability
studies to validate whether the pain
points users experienced have been
effectively addressed.
Conduct more user research to
determine new needs and wants.
Introduce additional functionality
per user’s feedback.