HMI Design Case Study
The Ev Ware project centred around developing a Human-Machine Interface (HMI) for a range of small electric vehicles, such as bikes, scooters, three-wheelers, and golf carts. The aim was to design a compact, user-friendly interface that would accommodate the needs of these different types of mobility while maintaining a sleek and intuitive design.
Powered by Android Automotive OS and with full Over-The-Air capability you can update your UI apps at any time.
Role and Responsibilities
Through to implementation. I collaborated with the project manager and developers, leading on all user experience and interface design aspects. Being the lead designer on the team working with a wonderful senior UI designer, I was responsible for the design vision and execution, ensuring it aligned with both the business goals and the end users’ needs.
I handled everything from initial sketches and wireframes to final interactive prototypes and design handoffs, working closely with the developers to ensure smooth implementation.
Research
Our research was a combination of market data provided by the client and our own competitive analysis. The client supplied key insights based on prior market studies, giving us a clear understanding of the growing electric mobility market and user expectations for HMIs in this space.
Additionally, I conducted a desktop competitive analysis, looking at the current solutions in the market. Competitors like Bosch and Garmin offered similar HMIs, and I compared their strengths and weaknesses. This analysis helped us identify areas for improvement, particularly in terms of visibility in different lighting conditions and ease of use while on the move.
User Personas
To ensure the design catered to the right audience, we developed three key personas:
Urban Commuter (Scooter Rider): Typically aged 25-35, these users need a simple, glanceable display that provides critical information like speed, battery life, and navigation, allowing them to focus on their commute.
commerce riders (small 4-wheeler user): This group values sustainability and fitness, so they required integrated trip data, including distance traveled, jobs list, and battery status for their mobility.
Recreational Driver (Golf Cart/Three-Wheeler User): Older users (aged 50+), who primarily need an easy-to-use interface with large, readable fonts and straightforward navigation for a leisurely, stress-free driving experience.
These personas guided our design choices, ensuring the interface was intuitive for each user group.
How does it work?
Integrating Core FLEX with your vehicle couldn’t be easier. Supporting 2x displays, 2x cameras, 3x CAN networks with cloud-based software configuration, you can be up and running in hours.
EVware’s out of the box apps allow you to manage your EVware devices and fleets in no time. And if that’s not enough, then our industry-standard APIs allow you to connect third-party software and applications as required.
Fully customisable on-vehicle applications can be installed on EVware core units at any time. These apps are written for Android by you, your customers or third parties. A white-label HMI is also provided for you out-of-the-box.
The EVware HMI SDK provides access to all vehicle properties and signals as well as a bi-directional connection with the EVware cloud for command and control of vehicle functions.
Design Process
The design process followed a user-centred approach:
Wireframing: I started with low-fidelity wireframes to map out key screens, including the home screen, navigation, battery status, and settings.
Prototyping: Using Figma, I created interactive prototypes, which were shared with stakeholders for feedback. This allowed us to test early concepts and refine the design based on input.
Design System: To maintain consistency, I developed a design system with a dark colour scheme for optimal visibility in outdoor settings, a modern icon set for quick recognition, and clean typography that balanced readability with a modern aesthetic.
Challenges
One of the main challenges was ensuring readability in various lighting conditions. Given that the HMI would be used outdoors, we opted for a high-contrast dark theme to ensure visibility even in bright sunlight.
Another challenge was creating a design that would work across different types of vehicles with varying screen sizes. To address this, I designed a modular interface that could be adapted to different screen dimensions, ensuring a consistent user experience regardless of the vehicle type.
Outcomes
The final product was a modern, user-friendly HMI that was well-received by both the client and initial users during testing. Key achievements include:
80% user satisfaction in usability tests, with positive feedback highlighting the interface’s clarity and ease of use while riding. A 25% reduction in task completion time compared to competitor HMIs, thanks to more intuitive navigation and larger touch targets. A robust and scalable design system that allowed for easy future updates and adaptations across various vehicle types.
Visual Highlights
The final design featured a sleek, minimalist interface that prioritised usability. Key design elements included:
A clean, concise home screen showing essential data such as speed, battery life, and navigation in a clear and easy-to-read layout.
An adaptive settings menu that allowed users to quickly and easily adjust vehicle-specific settings like speed modes and headlight controls.
Collaboration and Feedback
Throughout the project, I worked closely with developers to ensure a smooth handoff of designs. Regular reviews with the project manager and stakeholders helped us stay aligned with project goals and user needs.
We conducted two rounds of usability testing, where feedback was instrumental in refining the design. Based on user input, we improved the contrast for better outdoor visibility and simplified the settings menu for quicker access to important functions.
