Roar Bikes
The Brief
Roar Bikes is a manufacturer specializing in small-batch, modern bicycles available exclusively through their website. Currently, Roar Bikes offers three distinct models for purchase: Siamese, Sphynx, and Bengal.
The main goal of this project was to create an e-commerce website tailored to bike enthusiasts who enjoy outdoor activities and nature. Also, targeted to users that are tech-savvy and into socials.
My task was to implement wireframes, High-fidelity prototypes
This project was a personal endeavour, developed to broaden my understanding of UX and UI design within Adobe XD. Both brief and persona were generated.
The Process
As with all projects, I began by identifying the key objectives that were highlighted in the project brief and defined by the target persona. Additionally, I researched the client’s primary competitors within the same industry to understand how they positioned themselves in the market. I collected imagery that reflected these insights to create a comprehensive mood board for my design concept.
This particular client specialized in exclusive and custom bikes, so I incorporated a social feature to allow users to see what others had purchased, providing both engagement and a visual showcase of products owned by real customers.
For the website navigation, I designed multiple menu options to offer users flexibility in their selections. I included image-based buttons to give a visual preview of the bikes, which not only added aesthetic value but also served as a direct link to the product pages. Additionally, I planned for a tinted orange effect to reveal the image on the button when hovered over, although this feature was not implemented in my mock-up.
My design approach aimed to be clean and uncluttered, with subtle colour accents to complement the existing brown theme. I chose earth tones for the imagery and used contrasting colours for the call-to-action (CTA) buttons to draw attention to areas where users could take action.
Software used: Adobe XD
Scroll down to see wireframes and Mock-ups
