Smart Energy Management In-Vehicle System with AI

Project Duration: August 2024 - December 2024

Project Partner: Imani Ahmed, Received Feedback From: Stellantis UX Representatives

Project Duration: August 2024 - December 2024

Project Partner: Imani Ahmed, Received Feedback From: Stellantis UX Representatives

In my first semester senior year of college, I took a leap into an Automotive UX class based on previous experience with the professor, recommendations from classmates and friends, and - most importantly - wanting to challenge myself. While I do love driving, I have little to no knowledge on car companies, makes and models, or what goes into designing in-vehicle infotainment systems. With the knowledge of my own personal vehicle's technology, I jumped right into the terminology, standard practices, and specifics of designing for car interiors. Our project had two main phases. The first was the first half of the semester we spent familiarizing ourselves with displays, researching, practicing tracing (my favorite part), and working towards the initial goal of setting up for part two. The second was the second half of the semester where we got paired with a classmate for a project hosted by Stellantis. We were given the choice of three prompts, with the ultimate goal of a project presentation in front of representatives of the UX team at Stellantis. Enjoy the finished products!

Overview

This project was separated into five checkpoints, the first three were individual background work, the last two were partner higher fidelity work. Throughout the middle of them were smaller assignments such as practice with display space management, image tracing, and mobile app ideating. The main checkpoints were: 1. Display Spacing and Management, Low Fidelity 2. Competitive Analysis & Research 3. Infotainment System Wireframing, Low/Mid Fidelity 4. Initial High Fidelity Infotainment System 5. Final Submission, Presentation, and Prompt Integration Feel free to scroll to any seciton that interests you the most!

Display Spacing and Management, Low Fidelity

Display Spacing and Management, Low Fidelity

I was definitely starting from scratch when it came ot this project. On the left is my first attempt at what I hoped a display could look like for the final project. I combined my knowledge from my personal vehicle as well as what I learned from class to organize, then used Figma's columns feature in order to align all the necessary features within provided screen sizes. Some main required components included: speedometer, tell tale icons, PRND (prindle), range & odometer, an app selector, status bar, and turn by turn navigation. The next aspect of the assignment "upgraded" our initial puzzle pieces into a few audio and navigation features. We gained practice on designing an extended app selector, music section, and navigation home screen. Tis began our practice with using consistent iconography!

Competitive Analysis & Research

Competitive Analysis & Research

Next, before we were able to start on our specific project, we had the task of completing a Competitive Analysis of a vehicle feature of our choice. In my randomly assigned group, we focused on the Phone Call software/hardware on vehicle steering wheels. By picking diverse steering wheels from varying companies, we had the chance to explore many implementations - from the basic "OK" button in a 2019 Volkswagen Atlas to a scroll wheel in the Tesla Model 3. This enables me to better understand rationale behind design choices, so that - when the time comes - I can better justify my in-vehicle choices. On the right image is an example of some tracing I did for a 2014 Jeep Grand Cherokee, which will come in handy later in the project.

Infotainment System Wireframing, Low/Mid Fidelity

Infotainment System Wireframing, Low/Mid Fidelity

Moving into the design stages of our final project (finally!), I started with some individual low fidelty screens based on the style of my previous assignment for the home screen on the center console. I decided to focus on vehicle controls within the center console, and had the task of including many features including windshield wipers, light brightness, drive mode, mirror folding, and more! We were also tasked with tracing a steering wheel and a vehicle interior (shown right) which we would be eventually using in our center console of our final project. These designs and tracings became our low fidelity pieces to expand upon for the final project.

Initial High Fidelity Infotainment System

Initial High Fidelity Infotainment System

We received feedback on our low fidelity work and were able to then bump our progress up to some initial high fidelity designs. With my partner, we began to combine our individual low fidelity work by communicating, taking pieces from each others' designs, and making compromises along the way. These compromises included iconography, home screen feature locations, and other minor aspects. By communicating, delegating, and gathering feedback along the way, we were able to produce our style guide, driver cluster, center console, and mobile app initial designs.

Final Submission, Presentation, and Prompt Integration

Final Submission, Presentation, and Prompt Integration

We then received another round of feedback before having the chance to make edits and a final presentation to be shown in front of our class and a panel of Stellantis designers. By delegating feedback tasks, continuing weekly meetings, and asking for help when needed - my partner and I produced our final slides. These included a project overview, problem statement, background information, interactive prototypes, design decisions, and further work to be done. I had a great experience working on this Automotive UX project, and it was an amazing introduction into the industry. I learned so much about automotive design terminology, high fidelity work, tracing, and presenting to a client!

Tommy Joppich 2025

Tommy Joppich 2025

Tommy Joppich 2025