top of page
rapt2.png

Raptee.

A sustainable transportation - connected motorcycle HUD Design to provide gratifying riding experience.

5 March, 2020 - 5 June, 2020

What is Raptee?

Raptee Energy is an electric motorbike startup based in Chennai. The products are engineered in California and crafted in India. They are creating riding experiences that are gratifying but at the same time taking the least possible toll on the environment. The team of Raptee Energy is highly motivated by the concept of Ikigai.

Value Proposition

To provide an affordable, always connected motorcycle designed and built ground up that performs on par with its gas-powered counterpart made for the Indian demographic.

Project Brief

To create elegant and sophisticated Heads up Display (HUD)  for Raptee's electric motorbike.

My Role

As an UI Design intern, I was responsible for:
+ Wireframing
+ Information Architecture
+ User Interface and Visual Design
+ Prototyping
+ Testing

Design Process

04
+ Manager Need
+ Market Need
+ Competitor
Define
+ Product Principle
+ Information Architecture
+ User Flow
​
Design
+ Low Fidelity wireframe
+ High Fidelity  
   Wireframe UIs
+ Prototype
​
Test
+ Usability testing
Understand
01
02
03
Being the part of first design team -  UI Designer.

The CEO was sure what I can do for them, as their vision is already planned and they need to take action on it, but he expected me to come up with design which gives classy vibes with simple interaction.

Since the display design was happening for the first time in the company, I also need to communicate with entire team to define design language for the brand. So, we planned to come up with mood board before jump into visual design.
+ Understand the market thoroughly by checking all-related HUD and analysed their usability.

+ Sit down with decision makers (CEO, Design Team) and ask them to prioritise our design needs.

+ Interview with different roles to understand everyone’s expectation on the product and their                 priorities.


 
What I Did?
Based on our strategy,  we decided to create design by playing game of color changing. We figured out the data required to be displayed and generated information architecture for clear vision. 
​
We decided to generate mood board for our newly defined language for the brand which user can subconsciously relate with.
+ Created Information architecture to support usability.

+ Defined user flow that takes them from their entry point through a set of steps towards a successful
    outcome and final action.
​
+ Defined product principle to make better decision in terms of design.
""  Learning the skill of riding ""
What I Did?

1. Understand

Internal interview with the entire team :
Being the first designer in the team, I believe I am also responsible for bringing that design mindset to the team. As a result, I scheduled a few interviews with different positions in the team to seek for their expectation on the product. These interviews help me to build a better bridge between the stakeholders and the product. The insights I got from this exercise are :
​
+ Clear and simplified interaction throughout the process.
​
+ HUD design should compliment motorbike design.
​
+ Dynamic transition for specific driving modes.
​
+ Design should reflect concept of Ikigai.
​
​
Market Need :
Users
Growing electric bike market
Raptee
Energy
Win -
Win 
While doing market study, we noticed Electric bikes are a flexible, versatile, eco-friendly, and trendy mode of transport. Consumers look up to them as an ideal substitute for scooters, smart cars, and public transport.
India has a wider scope for electric motorbike in nearby future due to some reasons - 
​
+ Third-largest carbon emitting country in the world,
+14 out of the 20 most polluted cities in the world are in India.
+Two-wheelers are the largest vehicle class in India. 
​
​
​
​
​
It was important for us to look at some of the most popular electric motorbike geographic like Ather Energy, Emflux Motors, Ultraviolette Automobile. We looked at their product flow, understand the primary objectives and noticed how they hook users on to their product.
​
​

2. Define

""  Finding the route ""
Product Principle :

Keeping all the value proposition in mind, we listed down some key principles which defined Raptee as a brand:

​

+ Create exclusive and classy riding experience.
+ Build a feeling of trust in user's  mind, that they are investing in a good product and it will be of great value.
+ Ensure clear and straight forward communication about the product.
+ Make it easy for users to take action while riding. 

 

Information Architecture :
User Flow :

3. Design

To improve a design’s/product’s aesthetic appeal and usability with suitable images, typography, space, layout and color, we came up with visual design. 

 

Being a first UI Designer in the company, I have taken initiative to generate UI Library, inspiration board and color scheme for them which can be referred in future. 

​

We tried to keep the entire interaction very basic. I tried to make riding an emotion with this design.

""  Let emotions flows  ""
What I Did?
+ Created UI kit for future reference.

+ Created inspiration board to define a best practice of elements, colors and forms.

+ Define color scheme for the project.
​
+ Design that lead user's eye to an item's functionality with aesthetic consistency.
​
​
Ideation on paper :
Further Development :

 Ideation

​

Inspiration Board :

To set the scene temperature of the visualization process and to create the vibe and tone of the work for the finished product, I have decided to create an inspiration board. 

Gentle
Movement
Fluidity

Earth

It offers happiness, also help re-connect with our grass-roots.

Water

It offers flexible and embrace change when it comes to decision making.

Fire

Offers more passion and ignition when it comes to guidance and wisdom

Elegance
UI library - collection of the UI elements and font
Font pallet :

Artifakt Element 

​

Bold              Regular

​

ABCDEFGHIJKLMNOPQRSTUVWXYZ

​

abcdefghijklmnopqrstuvwxyz

​

1234567890

​

​

Artifakt Element 

​

Bold              Regular

​

ABCDEFGHIJKLMNOPQRSTUVWXYZ

​

abcdefghijklmnopqrstuvwxyz

​

1234567890

​

​

Artifakt Element 

​

Bold              Regular

​

ABCDEFGHIJKLMNOPQRSTUVWXYZ

​

abcdefghijklmnopqrstuvwxyz

​

1234567890

​

​

UI Element :
Icons :
User Flow :
Select/ switch your driving mode according to your requirement
Home screen
Select the mode you desire, access settings and navigation snap for detailed map
Navigation screen
With the glance of ride detail you can access full size map to lead your path.
Setting screen
Edit your profile, update your driving documents, make settings as per your journey requirement and check the status of your vehicle
display setting
adjust your screen brightness, time and date settings 
Profile setting
Update your information like name, blood group, address, contact and your driving documents
Visualization in action :

With biking, its not just the destination...

It's a journey !!!

111
eco nav
edit
detail
SETTING1

Change your Mood by changing Mode...

eco nav33
SETTING601
eco nav2
SETTING602

4. Testing

There is always a scope for betterment and to find that out we did testing of our design using display.

​

By doing we were able to get a visual picture and also the opportunity to notice how users will make interaction.

​

We derived the points where we can conclude the project for time being. Though, the design optimization is still in process.

"" Keep the journey going  ""
What I learn ?
+ Changing colors for different driving modes make interaction more engaging.

+ Providing basic driving document makes it easy for user to carry it.

+ Showing status of bike on every screen makes it clear for user to take next action.
​
​
​
Prototyping preview :
Take the action,
start the journey
and make memories
Make the choice,
Get the emotional touch
​
         
Check More

"Design is not a thing you do, It's a way of life."

- Alan Fletcher

bottom of page