Unreal Engine UX/UI Demo
This project was a 3-person, 2-week, design and 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.
Creative Director: Marcus Mullins
Design: Alex Chopjian, Marcus Mullins
2D Animation: Alex Chopjian
3D Animation: Alex Chopjian, Marcus Mullins
Development: Jake Matauch
Music & SFX: Marcus Mullins
Client: Lunar North
See more process on Behance.
Real-Time Capture From UE4
Starting With a Story: Initial Inspiration
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.
Design Process
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.
Wireframing + Design
3D Design Exploration
Final Design
Building for Real-Time
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.
