Bridging the Gap: A Real-Vehicle HMI Prototyping Toolchain
How I built a browser-based toolchain that reduced HMI iteration from months to hours — directly on target vehicles.
How I built a browser-based toolchain that reduced HMI iteration from months to hours — directly on target vehicles.
How I built a browser-based toolchain that reduced HMI iteration from months to hours — directly on target vehicles.
Platform
Platform
Platform
Duration & Year
Duration & Year
Duration/Year
MY ROLE
MY ROLE
MY ROLE
TEAM
TEAM
TEAM
Mobile App
Mobile App
Mobile App
6 months (2024)
6 months (2024)
6 months (2024)
UX/UI Designer
UX/UI Designer
UX/UI Designer
Context
The automotive HMI industry runs on two separate worlds: developer tools like Kanzi, Unity, and Unreal Engine on one side, and designer tools like Figma and ProtoPie on the other. There was no middle ground. Every time a designer wanted to test a concept on a real vehicle, they needed a developer to build it first — a process that could take weeks or months and cost significantly. If the developer was on vacation, testing stopped entirely.
The automotive HMI industry runs on two separate worlds: developer tools like Kanzi, Unity, and Unreal Engine on one side, and designer tools like Figma and ProtoPie on the other. There was no middle ground. Every time a designer wanted to test a concept on a real vehicle, they needed a developer to build it first — a process that could take weeks or months and cost significantly. If the developer was on vacation, testing stopped entirely.
The automotive HMI industry runs on two separate worlds: developer tools like Kanzi, Unity, and Unreal Engine on one side, and designer tools like Figma and ProtoPie on the other. There was no middle ground. Every time a designer wanted to test a concept on a real vehicle, they needed a developer to build it first — a process that could take weeks or months and cost significantly. If the developer was on vacation, testing stopped entirely.
The Problem
HMI prototyping at automotive OEMs was slow, expensive, and developer-dependent. A single iteration cycle could take a month or more because it required a full development build. Projects were delayed, costs were high, and designers had no way to independently validate their concepts on target hardware.
HMI prototyping at automotive OEMs was slow, expensive, and developer-dependent. A single iteration cycle could take a month or more because it required a full development build. Projects were delayed, costs were high, and designers had no way to independently validate their concepts on target hardware.
HMI prototyping at automotive OEMs was slow, expensive, and developer-dependent. A single iteration cycle could take a month or more because it required a full development build. Projects were delayed, costs were high, and designers had no way to independently validate their concepts on target hardware.
My Role
The gap wasn't just technical. It was a workflow problem between two professional worlds that had never been properly bridged. The solution had to work with tools designers already knew, preserve existing Figma assets, and require zero developer involvement once set up.
The gap wasn't just technical. It was a workflow problem between two professional worlds that had never been properly bridged. The solution had to work with tools designers already knew, preserve existing Figma assets, and require zero developer involvement once set up.
The gap wasn't just technical. It was a workflow problem between two professional worlds that had never been properly bridged. The solution had to work with tools designers already knew, preserve existing Figma assets, and require zero developer involvement once set up.
The Insight
The gap wasn't just technical. It was a workflow problem between two professional worlds that had never been properly bridged. The solution had to work with tools designers already knew, preserve existing Figma assets, and require zero developer involvement once set up.
The gap wasn't just technical. It was a workflow problem between two professional worlds that had never been properly bridged. The solution had to work with tools designers already knew, preserve existing Figma assets, and require zero developer involvement once set up.
The gap wasn't just technical. It was a workflow problem between two professional worlds that had never been properly bridged. The solution had to work with tools designers already knew, preserve existing Figma assets, and require zero developer involvement once set up.
What We Built
A browser-based HMI prototyping toolchain that connects real vehicle signals directly to ProtoPie prototypes — running live on target vehicles.
The toolchain works like this: Figma designs flow directly into ProtoPie, preserving all existing HMI assets. Real vehicle signals from the CAN Bus — telltales, door status, speed, compass, GPS — are translated into software values and connected to the prototype. Real maps via Mapbox update in real time using the vehicle's actual GPS coordinates. When the vehicle theme changes, it sends a signal to the server and the Mapbox theme updates automatically via API. Everything runs in a browser.
A browser-based HMI prototyping toolchain that connects real vehicle signals directly to ProtoPie prototypes — running live on target vehicles.
The toolchain works like this: Figma designs flow directly into ProtoPie, preserving all existing HMI assets. Real vehicle signals from the CAN Bus — telltales, door status, speed, compass, GPS — are translated into software values and connected to the prototype. Real maps via Mapbox update in real time using the vehicle's actual GPS coordinates. When the vehicle theme changes, it sends a signal to the server and the Mapbox theme updates automatically via API. Everything runs in a browser.
A browser-based HMI prototyping toolchain that connects real vehicle signals directly to ProtoPie prototypes — running live on target vehicles.
The toolchain works like this: Figma designs flow directly into ProtoPie, preserving all existing HMI assets. Real vehicle signals from the CAN Bus — telltales, door status, speed, compass, GPS — are translated into software values and connected to the prototype. Real maps via Mapbox update in real time using the vehicle's actual GPS coordinates. When the vehicle theme changes, it sends a signal to the server and the Mapbox theme updates automatically via API. Everything runs in a browser.
The Approach: Fake It Before We Make It
We built incrementally. Maps started as a simulated point-A-to-point-B route, then replaced with real GPS. The 3D vehicle model was initially triggered by UI buttons, then connected to real door signals. Every component was faked first, validated, then made real. This kept the build moving without getting blocked.
The hardest part was CAN Bus signal translation — taking raw engineering signals from the OEM and accurately converting them into software values (int, float etc.) that ProtoPie could use reliably. Getting this right was critical because everything else depended on it.
We built incrementally. Maps started as a simulated point-A-to-point-B route, then replaced with real GPS. The 3D vehicle model was initially triggered by UI buttons, then connected to real door signals. Every component was faked first, validated, then made real. This kept the build moving without getting blocked.
The hardest part was CAN Bus signal translation — taking raw engineering signals from the OEM and accurately converting them into software values (int, float etc.) that ProtoPie could use reliably. Getting this right was critical because everything else depended on it.
We built incrementally. Maps started as a simulated point-A-to-point-B route, then replaced with real GPS. The 3D vehicle model was initially triggered by UI buttons, then connected to real door signals. Every component was faked first, validated, then made real. This kept the build moving without getting blocked.
The hardest part was CAN Bus signal translation — taking raw engineering signals from the OEM and accurately converting them into software values (int, float etc.) that ProtoPie could use reliably. Getting this right was critical because everything else depended on it.
The Challenge
ProtoPie was never designed for this. It has real limitations when pushed this far. Much of the work was finding workarounds that kept the toolchain functional while minimising the complexity burden on designers — so that once built, any designer could use it without needing to understand the engineering underneath.
The initial build took 6 months. There was no existing concept like this in the market to reference.
ProtoPie was never designed for this. It has real limitations when pushed this far. Much of the work was finding workarounds that kept the toolchain functional while minimising the complexity burden on designers — so that once built, any designer could use it without needing to understand the engineering underneath.
The initial build took 6 months. There was no existing concept like this in the market to reference.
ProtoPie was never designed for this. It has real limitations when pushed this far. Much of the work was finding workarounds that kept the toolchain functional while minimising the complexity burden on designers — so that once built, any designer could use it without needing to understand the engineering underneath.
The initial build took 6 months. There was no existing concept like this in the market to reference.
Reception
Senior stakeholders and higher management tested the toolchain themselves in meetings. For many it was the first time they had seen HMI concepts running on a real vehicle without a full development build. The entire HMI design department expressed interest in adopting it — specifically because it let them test on target hardware without needing to learn development tools.
Senior stakeholders and higher management tested the toolchain themselves in meetings. For many it was the first time they had seen HMI concepts running on a real vehicle without a full development build. The entire HMI design department expressed interest in adopting it — specifically because it let them test on target hardware without needing to learn development tools.
Senior stakeholders and higher management tested the toolchain themselves in meetings. For many it was the first time they had seen HMI concepts running on a real vehicle without a full development build. The entire HMI design department expressed interest in adopting it — specifically because it let them test on target hardware without needing to learn development tools.
Outcome
Iteration time: from up to a month → to hours, sometimes minutes Development cost reduction: approximately 20x Designer independence: no developer required to test on target vehicle Asset reusability: existing Figma designs feed directly into the toolchain The toolchain connected real maps, real vehicle signals, a 3D vehicle model, GPS, compass, and theme switching — all running live in a browser on the target vehicle.
Iteration time: from up to a month → to hours, sometimes minutes Development cost reduction: approximately 20x Designer independence: no developer required to test on target vehicle Asset reusability: existing Figma designs feed directly into the toolchain The toolchain connected real maps, real vehicle signals, a 3D vehicle model, GPS, compass, and theme switching — all running live in a browser on the target vehicle.
Iteration time: from up to a month → to hours, sometimes minutes Development cost reduction: approximately 20x Designer independence: no developer required to test on target vehicle Asset reusability: existing Figma designs feed directly into the toolchain The toolchain connected real maps, real vehicle signals, a 3D vehicle model, GPS, compass, and theme switching — all running live in a browser on the target vehicle.
Takeaway
The biggest lesson wasn't technical. It was that the most valuable design work is sometimes invisible — building the infrastructure that lets other designers do their best work faster. Bridging two professional worlds that had never been connected before required both design thinking and engineering depth. That combination is rare, and it's what made this possible.
The biggest lesson wasn't technical. It was that the most valuable design work is sometimes invisible — building the infrastructure that lets other designers do their best work faster. Bridging two professional worlds that had never been connected before required both design thinking and engineering depth. That combination is rare, and it's what made this possible.
The biggest lesson wasn't technical. It was that the most valuable design work is sometimes invisible — building the infrastructure that lets other designers do their best work faster. Bridging two professional worlds that had never been connected before required both design thinking and engineering depth. That combination is rare, and it's what made this possible.
Design Thinking Process
Empathy driven steps to user-centric solutions
Empathy driven steps to user-centric solutions
Persona
Pain Points
Passengers struggle to select seats due to unclear layout, causing delays.
Passengers struggle to select seats due to unclear layout, causing delays.
Passengers struggle to select seats due to unclear layout, causing delays.
Users cannot add meals during booking, resulting in incomplete trips.
Users cannot add meals during booking, resulting in incomplete trips.
Users cannot add meals during booking, resulting in incomplete trips.
Customers cannot easily find purchased tickets, increasing frustration.
Customers cannot easily find purchased tickets, increasing frustration.
Customers cannot easily find purchased tickets, increasing frustration.
No option to check the live status of the train
No option to check the live status of the train
No option to check the live status of the train
Login compulsion to check train schedules.
Login compulsion to check train schedules.
Login compulsion to check train schedules.
No replies to queries that require immediate attention.
No replies to queries that require immediate attention.
No replies to queries that require immediate attention.
Solution
Clear navigation to access every feature of the application.
Clear navigation to access every feature of the application.
Clear navigation to access every feature of the application.
Meal addition feature to be implemented.
Meal addition feature to be implemented.
Meal addition feature to be implemented.
Precise seat selection process.
Precise seat selection process.
Precise seat selection process.
User friendly interface.
User friendly interface.
User friendly interface.
Information Architecture
Created the Information Architecture to structure information according to the hierarchy and respective sections. This made me understand and navigate the flow easily.
Created the Information Architecture to structure information according to the hierarchy and respective sections. This made me understand and navigate the flow easily.
Created the Information Architecture to structure information according to the hierarchy and respective sections. This made me understand and navigate the flow easily.
Low-fidelity Prototypes
Low-fidelity Prototypes
Low-fidelity Prototypes
Paper Prototyping on Marvel App
Paper Prototyping on Marvel App
We undertook the creation of Low-fidelity prototypes to establish a framework for a user interface. By using Low-fidelity prototypes, we were able to facilitate early stage discussions and implement the feedback after usability testings.
We undertook the creation of Low-fidelity prototypes to establish a framework for a user interface. By using Low-fidelity prototypes, we were able to facilitate early stage discussions and implement the feedback after usability testings.
Flow 1: Ticket Booking
Flow 1: Ticket Booking
Flow 1: Ticket Booking
The first flow highlights the user journey to book a ticket from start to end.
The first flow highlights the user journey to book a ticket from start to end.
Flow 2: Live Tracking
Flow 2: Live Tracking
The second flow highlights the live tracking features, can send and get location from friends and family. Secure and useful if both travelling and planning to meet at common place.
The second flow highlights the live tracking features, can send and get location from friends and family. Secure and useful if both travelling and planning to meet at common place.
Flow 3: Customer Support
Flow 3: Customer Support
The third flow highlights the customer support features, can contact to agent in case of emergency upon providing a valid ticket number or email.
The third flow highlights the customer support features, can contact to agent in case of emergency upon providing a valid ticket number or email.
User Testing
User Testing
User Testing
Study Design
Study Design
Users
Users
Users
Quantitative
Quantitative
Quantitative
Qualitative
Qualitative
Qualitative
Prototype
Prototype
Prototype
3
3
3
A/B Testing
A/B Testing
Interviews
Low-fidelity
Pilot Testing
Based on user's feedback, these were the painpoints that the user's felt through their interactions with the paper prototypes.
Based on user's feedback, these were the painpoints that the user's felt through their interactions with the paper prototypes.
Based on user's feedback, these were the painpoints that the user's felt through their interactions with the paper prototypes.
Mandatory login requirement to complete payment process.
Mandatory login requirement to complete payment process.
Lack of clear navigation to access purchased ticket.
Lack of clear navigation to access purchased ticket.
Endless scrolling for seat selection.
Endless scrolling for seat selection.
Ideation to improve the interface
Ideation to improve the interface
Ideation to improve the interface
Login to be made optional.
Change coach feature to be implemented in seat selection.
Check live status feature to be implemented.
Login to be made optional.
Change coach feature to be implemented in seat selection.
Check live status feature to be implemented.
High-fidelity Prototypes
High-fidelity Prototypes
High-fidelity Prototypes
Visual Language
Visual Language
The visual language involves the strategic combination of various design elements, such as colors, fonts, font sizes.
The visual language involves the strategic combination of various design elements, such as colors, fonts, font sizes.
The visual language involves the strategic combination of various design elements, such as colors, fonts, font sizes.
Iconography
Iconography
Simplified navigation to make frequently used features easier to access.
Added a meal option to support complete trip planning within the app.
Reduced friction by allowing users to explore key features before logging in.
Simplified navigation to make frequently used features easier to access.
Added a meal option to support complete trip planning within the app.
Reduced friction by allowing users to explore key features before logging in.
Simplified navigation to make frequently used features easier to access.
Added a meal option to support complete trip planning within the app.
Reduced friction by allowing users to explore key features before logging in.
Redesigned the seat selection flow to reduce confusion and help users choose seats faster.
Redesigned the seat selection flow to reduce confusion and help users choose seats faster.
Redesigned the seat selection flow to reduce confusion and help users choose seats faster.
Improved live tracking visibility so users can quickly understand train status.
Improved live tracking visibility so users can quickly understand train status.
Improved live tracking visibility so users can quickly understand train status.
Designed the Custom Support feature to allow passengers to get help quickly and efficiently, reducing frustration and improving overall trip experience.
Designed the Custom Support feature to allow passengers to get help quickly and efficiently, reducing frustration and improving overall trip experience.
Designed the Custom Support feature to allow passengers to get help quickly and efficiently, reducing frustration and improving overall trip experience.
Takeaways
Takeaways
Takeaways
Learned to prioritize research driven decisions, structure information clearly, and design practical solutions under real-world constraints.
Learned to prioritize research driven decisions, structure information clearly, and design practical solutions under real-world constraints.
Learned to prioritize research driven decisions, structure information clearly, and design practical solutions under real-world constraints.