For the final project in a UI/UX Design course, 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.
PersonaThe 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 WireframingBefore 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.
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.