top of page
Efficient flow to order custom bicycle online
cover1.jpg

Custom Bicycle 
Order

Overview

Role

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

1

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

Allura - Avatar.png

Empathy Map

empathy map.png

User Journey Map

User Journey Map_website project (1).png

Goal: Order bicycle with customization options on the website

Site Map

website project sitemap (3).png

Digital Wireframes

Desktop

Web 1920 – 7.png
Web 1920 – 5.png
Web 1920 – 6.png

Mobile

iPhone 13, 12 Pro – 3.png
iPhone 13, 12 Pro – 5.png
iPhone 13, 12 Pro – 4.png
iPhone 13, 12 Pro – 1.png
iPhone 13, 12 Pro – 2.png

Lo-fi prototype - User Test Insights

  • Users are comfortable with the navigation.

  • Users are glad to see customization process in order.

bicycle lo-fi.png
Web 1920 – 13.png

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

Web 1920 – 13.png
Web 1920 – 12.png
Web 1920 – 11.png

Mockups - Mobile Version

Mockups - Desktop Version

iPhone 13, 12 Pro – 6.png
iPhone 13, 12 Pro – 7.png
iPhone 13, 12 Pro – 8.png

Accessibility Considerations

1

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