Once I decided the fonts and colors, I started designing the first wireframes in Adobe XD.
After the first two, I noticed that even if the design style was ok, the colors wasn’t appropriate for the Roar Bike persona. It looked more like what I personally wanted and not the users. So I started to play with the colors till I discovered the right ones.
After the first two, I noticed that even if the design style was ok, the colors wasn’t appropriate for the Roar Bike persona. It looked more like what I personally wanted and not the users. So I started to play with the colors till I discovered the right ones.
Project
Background
Background
Roar Bikes is a manufacturer of small run, contemporary bicycles sold exclusively from their own website. Roar Bikes currently have 3 models of bike to purchase (Siamese, Sphynx, Bengal). I designed and prototyped the website in order to look stylish and easy to use for potential users.
Project
Background
Background
Roar Bikes is a manufacturer of small run, contemporary bicycles sold exclusively from their own website. Roar Bikes currently have 3 models of bike to purchase (Siamese, Sphynx, Bengal). I designed and prototyped the website in order to look stylish and easy to use for potential users.
Research, Design, Production and Delivery
ROLE
“ROAR BIKES” (website)
DATE
August 25 - September 9
PROJECT NAME
BUSINESS GOAL
UI/UX Designer
These bikes need to be seen by potential customers
and a website meticulously crafted and easy to use
seems to be the best solution.
and a website meticulously crafted and easy to use
seems to be the best solution.
CLIENT
Founder of “Roar Bikes”
Process
3. Persona
Research
1. Understanding the problem - Q&A with the client
2. Brief
3. Persona
4. Create mood board(s)
2. Brief
3. Persona
4. Create mood board(s)
Q: Who is your audience, and what are their goals?
A: Our bikes are made especially for people who share the same passion for sport, adventure and speed.
Q: What does success look like for the project?
A: We’d like to make people more aware of our brand. We also would like to increase the average value of our orders.
Q: Which are the main elements/features you want for the website?
A: Our bikes are made especially for people who share the same passion for sport, adventure and speed.
Q: What does success look like for the project?
A: We’d like to make people more aware of our brand. We also would like to increase the average value of our orders.
Q: Which are the main elements/features you want for the website?
Q&A WITH THE CLIENT
Roar Bikes provide 3 bike models, every of them having the best qualities for a good trip. People have to know about them and they will fall in love with their capacities and cool design instantly. Physic shop is not helping the products to reach popularity among people. Usually, clients order their bikes by popular websites. So, my client wanted to stand out in the competition and a stylish website where he can post his products seemed to be the best solution.
2. Brief
4. Create mood board(s)
Adventure, nature and sport are the key words that I kept in mind when I started to create the mood board for Roar Bikes. According to the discussion that I had with the founder, we decided that they look for a website which express the spirit of adventure. The images, the colors and all the visual elements should reflect the passion for travel.
ROAR BIKES
“Only those who risk going too far
can possibly find out
how far they can go.”
can possibly find out
how far they can go.”
2020 Designed by Ella
Design
With the clock ticking, I quickly did some mockups of the basic user journey before going over it with the desired styling. I opted for a metallic gradient look and the outstendingness of the UI.
Logo, Colors & Fonts
Wireframing Process
FINAL PROJECT
VERSION
VERSION
MY
VERSION
VERSION
Product Change
“Product” Page
“Product Info” Page
Section Animation
“Adventures with Roar Bikes” Page
Place Order
Order Placed Animation
Prototyping
After wireframing process was successfully completed, I started prototyping in Adobe XD. In this stage, I created the final animations too.
Reflections
This project was an eye-opening experience that taught me a lot about being efficient and knowing when and where to focus my energy and efforts. I taught that I must keep in
mind from the beginning the persona profile and conceive both UI and UX design for their needs, not for mine. I was thinking about a design which can incorporate all the brief requirements.
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
mind from the beginning the persona profile and conceive both UI and UX design for their needs, not for mine. I was thinking about a design which can incorporate all the brief requirements.
After the wireframing and prototyping was completed, I recorded a video to demonstrate the project vision and the navigating process to my client.
More projects
Maynooth Furniture
- Mobile App -
Q: Is there any existing research data we can use?
A: I can tell you about our clients. Many of them are bike’s addicted.They use it either for daily walking or for living their adventure. Also, I have to mention that they pay attention to the details of design and specifications of the product too.
Q: Tell me some websites that inspires you.
A: Let’s say “www.swiftyscooters.com”, “www.santacruzbicycles.com” and “www.yeticycles.com”.
A: I can tell you about our clients. Many of them are bike’s addicted.They use it either for daily walking or for living their adventure. Also, I have to mention that they pay attention to the details of design and specifications of the product too.
Q: Tell me some websites that inspires you.
A: Let’s say “www.swiftyscooters.com”, “www.santacruzbicycles.com” and “www.yeticycles.com”.
A:
After I received the logo from Roar Bikes’ founder, I decided the final colors for the website. All of them are blended with light grey to confer a modern vision. After I tried different fonts, I decided that “Londrina Solid” and “Roboto” are the best for this kind of project.
Each bike has a specific color used in smooth gradient (blue for “Bengal”, purple for “Siamese” and green for “Sphynx”). Depends on the selected option, it will lead to a new page, which can be “Product Info”, “Share adventure with Bengal/Siamese/Sphynx” or “View others’ adventures”.
I separate the “Adventures” page in two sections, one where people can share their own adventure with these bikes and one where they can view others’ adventures. I chose a parallelepiped geometrical shape to mask each bike and to give it some texture and I added the specific colour and bike name on top.
The first one is to complete the shipping info
The second one is to introduce the data card
The second one is to introduce the data card
If all these are successfully fulfilled, the user can proceed with his order.
There are 2 steps to follow to place an order.
When I created the animation, I was thinking about something that can transform into a “checked” sign in the moment the order is successfully placed. This way, I draw 2 circles, so the sign will appear into the green one.
Contact Us
“Contact Us” page presents information about Roar Bike’s phone number, their work hours and e-mail address. There is also a possibility to ask them some questions and they will answer as soon as possible.
The design has the same nuance of grey, a little bit darker this time, with a masked bike, symbol of their site. The footer reveals the logo and their slogan “Keep Calm and Bike On!”.
I keep in mind this scheme each time I’m starting a new project. From researching and sketching first wireframes to prototypes, I gradually created the entire version of the website/app.
At the discovery phase of my project, I collected some information from the client in order to get a better understanding of the problem. Also, I tried to find out which design suits the most for the project.
Based on the conversation that I had with my client, I started to complete the brief in order to provide him a vision of the project and to help myself to familiarise with it in an efficient manner.
Using the quantitative and qualitative data from interviews and survey results, I defined the target persona profile (Jake, 28) to better empathise with my main user groups and prioritise goals according to their needs.
A very important step for any of my design projects is setting the mood, because it helps me to get on the same page for the visual aspects of the project. So I try to do my best in collecting the images, fonts, interactions, features, icons, and UI elements to communicate the artistic direction of a project. Every mood board is focused on meeting user needs and problem-solving.
The “Product Info” page presents all the information the customers need to know about the product they are interested in. The image of the bike from section “Specifications” (available colors) are masked by the two available colors of each of them.
Each section (“Overview”, “Specifications”, “Geometry”, “Shipping & Return”) is marked by a frame when they are selected and their content will change.
1. Understanding the problem