Roar Bikes

UI Design

Project Overview

This project was created as an assignment for a UX course. Roar Bikes is a sustainable, eco-friendly bicycle company
specializing in three main types of bikes. I was tasked with
creating a high fidelity home page, a category page for the
bikes, a product page, and a contact page.


UX/UI Designer




Adobe XD, Adobe AI, Procreate

User persona

As part of the assignment, the user persona was provided to the students to keep in mind and help us while we designed our website.



Research sustainable branding, information needed to be provided about bikes, and competitor sites.


Low fidelity sketches created on Procreate.


Adobe XD


Adobe XD


Keeping sustainability in mind, I decided
to go in the direction of “natures” colors,
excluding the ocean and sky blues. I
wanted the UI to remind customers of
landscapes such as mountains and
greenery. I wanted the website to feel like
a peaceful bike ride. I used minimal
design elements to keep up with the
sustainability of the brand. I didn’t want
users to feel overwhelmed with colors
and elements and kept the UI simple and
to the point to allow for easy navigation
and understanding.

sketches & wireframes

I first created my rough sketches on Procreate, figuring out how I wanted my website to be laid out before diving into Adobe XD & creating my low fidelity wireframe.

high fidelity websites

full designs