Roar Bikes

Project Overview

For the final project in a UI/UX Design course that I attended I took on the task of designing a website for the fictional bicycle shop ‘Roar Bikes’. Roar Bikes is a small, independent store that caters mainly to a young, urban, style conscious demographic that demands quality and craftsmanship. The shop builds and sells it’s own limited model range of bikes online and relies heavily on it’s customers to promote and market the brand on social media. The branding effort needed to reflect this business model and therefore social media is emphasized within a minimalist design.

My Role

UI/UX Designer

Copy Writer/Branding

Tools

Adobe XD

Persona

The persona below outlines the type of individual being targeted by Roar Bikes and was taken into consideration when creating the feel of the site.

Planning and Wireframing

Before designing a high-fidelity version of the site wireframes were created for both the home and product pages.

Typeface and Colour

Two typefaces have been used for this project: ‘Rubik Mono One’ for the main headings and ‘Fjalla One’ for buttons and body text. These fonts were selected due to their minimalist, sans-serif, style and because they are easily accessible through Google Fonts should the site ever be developed. The colour palette is also fairly minimalist using shades of yellow and orange for headings and black and gray for body text.

Design

The design of the home page emphasizes the fact that Roar Bikes is a small, specialty, manufacturer of custom bicycles and therefore displays their three models just below the hero image. Users are able to scroll through the models using the ‘Next’ and ‘Prev’ buttons and view some basic information on each bike or can click the ‘More Info’ button below the details to read more about their selected model.

 

Social Media Integration

Roar Bikes is a company that relies heavily on its customers to promote the brand through social media. Customers are encouraged to share pictures of their bikes and to use #roarbikes when posting. This integration with the community is vibrantly apparent on the home page of the site.

Product Page

A large image of each bike model is displayed on that model’s product page. The price of the model as well as available colours is clearly displayed.

Mobile Design

Below are examples of the mobile version of the design with the navigation menu opened in the second example.