Unity HMI

Our Mobility Practice Lead and company founders wanted us to develop an automotive HMI proof-of-concept and BUC (built up cockpit) that we could showcase at the 2023 Consumer Electronics Show. We conducted our own HMI research, consulted automotive industry design leaders in the Detroit Metro area, and flew in a developer from Unity to learn about how we can best bridge Figma designs and development in Unity.

We then set out exploring feature concepts, wireframing interaction paradigms, and establishing ergonomic patterns. The physical experience is just as important as the digital experience.

With close collaboration between design, development, motion graphics, and Unity developers, we produced software for a head unit (the center console screen) and an integrated mobile app (iOS and Andriod). Our hardware team then put together a screen that could be integrated into the BUC.

Stellantis R2

R2 Pipline

The R2 Pipeline serves as a guide for the Stellantis HMI design and development teams involved in the work, as well as stakeholders interested in the process. Stellantis came to us with a problem - their design to development process on their HMI team was taking too long and there was no shared design system across the design team that spans North America and Europe. 14 brands producing around 1,000,000 cars per year.

We took what we learned during our own internal company’s proof-of-concept (see above) and expanded it to a global scale. Through months of product discovery with Stallantis, we delivered to them a bespoke Figma-to-Unity tool called Figma Bridge that allows Unity developers to import HMI designs from Figma with the click of a button.

The result is a fully laid out Unity scene that reflects the design in Figma 1:1, and with minimal development work. It drastically cut Stellantis’s development time. Along with Figma Bridge, we visualized the production pipeline process, built out a token-based design system that is optimized for Figma Bridge, designed sample screens in Figma to be exported, and wrote thorough documentation for their design team.

UX/UI+Mograph

During the development of Figma Bridge, the design team built out the token-based design system and sample screens in Figma. We collaborated closely with our motion graphics team to introduce real-time animation and motion to the screens that were later to be built in Unity.

We used our R2 Pipeline to fine-tune and validate the process we laid out for Stellantis, and assisted the developer of Figma Bridge by supplying them with the screens we were designing. It was truly a home grown product that generated a lot of value.