Bridging the Gap: Design-to-Development in Automotive UX

In the fast-paced automotive industry, one of the most pressing challenges lies in bridging the gap between designers and developers—especially when rapid iteration is essential. Traditionally, the workflow involves designers handing off static assets to developers, who must then build the entire experience from scratch. This process is not only time-consuming but also technically complex.
Each design revision, no matter how minor, requires developers to recode and redeploy interfaces within the target in-car environment—often a physical developer vehicle. This results in a costly and slow development cycle, making it difficult to test early concepts, validate design decisions, or adapt quickly to feedback. The conventional pipeline struggles to keep up with the industry's demand for speed, precision, and cross-functional collaboration.

Solution: A Unified Workflow with ProtoPie & Real-Time Testing

To solve the disconnect between design and development, we introduced a powerful toolchain that redefines the automotive UX workflow—centered around ProtoPie as the core design and prototyping platform. Instead of relying solely on traditional handovers, ProtoPie allows cross-functional teams to work collaboratively within a single, interactive environment.
This approach enables fast, no-code iterations directly on high-fidelity prototypes. Revisions that once took days of recoding can now be tested, tweaked, and validated in real-time—cutting down development time drastically.
But the innovation doesn’t stop at prototyping. By mapping real vehicle CAN bus signals to an MQTT server, and integrating it with ProtoPie Connect, we’ve made it possible to test prototypes directly on the target hardware—the actual in-vehicle system. This allows upper management, clients, and engineers to interact with production-ready experiences rather than static screens, significantly enhancing decision-making and approval processes.

Learning Curve & Technical Implementation

Throughout the project, I navigated a steep but rewarding learning curve—gradually mastering the tools and technologies that brought the entire workflow together. The process began with learning the basics of ProtoPie and ProtoPie Connect, starting with UI structure and interactions.
‍
From there, I:

• Imported high-fidelity Figma UI designs into ProtoPie, establishing a foundation for interactive prototyping.
• Learned how to configure APIs inside ProtoPie Connect, enabling dynamic data flow and interactions.
• Explored Spline and Rive integration, incorporating lightweight 3D and motion elements into the prototype.
  Embedded real-time map data using Mapbox API through custom HTML and CSS components, simulating navigation and geolocation features within the HMI.
• Set up a local server to link all tools—ensuring communication between ProtoPie, vehicle signals via MQTT, and custom components.Integrated Unity 3D assets into the experience, helping replicate realistic in-vehicle environments and laying the groundwork for potential real-world implementation.
• This multi-stage learning journey not only expanded my technical toolkit but also helped me understand how to merge design with engineering logic—a critical skill in the automotive UX field.

Conclusion: Accelerated Innovation Through Signal-Driven Prototyping

By implementing this unified, signal-integrated workflow with ProtoPie and MQTT-based vehicle signal mapping, we successfully transformed the way automotive UX is developed and tested. Designers can now push their concepts directly to the target environment, eliminating the traditional bottlenecks caused by manual coding and lengthy handovers.
This new approach dramatically accelerates iteration speed, allowing for real-time feedback and refinement. Different departments—whether working on 3D models, UI components, or navigation systems—can now work independently, then seamlessly embed their contributions into a shared ProtoPie prototype.
Ultimately, this methodology has enabled faster decision-making, improved cross-team collaboration, and reduced the time and cost of development—bringing design visions to life in a way that’s testable, interactive, and production-aware from day one.