This project was a 3-person, 2-weekdesign + production sprint to help us better understand an emerging space: Automotive UI as a real-time 3D experience. Our clients, and us as designers and animators, were hitting a wall using pre-rendered graphics. Many of the best ideas were getting lost in final implementations.

When we find ourselves with that rare breath between projects, we like to spend that time honing our creative and technical skills. This search for inspiration led us to create a metaphysical journey through the different moods and sensations that come from driving. Beginning with an initial spark of mystery and excitement, our vehicle journeys through an evolving landscape. Taking a chance is met with the reward of exhilaration and a transformative experience. We used this in-house project as a jumping off point for our UI. We treated it as a fictional brand film that we could take design and story cues from. Dissecting the world and story we created for the piece quickly began to inform our creative process.

Given the highly confidential nature of automotive UI projects, we wanted to use this project as an opportunity to showcase the most crucial aspect of this type of work: PROCESS. Each of our projects always begins with a phase of exploration. Before we push a single pixel, we think, read, and converse. For us, this often begins with creating word lists and affinity diagrams. A word on its own can be incredibly informative and emotionally evocative, sparking a unique thought based on personal experience for each person that reads it. Word associations lead us down a path where we can begin to see themes. What words surprise us? Do some of the same words appear on multiple designers’ lists? Once clear themes and recurring ideas boil to the surface, we began to think about these concepts in the more specific context of how they relate back to our initial brand inspiration and may manifest in a UI design.

A theme we began to see crop up in our word exercises was one of evolution, change, and intentionality. We wanted to create a UI that was modular in nature. Something that was built from pieces that could rearrange, expand, reveal, or distill information in a way that was predictable and intuitive to the user. Each driver is unique and has a different preference for the amount of telemetry they are being provided at a given moment. We wanted to design a system that would easily allow a driver to simplify or complicate their interface as they saw fit, all while curating a beautiful and intentional experience. Hence, ADAPTABLE TRANSFORMATION. We also saw this adaptability as not just an opportunity for customization, but also education. An interface could respond in a way that guided a user, transforming them into a better driver. Providing answers to questions a user hadn’t thought to ask yet creates an intuitive experience that helps them get the most out of their vehicle and their drive.

With a clear concept in mind, it was time to start collecting visual ideas. We created mood boards that explored what words like transformation, modularity, lens, mysterious, or guide could mean visually. Intentionally avoiding existing UI design as a source of inspiration, we looked at nature, product design, cinematography, sculpture, painting, and many other facets of art and design.

Once we had an established direction, we finally looked at what was happening visually in the automotive UX/UI landscape. This benchmarking process started many conversations that led us to questions. What screen formats were being utilized? What design language was succeeding or failing? How much information is too much? How much is too little? What’s the most conservative take versus what’s the most “out there” take? Do we even need a UI if these vehicles will just be driving themselves? Does infotainment just become entertainment?

Our team worked closely together by utilizing tools like Figma to keep a constant collaboration and flow of knowledge moving between all of us. We started simple; establishing grids to use as the building blocks for our wireframes. It was a constant process of iteration as we considered details like layout, rim block, text size, layering, potential animation, and telltales. After we decided on the most successful wireframe layout, we began fleshing out details and establishing a look and feel for our UI.

The next phase of the project was to translate our design and 3D exploration into a real-time experience. We wanted to make sure there was complete parity between our designs and the final implementation. We began by building out a system to create our UI panels: a relatively simple step. Shaders and lighting needed to be developed to give the panels a sense of physicality and match the original UI designs.Creating the 3D backgrounds, Lane Keeping systems, and ADAS elements required optimizing of 3D data and recreating lighting and shaders that would reflect the original designs. We were able to further refine and tweak the aesthetics to account for better usability and greater visual interest.  We wanted to make sure the UI would be populated with responsive content, so creating our own system of inputs and vehicle telemetry that could be visually represented to the user was necessary. Speedometers, mileage, the clock, weather, time of day, regen/depletion rate, rate of acceleration, and dynamic backgrounds all had to respond to user input.The result was an application that would allow for a relatively simple integration with a real vehicle’s computer systems.

Exploring new mediums and tools is a constant pursuit for us. Tackling the challenges and embracing the opportunities of a real-time pipeline was an immensely satisfying process. Developing a workflow to bring us from an idea through to the final execution was a surprisingly intuitive process. We found we could rely on our tried-and-true design principals throughout the experience to keep us grounded in this newly discovered land. Collaborative tools like Miro and Figma allowed us to keep the design process feeling like a conversation. We found the gap between our typical 3D pipeline to Unreal Engine a comfortable one to traverse. Bringing a solid understanding of modeling, animation, shader design, and optimization principles with us, Unreal Engine felt familiar. Creating a visual parity between Redshift renders from Cinema 4D and final output from Unreal Engine was rewarding for the team. Watching images play back in real-time with the level of fidelity we expect from an overnight render from a typical 3D package was truly astonishing. Working our way through Blueprints and C++ was our biggest potential challenge from the start. Having built several interactive experiences before, it was a straightforward process to project that knowledge base onto this new workflow. Real-time graphics bring the opportunity for wholly unique experiences for every user. We’re excited to have this new skill set in our arsenal and enter this era of motion design.

Development: Jake Matauch