top of page
Group 2602.png

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
Group 2697.png

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.

Group 2705.png
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.

MacBook Pro 16_ - 1.png


The following personas represent the user segments for the mobile app.
Personas explain the user's goals, challenges, demographics, and behavior.

UX Persona.png

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.

Journey map.png

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.

empathy map-2.png

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?

Screen Shot 2022-03-16 at 19.28.png
Screen Shot 2022-03-16 at 19.29.png
Screen Shot 2022-03-16 at 19.29-1.png
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.

Group 2682.png

Low & High Fidelity Design

Low-fidelity wireframes sketched on the paper represent the skeleton of the interface

IMG_8104_jpg 1.png

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.

Screen Shot 2022-03-16 at 20.03 1.png

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.

Frame 2694.png

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.

Group 2712.png
Group 2714.png
Group 2715.png

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.

main user flow-desktop-2 1.png
Desktop version
main user flow-mobile-2 1.png
Mobile (responsive) version
Google Chrome - Dark.png
13 Pro - 2.png
Google Chrome - Dark3.png
13 Pro - 1.png
Google Chrome - Dark4.png
13 Pro - 3.png
Google Chrome - Dark6 1.png
13 Pro - 4.png
Google Chrome - Dark6 2.png

404 Page

Design System 1.png

Going Forward



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

Group 2717.png
Group 2716.png
Group 2718.png

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.

bottom of page