top of page
Efficient flow to order custom bicycle online
Custom Bicycle
order
Overview
Relay
Visual & UX/UI Design, Research, Concept Development
Problem
People have some customization problems while ordering bicycle online.
Duration
1 month
goal
The website provides to users an efficient flow to order custom bicycle online by letting users see the all features together and choose the best selection for them.
User Research
one
pain point
Users are hazy about how their selection will fit on the bicycle.
2
pain point
Users expect to see their customization selections on the bicycle.
3
pain point
Users want to contact with the brand owner easily.
persona
“Cycling is an activity I feel good about and I want my bicycle to be special to me.”
Goals
Less cluttered navigation and layout to customize options.
More accessible elements for easier navigation.
Accurate and interactive way to order bicycle.
Frustrations
''Custom options and website layouts are confusing.''
''I'm not sure how the features I chose will fit on the bicycle.''
''Sometimes website flows make me feel like I'm not in the right place.''
Kerem
Age:
Education:
Hometown:
Family:
Occupation:
25
Business Administration
Ankara
living with partner
Manager at a big company
Kerem is a manager at a big company who lives with their partner. They love cycling as a leisure activity especially at weekends and motivated with it.
They are frustrated when they order a new bicycle because websites have not effective navigation to customize bicycles. Layouts and sizes of buttons seem confusing to them. They are also worried that sometimes the images on the website do not match the reality. They want easier, confidential and accessible ways to order bicycle online.
Kerem is a busy professional and bicycle lover who needs to order custom bicycle online because they want to be able to see and select their customization options on the screen easily.
Problem statement
Empathy Map
User Journey Map
.png)
Goal: Order bicycle with customization options on the website
Sitemap
.png)
Digital Wireframes
desktop
mobile
Lo-fi prototype - User Test Insights
-
Users are comfortable with the navigation.
-
Users are glad to see customization process in order.
Final Design
provides user to contact with the owner easily.
Displays the price of the current selections. It changes automatically according to user's preference.
Allows to skip next step to customize order
Mockups - Mobile Version
Mockups - Desktop Version
Accessibility Considerations
one
I combined color, text and graphical objects within enough contrast for better access..
2
I pay attention to consistency between the pages. Users can proceed without confusion.
3
Titles of steps are clear and descriptive to help continue to order in short time.
reflection
This project is a part of Google UX Design Certificate. I used Adobe XD to create interfaces and prototypes. It is a web project and I develop two screen versions which are desktop and mobile.
bottom of page