top of page
infotainment car.png

Infotainment System

Course | Interactive Design

For this project, our team was tasked with created an infotainment system that can work both with touch screen and physical tools within design constraints of tasks provided. Our team consisted of four members including myself, which we all divided up our work evenly.

Summary | Infotainment System

Course | Agile Project Management

Role | Designer  I was placed in a group with three other designers, we split up our work evenly amongst ourselves, however most of the design work forward is mainly based off of my wireframing. 

Time Frame | 7 weeks

Proposed solution | Our team project called for a design that would be a well refined infotainment system meant to serve our users in the best possible way.

Problem solved | We were able to create an infotainment system with a goal of limiting the number of both physical and touch screen inputs as possible while keeping in mind the majority of user input.

Challenges | The main challenge of this course was that our assignment sheets did not always include what our professor required or expected out of our teams. To mitigate errors or create busy work, we created a constant dialogue and communicated directly with our professor in each step of our project development to ensure it is in fact what she wanted.

User impacts |  Our user interviews helped us get a general sense of what a user intends on and would like to see on each screen. Our interviews also helped us understand what are users key desires when using an infotainment system. We understood we had to design for easy scanability and just enough inputs for the user to not make a mistake while keeping focus when driving.  

Lessons learned | This is probably one of my favorite projects I have worked on because of how much I have learned. In this project, I learned how to use figma, which I found not to be as difficult of a program I would have thought it to be, it definitely has its differences from Adobe XD but I managed it well. My team taught me that I have an eye for design and that I should be proud of my work. From this project I learned the importance of communication between users, my teammates and professor in order to create a prototype that goes beyond expectation. I also learned the importance of a good team, this was not an easy feat to accomplish but my team made the hard hours put in worth it. Overall, I commend this project as a turning point in viewing myself as a well curated designer.

Interview questions 1.png

Week One

This week we got assigned our group members as well as our group project of designing an infotainment system.  Our first tasks was to create a project name for ourselves in which we chose, "Crunchy Toast." We then pieced together a script to interview users based on what they would like to see and not like to see in an infotainment system. Scripts ranged between 10-15 questions and needed to include a reflection based on the word choice in the script.

What I did this week | I created four user questions as well as conducted a user interview. 

User Persona.png

Week Two

After our interview script got approved, we interviewed at least four friends or family members about your product. As a group, we transcribe each interview and analyze our interviewees' responses. Based on our analysis we then created provisional persona’s on the basis of these interviews.

What I did this week | I created a user persona based off what was seen as necessary from our user interviews.

KLM Heuristic.png

Week Three

Using the provisional persona’s, we then developed and wrote scenarios using our infotainment system. We then created a keystroke level model and heuristics to generate design requirements for the product.

What I did this week | I created my own KLM charts for each interaction.

Screen sketches part 1_edited.jpg

Week Four

What I did this week | Based on our keystroke model, and Heuristic Evaluations, we each sketched a minimum of 10 “screens” for what the infotainment system would entail based on the interviews and requirements given as well.

Change audio source (FM to AM) Go from audio to navigation

End navigational route

Reject Incoming call​

Listen to a text message

Change the color of the display

Turn on a/c and adjust temperature to 72 Degrees

View Full Interaction Map Sketches

Week 5

This week we worked independently and coded a webpage based on one of the requirements.

What I did this week | I designed and coded how to change audio sources (AM to FM).

Week Six

This week we shared all our sketches, designs and webpages with the group so we can create a unanimous design, refining our past designs and limiting the amount of button clicks. We shared our designs amongst each other and voted for which designs and aspects we liked the most. We compiled all our designs into creating an interaction map, iterating our sketches in Figma.

What I did this week | This week I presented my sketches to the group which they had liked a lot. We integrated my design as the basis of our thought process. I was responsible for interaction mapping our, "Change Color" setting's navigation as well as "Reject Incoming call" navigation. I also aided in creating out steering wheel D Pad design, deciding to go down a dual button route, I chose where the buttons would go as well as indicators based on common D Pad configurations. 

Interaction iteration maps.png

Week Seven

This week we created a clickable prototype to demonstrate the user navigation of our prototype. We decided to create it using Figma to get more familiar with the application. Once our prototype was approved we interviewed 5 friends/family using our high-fidelity prototype. We incorporated a system usability scale in our interview as well. We also provided a reflection for our class deliverables. We then presented all our deliverables and our findings.

What I did this week | I completed a final design prototype for the "Change the color of the Display" Navigation as well as, the "Listen to text message" navigation. I aided in the compilation of all our work in our final deliverable as well as lead our interactive prototype presentation. 

Final Interaction.png
bottom of page