Bike shop page design process

4 min readMar 19, 2021

Main features

Creating a study case narrative for bike shop page, that start’s natively on the web, adapted for a 1440x900pixels screen, but keeping in mind that is going to be scaled down to a mobile version;

Having a theme that evokes nature, at the same time a hard mechanic/technical feel to it, while everything is stripped down to simplicity;

Having stories deeply connected with the product’s. So main slogan should be “Every bike as a story”or “Every rider as a story”

Identify a user journey narrative

For this project, the first step was to identify the narrative (to help establish my user flow), so that is:

“The user will enter in a bike shop website, we will be landed on a homepage in which is going to see a top story about a cyclist, he is going to read and in the end, he feels excited about buying the bicycle from the category he saw, so he goes to the bikes list and sees that the price are too expensive in the first glance, he needs something cheaper but cool, so he sorts by the price the list of bicycles and decides to go for the cheapest bike he can get. Then he passes for the necessary steps to buy his bike until getting the final receipt.”

Pages and necessary steps to fulfill this narrative

So based on the previous steps, I see the following necessary pages (or actions to take place):

-Homepage;

-Bike trip story;

-Bike list page;

-Sorted bike list page;

-Specific product page;

-Add product to basket;

-Basket page;

-Buy process, all information details;

-Thanking the user for buying the bike;

-Get the receipt.

(For this post you will only see up to the product page)

Start by putting down some basic wireframes

Just so I can go faster on this part of the work, I decided to use a wireframes kit design for the web, being that the advantage is that you already have some pre-created components for your design, the idea is to put them on each page so I can fast picture what content will be placed in them.

Get a set of images that are going to be part of the product

So I needed a set of photographs that would express a good trip experience, what a better place to go and chose some cool photos in unsplash!

Collect some photos of a bike trip, credits to Victor Xok on Unsplash

Bicycle product images from canyon.com

Mood board for this project

Not forgetting that the moodboard need’s to match and adapt to the product pictures gathered before, so decided to go for a Color scheme mood, instead of usability mood.