IN-VEHICLE INFOTAINMENT SCREENS
PROJECTS
In the University of Michigan's SI 311 (Introduction to Automotive & Mobility UX) course, I learned about the automotive industry and designing in-vehicle digital interfaces under the instruction of James Rampton (Lead Product Designer at General Motors). Throughout the class, I was tasked with conducting research and/or creating wireframes for in-vehicle infotainment screens (and a mobile app landing page) according to specified design briefs/problems.
Conducted a competitive analysis in which I researched various industry vehicle brands and models and came up with a conclusion regarding a reoccurring design feature and provided related take-aways and considerations for future vehicle designs.
Traced ideal screens (including an instrument cluster and center display) for a vehicle type and added information content blocks, such as a speedometer, for them in a low-level wireframes within Figma.
Created detailed wireframe screens for inside and outside of a vehicle for notifying users of low tire pressure and where to monitor it. In-vehicle screens included an instrument cluster (or driver display) and center display, and another screen was made for a mobile app landing page.
PROJECT #1: COMPETITIVE REVIEW
Created with Figma
To conduct a competitive analysis of vehicle infotainment features amongst various automotive brands and models and develop a conclusion, I looked over dozens of car interiors via Screens Studio. I noted similarities and differences I found among the interfaces of different brands, types of vehicles, etc.
Eventually, I developed conclusion: there is an industry standard of using a digital speedometer (along with or instead of an analog one) in a vehicle's instrument cluster/driver display.
To support my claim, I gathered evidence in the form of pictures of several cars, no matter what brand or type, from Screens Studio. Then, based off of my observations, I generated a list of key take-aways and considerations that I thought automotive companies should consider in future designs.
PROJECT #2: SCREEN SIZES AND CONTENT BLOCKS
Created with Figma
For this project, I chose to focus on full-size SUVs when creating my screens. Although the 2023 Cadillac EV LYRIQ is a mid-size SUV, I was inspired by its long, sleek, and curved screen that includes the driver and center displays and spans most of the car dashboard. As such, I chose to trace it as reference for my screens.
Drawing breath from many screens I examined over Screens Studio (including those of the 2021 Lucid Air and Cadillac Escalade) while also incorporating my own imagination, I then went about determining which information or features I wanted to include in my screens.
While organizing the content of my screens, I considered automotive trends for infotainment interfaces as well as UX guidelines. For example, I chose to place the app selector towards the bottom left side of my driver display because I understood that due to Fitts' Law, it would be easier for the driver to reach and use since its closer.
My final wireframe screens can be seen below.
TITLE OF THE CALLOUT BLOCK
PROJECT #3: WIREFRAME FRAMEWORK FOR MONITORING TIRE PRESSURE
Created with Figma
This project was split into two different design briefs that focused on creating screens that would alert drivers of low tire pressure and guide them to where they could learn more about the issue an how to resolve it. For the first part, only in-vehicle screens, including a driver display and center display, needed to be made. The second part required an additional page consisting of HVAC controls within the center display and a mobile app landing page to be made.
I chose to focus on luxury vehicles when creating my designs, and I used the 2020 Mercedes Benz S-Class and the 2021 Rivian R1T as references for my traces and screen sizes.
My screens and the key UI/UX design decisions I made when creating them can be viewed via my Figma design file for the project. I've included images of my information cluster and the "Vehicle Status/Controls" page of my center console below.
OTHER RELATED PROJECTS
Created with Figma & Google Slides
For a mid-term project, I was put in a team with other students to work on creating UI screens for a full-size SUV. I was put in charge of creating my team's cluster or driver display screen. My final screen can be seen below.
Besides this class, I also took a studio course with Scott Martin who has experience as General Motors' Creative Director for In-Vehicle UI. The class focused on designing user interfaces for automotive spaces with the help of graphic design principles. Students were tasked with identifying visual styles and design trends as well as with developing a visual blueprint and/or branding trajectory for a vehicle UI. For my final project, students had to make a car UI North Star brand essence and vision guide. This can be viewed here.