HMI Design for e-Bike Display
Brief
This is a UX case study for a project focused on e-mobility startup for the Monarch Innovation Pvt. Ltd. The task is to completely redesign the user interface of the TFT screen display for the e-bike which will provide a hassle-free interaction and experience for the driver of the e-bike getting the useful and needed information while driving.
Introduction
E-bike is specially designed for the Indian consumer market and is fitted with a electronic TFT display focusing on providing all the necessary information on the display in a minimal way highlighting the main features or functions on the screen.
Due to NDA reasons, I won’t mention their company name here. I have changed some elements to remove the branding of the company.
As a UI UX Designer for this project, I had to redesign the display from scratch by applying design principles I learned through UX learnings. I went through design research, ideating, accessibility checking, user study and testing during this project timeline. Also to make sure the design serves the purpose.
Project Requirements
The company’s goal is to manufacture an e-bike for the Indian consumer market where the users will be of young age group who are under 40 years who prefers bikes over fossil fuel vehicles for daily commute.
Regular meetings with the director, team leader and our design head helped me learn the key goals the company want to achieve. I used to note down and start working immediately on the requirements.
-
User login and signup interface for the users before using the bike
-
Multiple users
-
Fingerprint or pattern assistance for easy access and unlock the ride
-
Navigation assistance
-
Simple and Minimal user interface
-
Defining the layout and grid for the screen resolution
-
Use of Dark and Light theme for the UI (dark most preferred)
-
Easy access for the other controls or features
-
Personalization options for the user
-
Intuitive settings options
Research
Design considerations for outdoor display use
This is a challenge for designer to create a better user experience for their solutions as human behaviour and their behaviours is changing day by day because of their use of screens in outdoor environment.
Before designing any solution for e-bike display, we have to understand about the usage pattern of the product. Because it majorly depends upon where(location) the user is using the product and how they are handling it while riding. As its a display on a moving bike which also creates vibrations, this makes the interaction with screen more complex than using it in static position.
Some common considerations while designing for outdoor use.
Touch gestures
Touch zones
Benchmarking
I started by carrying out competitive research to understand what other companies are doing in their displays. Initially I used Bosch as a benchmark, as they were the leading brand which were having various display options for e-bike with lots of functionality. Then I started clustering the similarities and unique features from other brands as well which were the leading points for improving the display.
Other Products
Bosch Products
Insights Gained
-
They have set the priority for the most important features which are crucial for the user while riding
-
Use of icons instead of text so that user can perceive the function as he has very less time to focus and to take decisions
-
Good use of contrasting colors in the UI which are legible in outdoor environment
-
Use of glowing effects in the UI to highlight the elements
-
Bosch is following a minimal design language in their products which gives better user accessibility
-
Use of legible typefaces
-
Use of less colors in the screen to reduce confusion of user
-
Use of dark theme is preferred for better visibility during the daytime
User Research
-
Usability of the Product
We used to ask some people (both male and female users) from the company to studio, and asked them to interact with the test rig we had to know about their activities while interacting with the screen.
We asked them to go outside and interact with the screen. We did the task analysis of them, we watched what they did, how they did, the areas where they struggle to find the function. We understand the pain points they were having and we got to conclusion that simplicity is the key. We have to get rid of clutter and display only what is needed when users are performing the activity.
-
Contextual Inquiry
We conducted a survey of around 26 people of varied age groups who were using bicycles for activities like going to office, sports, daily commute, sports and exercise, and found out their preferences. The survey also included set of questions related to the overall experience of driving a bike and same with e-bike as well.
Under
NDA
Under
NDA
Under
NDA
-
Interview Interpretations
-
Forming Clusters
Key Findings and Opportunities
-
The decision on giving a fingerprint or not as it creates a hassle before riding a bike
-
Users will like to have different themes according to their use
-
Desires a safe riding experience for their e-bike
-
Efficiently multitasking during their ride
-
Having a minimal interface with useful features is a major priority
-
Intuitive interace that uses never misses his activity
-
Having a good legibility is important as the screen is to be used in outside environment
-
Providing overall minimum task flow for the user
-
Evaluating the design after user testing and feedback to improve it further
User Archetypes
Information Architecture
Brainstorming and Ideations
I started clustering all the information from the above research together and started creating ideations for how the screen will work. I used to regularly meet with the team for brainstorming and gather insights from them.
​
Putting Pencil before Pixels
Designing the UI and Prototyping
I started with the fingerprint feature first, I asked some users to interact with it after seating on bike, right handed users can easily place their index finger, middle finger as well as thumb finger easily. But it was quite difficult for left handed users as they have a muscle memory of putting their left hand first and after realising, they need to change their hand.
Then I suggested the Industrial design team to change the fingerprint position to center as both right-handed and left-handed users can use it.
But after a lot of discussions and also from the user research results, we got the approval of scraping the idea of having a fingerprint feature in the display.
Field Visit
As we don’t have access to Bosch screens in our locality or any vendor, I visited Ather Energy along with members from electronics and embed team and mechanical team to get better understanding of how their display works and to check its legibility in driving conditions, lighting environment and ease of use.
They were having both dark and light theme with a good contrast ratio of colors. The typeface was quite small for a screen of 7’ inch size. Features were quite interesting but the interaction was having latency, which was quite irritating for a smart phone user. Both themes were quite visible in day time as well as night time. The screen interface changes to a minimal design when we start the ride and switch back to normal dashboard after stopping. Only the needful information was displayed. It was well designed interface, and Ather did a good job in it. We got a lot of insights after this visit.
Defining the Screen Angle
We tested the ergonomics of the users of different height, so that we can have a perfect angle from where the screen will be visble to the users of various heights in outdoor conditions.
Under
NDA
Under
NDA
Interaction with Button Assist
I started understanding how these buttons work with the display functions and how can I add the features we want with our UI design.
To make the display more legible, I tested various color palettes for the dark theme and light theme, testing of background colors and then the primary and secondary colors on the screens by taking them outside and checking the contrast ratios.
Contrast Testing for UI
Under NDA
Under NDA
Under NDA
Typeface Selection
Typeface plays an important role while designing UI for outside use. Here I tested some sans serif fonts which will work together for the display screen.
Visual Guidelines
Light Theme
Background
#FFFFFF
Primary
Color
#00BBFF
Dark Theme
Background
#000000
Secondary
Color
#00FF00
Iconography
UI Elements
Final Screens
Welcome Screen
First User
Login
User Login
Pattern
User Login
Fingerprint
Under NDA
Under NDA
Under NDA
Under NDA
Under NDA
Under NDA
Various dashboard iterations to keep it minimal by arranging the priority elements in the grid
Concept 1
Concept 2
Concept 3
Concept 4
Concept 5
Concept 6
Final Design Direction
After trial testing with all the ideations on the e-bike prototype, we discussed with the director, team members, and user groups, the final design direction was based on the most voted iterations from the above screen designs.
Users like concept 4 based on
​
-
It was more appealing
-
The inverted tiles design was good and was separating the functions well on the screen
-
The use of gradient was well-fitted with the overall theme
-
It seems more techy and futuristic
-
It was also going well with the design language of the bike as well
Dashboard Screens
Iteration 1
Iteration 2
Modes selection
Dark Mode
Modes selection
Light Mode
Brightness of Screens
Iteration 1
Iteration 2
The problem here was user has to locate the button to tap on screen to increase or decrease the brighness. Also user needs to tap five times to increase brightness to maximum which was not user centered while driving.
Selected slider screens
for brightness adjustments
Battery Indicator
The color palette changes after every 20% degradation of battery.
As the change in color gives the perception of how much battery is left. Also the screen has trip indicator as well as stopwatch feature.
Settings
Final settings menu screen
Further features under settings menu are under NDA which contains some
important USP features for the brand.
Proof of Concept
Under
NDA
Renders
Internship Learnings
​​It was a great exposure to work on such a project and I would like to thank my fellow team members for their constant guidance and support. The best part was communicating with the other development teams which were crucial for any design process to make it successful. I learned a lot of things from this opportunity at Monarch Innovation.
​
During my design process I went through various research papers, articles, and case studies which helped me how a design process works and also taught me how to interact with users, how to track their activities, interview, testing, and how to document my work accordingly.
​
-
Leading the project helped me to learn more about how to initiate a design process
-
To understand user needs and take collective feedback to improve the design
-
Helped me to explore more design tools like Figma, Photoshop, and other design brainstorming tools
-
Helped me to improve my visual design skills and become quicker at prototyping
-
Constant interaction with industrial design, graphics design, mechanical, electronics, and embedded teams helped to make this project successful from point of view of the users
-
Testing played an important role to achieve the goals
Thank you!
For your time and efforts
