2.2 Hi-Fidelity Prototyping

Creating a high-fidelity prototype helps the UI/UX design process by providing a detailed, interactive representation of the final product. It allows designers to test functionality, user flows, and visual elements in a realistic context, making it easier to identify and address usability issues early.

High-Fidelity Wireframes (Group Collaboration)

Personal Reflection

After the wireframing and branding stages, we decided to create our own home screens and join together to collaborate on our designs and come together as one.


We used the same collaboration method as we did for our main screen mid-fi wireframes and this process was much smoother. We communicated our thoughts and opinions and were able to come to an agreement without getting caught up in the details once again.

High-Fidelity Wireframes (Screen Collaboration)

Personal Reflection

With the design of the main screen figured out, we went on ahead and designed our own screens that needed completing for our use-case scenarios.


With that being said, each of our screens followed the same main screen, but they still weren’t consistent. We realized that when too many designers are attempting to mimic one design style, there will be inconsistencies due to everyone’s personal design style and vision differences.


We solved this by narrowing down design screens to two designers: Vy and Selina. Julia and Kaitlyn worked on the cluster and Amy worked on the branding


With many revisions and going back and forth, Selina and I were able to work together to create consistencies along all the screens.

3.1 Use-Case Scenarios

Illustrate how users interact with interface in specific contexts to achieve their goals. They provide insight into user needs, behaviors, and potential challenges, helping designers create solutions that align with real-world usage. By focusing on practical applications, use-case scenarios ensure the design is intuitive, functional, and tailored to address the most relevant user tasks and objectives.

Scenario 1: Climate & Navigation

  1. Set the AC to 64ºF on the driver’s side be tapping the “+” and “-” signs to adjust

  1. Turn on the steering wheel heater by sliding the climate tab at the bottom up and tapping the steering wheel heater once.

  1. Navigate to CSULB from home by tapping “Start” that is already ready to go

Scenario 2: Climate Presets

  1. Tap the ‘presets’ button labeled “Winter Morning” at the bottom left corner

  1. Look towards the bottom of the list  and select the “Winter Morning” preset.

  1. Select climate settings options

  1. Select schedule settings options

  1. Save and finish

Team Strengths & Weaknesses

Personal Reflection

Working with a team where everyone’s strengths completed everyone’s weaknesses was an eye-opening experience.

Concern:
At first, we attempted to all do the same tasks and then come together to join ideas and collaborate. We soon came to realize that this method didn’t work the first time nor did it work the second. We had to think of a way where we can all work together without constant contrasting ideas.

Resolution:
As a solution, we communicated our strengths and weaknesses, along with with what we enjoy doing most, and we all found a middle ground. We split the tasks amongst each member based on just that and it alleviated a lot of stress since we didn’t need to keep trying to fit everyone’s needs

Adhering to Guidelines

Personal Reflection

Designing various screens to fit an hexagonal (?) shape for the cluster and a vertical shape for the infotainment was quite a challenge, but a fun one.

Concern:
Most infotainment systems I’ve seen are horizontal. This forced me to think a little more compared to looking at reference photos since vertical screens were less common.

Resolution:
Through lots of trial and error, we found a way to best fit our designs giving it enough breathing room to not look too cluttered.

3.2 Final Reflections

Reflecting on a project enhances the design process by highlighting successes, challenges, and opportunities for improvement. It provides valuable insights into what was effective and what could be refined, enabling designers to apply these lessons to future projects. This process fosters growth, encourages critical thinking, and promotes continuous improvement in design practices and team collaboration.

Logomark

Personal Reflection

Due to time constraints, project priorities, and team structure, we couldn’t dedicate as much time to branding as we had hoped.


However, after the project I chose to switch out the type that our logo used from “Komet” to “Days One.”


As mentioned previously, Luvo feels kind and accommodating because of the ability to create presets and widget customizations. The round corners create a sense of gentleness while the thick strokes create a sense of strength and energy.

Initial type choices by Amy P.

Vy’s new type choices

Primary

& Secondary

Primary

& Secondary

Logo Type

Logo Type

Elza Text (Bold)

Header

Elza Text (Bold)

Header

Komet (Bold)

Logo

Days One

Logo

Elza Text (Light)

Body

Elza Text (Light)

Body

Logomark

Personal Reflection

Due to time constraints, project priorities, and team structure, we couldn’t dedicate as much time to branding as we had hoped.


However, after the project I redesigned the logo to how I thought best fit the car and brand. I felt as though the initial logo shared similar characteristics to an already existing car company, Lexus.


Luvo’s unique UI that sets itself apart from others is its ability to create presets and customize widgets throughout different screens. To me, Luvo feels kind and accom-modating and I wanted the logo to reflect just that while still maintaining an energetic tone.

Initial logo by Amy P.

Vy’s Reiterated Logo

Naming

Personal Reflection

Choosing the name was quite easy. Because we were all designers, we were familiar with branding and how to pivot through this stage.


A few minor issue we encountered was solidifying a name after narrowing down a few. We learned from our previous mistake of getting caught up in the details and this time we went on ahead to choose a name that the majority of us liked and made the most sense to our vehicle.


In the end, we chose Luvo.

Luvo

Tellus


Solum


Luvo


lynxs

Velo


Dynam


Valens


Lunaire

2.1 Branding

Creating a survey helps the design process by gathering valuable feedback directly

from users, revealing their preferences, pain points, and expectations. This data informs design decisions, ensuring the UI infotainment system is tailored to user needs and provides a more intuitive and satisfying experience.

2.2 Hi-Fidelity Prototyping

Creating a high-fidelity prototype helps the UI/UX design process by providing a detailed, interactive representation of the final product. It allows designers to test functionality, user flows, and visual elements in a realistic context, making it easier to identify and address usability issues early.

High-Fidelity Wireframes (Group Collaboration)

Personal Reflection

After the wireframing and branding stages, we decided to create our own home screens and join together to collaborate on our designs and come together as one.


We used the same collaboration method as we did for our main screen mid-fi wireframes and this process was much smoother. We communicated our thoughts and opinions and were able to come to an agreement without getting caught up in the details once again.

High-Fidelity Wireframes (Screen Collaboration)

Personal Reflection

With the design of the main screen figured out, we went on ahead and designed our own screens that needed completing for our use-case scenarios.


With that being said, each of our screens followed the same main screen, but they still weren’t consistent. We realized that when too many designers are attempting to mimic one design style, there will be inconsistencies due to everyone’s personal design style and vision differences.


We solved this by narrowing down design screens to two designers: Vy and Selina. Julia and Kaitlyn worked on the cluster and Amy worked on the branding


With many revisions and going back and forth, Selina and I were able to work together to create consistencies along all the screens.

Personal Reflection

Myself and many others I know also use iPhone and a few of them use Samsung. Find this pattern to be more common in the states vs other countries.

Design Considerations

  1. IOS Integration and priority

  2. Android compatibility

  3. Adapt layouts to iPhone and Android

Personal Reflection

The sequence of entering and exiting tasks sound similar to my personal experience

Design Considerations

  1. Have bluetooth/phone connectivity appear first when starting the car

  2. Frequently used phone/connectivity-related apps readily available such as navigation and music.

Personal Reflection

The results of this question is what I expected. There are many instances where families work out a sharing schedule to meet their needs.

Design Considerations

  1. Carpool assistance features (scheduling rides, sharing real-time locations, etc.)

  2. Sharing integrations (driver profiles, temp. access codes, keyless entry, etc.)

  3. Sharing usage insights (data tracking for sharing habits)

  4. App connections (carpooling apps, group management)

Personal Reflection

I found it interesting that theme/color scored higher than display layout and shortcut buttons. I figured function would trump aesthetics, but in this care it turned out to be opposite.

Design Considerations

  1. Allow more personalization (themes, sounds, photos, etc)

  2. Customizable functions (presets, screens, etc)

Personal Reflection

It made sense that the most commonly used features of an infotainment system would be music and navigation since the sole purpose of driving is to navigate and having sound to fill up the empty space makes driving less tedious.

Design Considerations

  1. Prioritize music (shortcuts for favorite playlists, radio stations, etc.)

  2. Optimize navigation (clear, easily readable maps and real-time updates)

Personal Reflection

I was surprised at these results because I expected it to be around 30 minutes - 1 hr since myself and many of my peers’ commutes look like this. I found this information to be insightful as it allowed me to put myself in the driver’s shoes to think about what is often used and needed for a short drive.

Design Considerations

  1. Quick actions/favorited features (navigation, music, etc.)

  2. Short term content (weather updates, local traffic reports, etc.)

  3. Smart suggestions (frequent locations, preferred radio stations, etc.)

The 2024 Accord offers a sleek design, advanced safety features, and improved fuel efficiency. With a spacious interior, enhanced technology, and hybrid options, it delivers a comfortable and dynamic driving experience.

HONDA

2024 Accord

STARTING MSRP

$27,895

CITY/HWY MPG RATING

29/37

Entry Level/Low-Budget

Phone

Favorites

Recents

Contacts

Keypad

Voicement

Honda Link

Vehicle Notifications

Connect Honda

Connect

Display Mode

Scale on - off

Profile

Change profile

Manage profile

Maps

Search

Recent

Google Assistant

FM

Radio Channels

Station

Menu

Source

Power Flow

Mile range

Current drive

Trip Computer

Current drive

Trip A

Trip B

Menu

Clock

Time

Menu

System Updaates

Update checks

Vehicle Settings

TPMS Calibration

Meter setup

Lighting setup

Individual settings

Driver assist driver setup

Keyless access setup

Door setup

Maintenance info.

Change view

Menu

General Settings

System

Connections

Privacy

Display

Sound

Sound Volume

Camera

Voice control

Security

Advanced settings

Compass

Alexa

Google Assistant

Notifications

Advantages

The 2024 Accord’s center infotainment system boasts a user-friendly interface, a large touchscreen, and wireless connectivity for Apple CarPlay and Android Auto. Fast responsiveness, easy navigation, and crisp graphics enhance the driving experience with seamless access to entertainment and apps.

Disadvantages

While the infotainment system is intuitive, some users may find its minimalist layout lacking in physical buttons, which could complicate use while driving. Additionally, voice recognition can occasionally misinterpret commands, and higher-end features require additional subscription services.

Screens & Functions

Lockscreen

A more decluttered look, resulting in fewer distractions on the road and a clearer mind.

Customizable Widgets

Homescreen

A more detailed screen with easily accessible features and intuitive navigation.

Driver Profiles

Unlock function

Media Player

Top-to-bottom layout featuring currently playing, favorites, and recents—prioritizing ease of use and minimizing the need to search while driving.

Favorites Slider

Select 2 widgets to favorite (in presets). Tap the home button for quick accessibility to these favorited widgets.

(Home Button) Favorites Slider Function

Phone

Top-to-bottom layout featuring currently playing, favorites, and recents—prioritizing ease of use and minimizing the need to search while driving.

Keypad Function

Process

1.2 Survey Highlights & Analysis

Creating a survey helps the design process by gathering valuable feedback directly

from users, revealing their preferences, pain points, and expectations. This data informs design decisions, ensuring the UI infotainment system is tailored to user needs and provides a more intuitive and satisfying experience.

1.1 Competitor UI Deconstruction

Deconstructing the UI infotainment systems of brands like Honda and Volvo provides valuable insights into design trends, functionality, and user experience. Analyzing these systems helps identify effective features, usability challenges, and areas for improvement, guiding the design of a more intuitive, efficient, and user-centric infotainment system.

1.3 Define & Ideate

The Define stage helps clarify the specific needs and goals of the infotainment system by creating user personas and empathy maps which establishes a clear roadmap for the design. The Ideate stage fosters creative exploration, enabling the development of multiple potential solutions to meet user needs and helps refine ideas and select the most effective concepts, ensuring the resulting UI is both functional and user-friendly.

Feels

Thinks

Satisfied

Worried

Frustrated

Rushed

Interface is intuitive

Customizations would be fun

Safety of everyone

Says

“Most of my passengers never struggle while using the infotainment system which helps me not have to explain how to operate it.”

“When I search locations into my navigation it often gives me a farther location rather than closest.”

“Having an easy to reach mute button was very convenient for when the pigs pulled me over for only going 40mph over the speed limit.”

“I had messages connected from my phone and my friends were spamming the group chat so it kept pinging while I was trying to listen to music.”

System turning off randomly

Inaccurate voice commands

Inconvenient mapping

Lack of notification control

Gains

Safer driving all around

Convenience

Efficiency

Pains

Design Considerations

  1. Specific notifications separate from phone
    Visual feedback during command processing

  2. Provide clear feedback/confirmations to ensure accuracy

  3. Easy-to-reach buttons (ex. mute notifications, etc.)

Empathy Map

Alex M.

Lakewood, CA

Married

Marketing

About

Alex is someone who frequently drives for work and personal activities. They often have passengers in the car, including family, friends, or co-workers. They rely on the infotainment system for navigation, communication, and entertainment during their drives. Efficiency, safety, and convenience are Alex’s top priorities when using the car’s infotainment system.

Goals

  • Minimize distractions and easy controls for safety

  • Values time and accuracy for efficiency

Needs

  • Separate notification settings

  • Visual feedback

  • Easy-to-reach buttons

Pains

  • System shutdowns → disrupts navigation and music

  • Inaccurate voice commands → hands-free unreliable

  • Lack of notification control → distractions from excessive pings

User Persona

Low-Fidelity Wireframes

Climate tab

Personal Reflection

I knew Initially that I wanted the screen to have some sliding functions such as the climate. However, I had a bit of trouble figuring out the placement and organization of each function without it sharing too many similar characteristics of already existing UI of other cars.

Mid-Fidelity Wireframes

Personal Reflection

Doing prior research such as creating the survey and deconstructing exist-ing vehicles helped me gain insights of how users truly think apart from my own thoughts and ideas. It reminded me I cannot think for others and how imperative it is to do in order to expand that area of perspective.


When I digitized the wireframe for the main screen, I took into consideration all of my findings and a few aspects from my hand sketches to combine them hoping to be able to meet the needs and find resolutions to users’ pain points.

Personal Reflection

We decided to work on our own initial wireframes for the main screen and then collaborate to join ideas.


As we talked amongst ourselves about the pros and cons of each screen, we found difficulty coming to an agreement on where to re-arrange certain aspects, how we wanted it to look and function, and details we wanted to include and exclude. Additionally, with every feature we included came more issues such as how something would look swiped vs clicked, whether something needed to be hidden or shown, and more.


As a group of all designers, we all wanted our ideas to be seen which made us caught up on little details that didn’t need focusing on just yet.

Mid-Fidelity Wireframes (Group Collaboration)

Mid-Fidelity Wireframes (Screen Collaboration)

Personal Reflection

After completing the wireframe for the home screen, we were able to apply functions and ideas to our other screens such as the phone screen, navigation screen, and more.


Although our wireframes lacked a bit of consistency, we were able to get the main ideas down which helped us later to understand the contents and ideas of each page.

3.1 Use-Case Scenarios

Illustrate how users interact with interface in specific contexts to achieve their goals. They provide insight into user needs, behaviors, and potential challenges, helping designers create solutions that align with real-world usage. By focusing on practical applications, use-case scenarios ensure the design is intuitive, functional, and tailored to address the most relevant user tasks and objectives.

Scenario 1: Climate & Navigation

  1. Set the AC to 64ºF on the driver’s side be tapping the “+” and “-” signs to adjust

  1. Turn on the steering wheel heater by sliding the climate tab at the bottom up and tapping the steering wheel heater once.

  1. Navigate to CSULB from home by tapping “Start” that is already ready to go

Scenario 2: Climate Presets

  1. Tap the ‘presets’ button labeled “Winter Morning” at the bottom left corner

  1. Look towards the bottom of the list  and select the “Winter Morning” preset.

  1. Select climate settings options

  1. Select schedule settings options

  1. Save and finish

Team Strengths & Weaknesses

Personal Reflection

Working with a team where everyone’s strengths completed everyone’s weaknesses was an eye-opening experience.

Concern:
At first, we attempted to all do the same tasks and then come together to join ideas and collaborate. We soon came to realize that this method didn’t work the first time nor did it work the second. We had to think of a way where we can all work together without constant contrasting ideas.

Resolution:
As a solution, we communicated our strengths and weaknesses, along with with what we enjoy doing most, and we all found a middle ground. We split the tasks amongst each member based on just that and it alleviated a lot of stress since we didn’t need to keep trying to fit everyone’s needs

Adhering to Guidelines

Personal Reflection

Designing various screens to fit an hexagonal (?) shape for the cluster and a vertical shape for the infotainment was quite a challenge, but a fun one.

Concern:
Most infotainment systems I’ve seen are horizontal. This forced me to think a little more compared to looking at reference photos since vertical screens were less common.

Resolution:
Through lots of trial and error, we found a way to best fit our designs giving it enough breathing room to not look too cluttered.

Luvo is an innovative, electric vehicle designed to redefine the driving experience. As a made-up concept car, it embodies the future of transportation by prioritizing driver needs through personalized t and exceptional efficiency. 


Luvo offers a seamless blend of cutting-edge technology and user-focused design, allowing drivers to tailor every aspect of their journey to match their personal preferences. From adaptive interior features to intelligent energy management systems, Luvo ensures that comfort, convenience, and sustainability are at the forefront of every ride. This visionary vehicle represents a commitment to innovation, combining eco-friendly performance with a deeply personalized driving experience.

Automotive Infotainment System

User Interface & Experience Design

December 2024, Group Project

Project Contributers

Main Infotainment Screens

Vy Nguyen

Selina Manlapaz

Research

Vy Nguyen

Selina Manlapaz

Kaitlyn Pham

Julia Renaud

Amy Prado

Wireframes

Vy Nguyen

Selina Manlapaz

Kaitlyn Pham

Julia Renaud

Amy Prado

Cluster Design

Kaitlyn Pham

Julia Renaud

Branding

Kaitlyn Pham

Julia Renaud

Amy Prado

Vy Nguyen (new)

3.2 Final Reflections

Reflecting on a project enhances the design process by highlighting successes, challenges, and opportunities for improvement. It provides valuable insights into what was effective and what could be refined, enabling designers to apply these lessons to future projects. This process fosters growth, encourages critical thinking, and promotes continuous improvement in design practices and team collaboration.

Luvo is an innovative, electric vehicle designed to redefine the driving experience. As a made-up concept car, it embodies the future of transportation by prioritizing driver needs through personalized t and exceptional efficiency. 


Luvo offers a seamless blend of cutting-edge technology and user-focused design, allowing drivers to tailor every aspect of their journey to match their personal preferences. From adaptive interior features to intelligent energy management systems, Luvo ensures that comfort, convenience, and sustainability are at the forefront of every ride. This visionary vehicle represents a commitment to innovation, combining eco-friendly performance with a deeply personalized driving experience.

Luvo is an innovative, electric vehicle designed to redefine the driving experience. As a made-up concept car, it embodies the future of transportation by prioritizing driver needs through personalized t and exceptional efficiency. 


Luvo offers a seamless blend of cutting-edge technology and user-focused design, allowing drivers to tailor every aspect of their journey to match their personal preferences. From adaptive interior features to intelligent energy management systems, Luvo ensures that comfort, convenience, and sustainability are at the forefront of every ride. This visionary vehicle represents a commitment to innovation, combining eco-friendly performance with a deeply personalized driving experience.

Automotive Infotainment System

User Interface & Experience Design

December 2024, Group Project

Project Contributers

Main Infotainment Screens

Vy Nguyen

Selina Manlapaz

Research

Vy Nguyen

Selina Manlapaz

Kaitlyn Pham

Julia Renaud

Amy Prado

Wireframes

Vy Nguyen

Selina Manlapaz

Kaitlyn Pham

Julia Renaud

Amy Prado

Cluster Design

Kaitlyn Pham

Julia Renaud

Branding

Kaitlyn Pham

Julia Renaud

Amy Prado

Screens & Functions

Lockscreen

Lockscreen

A more decluttered look, resulting in fewer distractions on the road and a clearer mind.

A more decluttered look, resulting in fewer distractions on the road and a clearer mind.

Customizable Widgets

Customizable Widgets

Homescreen

Homescreen

A more detailed screen with easily accessible features and intuitive navigation.

A more detailed screen with easily accessible features and intuitive navigation.

Driver Profiles

Driver Profiles

Unlock function

Unlock function

Media Player

Media Player

Top-to-bottom layout featuring currently playing, favorites, and recents—prioritizing ease of use and minimizing the need to search while driving.

Top-to-bottom layout featuring currently playing, favorites, and recents—prioritizing ease of use and minimizing the need to search while driving.

Favorites Slider

Select 2 widgets to favorite (in presets). Tap the home button for quick accessibility to these favorited widgets.

Favorites Slider

Select 2 widgets to favorite (in presets). Tap the home button for quick accessibility to these favorited widgets.

(Home Button) Favorites Slider Function

(Home Button) Favorites Slider Function

Phone

Top-to-bottom layout featuring currently playing, favorites, and recents—prioritizing ease of use and minimizing the need to search while driving.

Phone

Top-to-bottom layout featuring currently playing, favorites, and recents—prioritizing ease of use and minimizing the need to search while driving.

Keypad Function

Keypad Function

Process

1.1 Competitor UI Deconstruction

1.1 Competitor UI Deconstruction

Deconstructing the UI infotainment systems of brands like Honda and Volvo provides valuable insights into design trends, functionality, and user experience. Analyzing these systems helps identify effective features, usability challenges, and areas for improvement, guiding the design of a more intuitive, efficient, and user-centric infotainment system.

Deconstructing the UI infotainment systems of brands like Honda and Volvo provides valuable insights into design trends, functionality, and user experience. Analyzing these systems helps identify effective features, usability challenges, and areas for improvement, guiding the design of a more intuitive, efficient, and user-centric infotainment system.

The 2024 Accord offers a sleek design, advanced safety features, and improved fuel efficiency. With a spacious interior, enhanced technology, and hybrid options, it delivers a comfortable and dynamic driving experience.

The 2024 Accord offers a sleek design, advanced safety features, and improved fuel efficiency. With a spacious interior, enhanced technology, and hybrid options, it delivers a comfortable and dynamic driving experience.

HONDA

HONDA

2024 Accord

2024 Accord

STARTING MSRP

STARTING MSRP

$27,895

$27,895

CITY/HWY MPG RATING

CITY/HWY MPG RATING

29/37

29/37

Entry Level/Low-Budget

Entry Level/Low-Budget

Phone

Phone

Favorites

Recents

Contacts

Keypad

Voicement

Favorites

Recents

Contacts

Keypad

Voicement

Honda Link

Honda Link

Vehicle Notifications

Connect Honda

Connect

Vehicle Notifications

Connect Honda

Connect

Display Mode

Display Mode

Scale on - off

Scale on - off

Profile

Profile

Change profile

Manage profile

Change profile

Manage profile

Maps

Maps

Search

Recent

Google Assistant

Search

Recent

Google Assistant

FM

FM

Radio Channels

Station

Menu

Source

Radio Channels

Station

Menu

Source

Power Flow

Power Flow

Mile range

Current drive

Mile range

Current drive

Trip Computer

Trip Computer

Current drive

Trip A

Trip B

Menu

Current drive

Trip A

Trip B

Menu

Clock

Clock

Time

Menu

Time

Menu

System Updaates

System Updaates

Update checks

Update checks

Vehicle Settings

Vehicle Settings

TPMS Calibration

Meter setup

Lighting setup

Individual settings

Driver assist driver setup

Keyless access setup

Door setup

Maintenance info.

Change view

Menu

TPMS Calibration

Meter setup

Lighting setup

Individual settings

Driver assist driver setup

Keyless access setup

Door setup

Maintenance info.

Change view

Menu

General Settings

General Settings

System

Connections

Privacy

Display

Sound

Sound Volume

Camera

Voice control

Security

Advanced settings

System

Connections

Privacy

Display

Sound

Sound Volume

Camera

Voice control

Security

Advanced settings

Compass

Compass

Alexa

Alexa

Google Assistant

Google Assistant

Notifications

Notifications

Advantages

Advantages

The 2024 Accord’s center infotainment system boasts a user-friendly interface, a large touchscreen, and wireless connectivity for Apple CarPlay and Android Auto. Fast responsiveness, easy navigation, and crisp graphics enhance the driving experience with seamless access to entertainment and apps.

The 2024 Accord’s center infotainment system boasts a user-friendly interface, a large touchscreen, and wireless connectivity for Apple CarPlay and Android Auto. Fast responsiveness, easy navigation, and crisp graphics enhance the driving experience with seamless access to entertainment and apps.

Disadvantages

Disadvantages

While the infotainment system is intuitive, some users may find its minimalist layout lacking in physical buttons, which could complicate use while driving. Additionally, voice recognition can occasionally misinterpret commands, and higher-end features require additional subscription services.

While the infotainment system is intuitive, some users may find its minimalist layout lacking in physical buttons, which could complicate use while driving. Additionally, voice recognition can occasionally misinterpret commands, and higher-end features require additional subscription services.

Personal Reflection

Personal Reflection

Myself and many others I know also use iPhone and a few of them use Samsung. Find this pattern to be more common in the states vs other countries.

Myself and many others I know also use iPhone and a few of them use Samsung. Find this pattern to be more common in the states vs other countries.

Design Considerations

Design Considerations

  1. IOS Integration and priority

  2. Android compatibility

  3. Adapt layouts to iPhone and Android

  1. IOS Integration and priority

  2. Android compatibility

  3. Adapt layouts to iPhone and Android

Personal Reflection

Personal Reflection

The sequence of entering and exiting tasks sound similar to my personal experience

The sequence of entering and exiting tasks sound similar to my personal experience

Design Considerations

Design Considerations

  1. Have bluetooth/phone connectivity appear first when starting the car

  2. Frequently used phone/connectivity-related apps readily available such as navigation and music.

  1. Have bluetooth/phone connectivity appear first when starting the car

  2. Frequently used phone/connectivity-related apps readily available such as navigation and music.

Personal Reflection

Personal Reflection

The results of this question is what I expected. There are many instances where families work out a sharing schedule to meet their needs.

The results of this question is what I expected. There are many instances where families work out a sharing schedule to meet their needs.

Design Considerations

Design Considerations

  1. Carpool assistance features (scheduling rides, sharing real-time locations, etc.)

  2. Sharing integrations (driver profiles, temp. access codes, keyless entry, etc.)

  3. Sharing usage insights (data tracking for sharing habits)

  4. App connections (carpooling apps, group management)

  1. Carpool assistance features (scheduling rides, sharing real-time locations, etc.)

  2. Sharing integrations (driver profiles, temp. access codes, keyless entry, etc.)

  3. Sharing usage insights (data tracking for sharing habits)

  4. App connections (carpooling apps, group management)

Personal Reflection

Personal Reflection

I found it interesting that theme/color scored higher than display layout and shortcut buttons. I figured function would trump aesthetics, but in this care it turned out to be opposite.

I found it interesting that theme/color scored higher than display layout and shortcut buttons. I figured function would trump aesthetics, but in this care it turned out to be opposite.

Design Considerations

Design Considerations

  1. Allow more personalization (themes, sounds, photos, etc)

  2. Customizable functions (presets, screens, etc)

  1. Allow more personalization (themes, sounds, photos, etc)

  2. Customizable functions (presets, screens, etc)

Personal Reflection

Personal Reflection

It made sense that the most commonly used features of an infotainment system would be music and navigation since the sole purpose of driving is to navigate and having sound to fill up the empty space makes driving less tedious.

It made sense that the most commonly used features of an infotainment system would be music and navigation since the sole purpose of driving is to navigate and having sound to fill up the empty space makes driving less tedious.

Design Considerations

Design Considerations

  1. Prioritize music (shortcuts for favorite playlists, radio stations, etc.)

  2. Optimize navigation (clear, easily readable maps and real-time updates)

  1. Prioritize music (shortcuts for favorite playlists, radio stations, etc.)

  2. Optimize navigation (clear, easily readable maps and real-time updates)

Personal Reflection

Personal Reflection

I was surprised at these results because I expected it to be around 30 minutes - 1 hr since myself and many of my peers’ commutes look like this. I found this information to be insightful as it allowed me to put myself in the driver’s shoes to think about what is often used and needed for a short drive.

I was surprised at these results because I expected it to be around 30 minutes - 1 hr since myself and many of my peers’ commutes look like this. I found this information to be insightful as it allowed me to put myself in the driver’s shoes to think about what is often used and needed for a short drive.

Design Considerations

Design Considerations

  1. Quick actions/favorited features (navigation, music, etc.)

  2. Short term content (weather updates, local traffic reports, etc.)

  3. Smart suggestions (frequent locations, preferred radio stations, etc.)

  1. Quick actions/favorited features (navigation, music, etc.)

  2. Short term content (weather updates, local traffic reports, etc.)

  3. Smart suggestions (frequent locations, preferred radio stations, etc.)

1.2 Survey Highlights & Analysis

1.2 Survey Highlights & Analysis

Creating a survey helps the design process by gathering valuable feedback directly

from users, revealing their preferences, pain points, and expectations. This data informs design decisions, ensuring the UI infotainment system is tailored to user needs and provides a more intuitive and satisfying experience.

Creating a survey helps the design process by gathering valuable feedback directly

from users, revealing their preferences, pain points, and expectations. This data informs design decisions, ensuring the UI infotainment system is tailored to user needs and provides a more intuitive and satisfying experience.

1.3 Define & Ideate

The Define stage helps clarify the specific needs and goals of the infotainment system by creating user personas and empathy maps which establishes a clear roadmap for the design. The Ideate stage fosters creative exploration, enabling the development of multiple potential solutions to meet user needs and helps refine ideas and select the most effective concepts, ensuring the resulting UI is both functional and user-friendly.

The Define stage helps clarify the specific needs and goals of the infotainment system by creating user personas and empathy maps which establishes a clear roadmap for the design. The Ideate stage fosters creative exploration, enabling the development of multiple potential solutions to meet user needs and helps refine ideas and select the most effective concepts, ensuring the resulting UI is both functional and user-friendly.

1.3 Define & Ideate

The Define stage helps clarify the specific needs and goals of the infotainment system by creating user personas and empathy maps which establishes a clear roadmap for the design. The Ideate stage fosters creative exploration, enabling the development of multiple potential solutions to meet user needs and helps refine ideas and select the most effective concepts, ensuring the resulting UI is both functional and user-friendly.

Feels

Thinks

Satisfied

Worried

Frustrated

Rushed

Interface is intuitive

Customizations would be fun

Safety of everyone

Says

“Most of my passengers never struggle while using the infotainment system which helps me not have to explain how to operate it.”

“When I search locations into my navigation it often gives me a farther location rather than closest.”

“Having an easy to reach mute button was very convenient for when the pigs pulled me over for only going 40mph over the speed limit.”

“I had messages connected from my phone and my friends were spamming the group chat so it kept pinging while I was trying to listen to music.”

System turning off randomly

Inaccurate voice commands

Inconvenient mapping

Lack of notification control

Gains

Safer driving all around

Convenience

Efficiency

Pains

Design Considerations

  1. Specific notifications separate from phone
    Visual feedback during command processing

  2. Provide clear feedback/confirmations to ensure accuracy

  3. Easy-to-reach buttons (ex. mute notifications, etc.)

Empathy Map

Alex M.

Lakewood, CA

Married

Marketing

About

Alex is someone who frequently drives for work and personal activities. They often have passengers in the car, including family, friends, or co-workers. They rely on the infotainment system for navigation, communication, and entertainment during their drives. Efficiency, safety, and convenience are Alex’s top priorities when using the car’s infotainment system.

Goals

  • Minimize distractions and easy controls for safety

  • Values time and accuracy for efficiency

Needs

  • Separate notification settings

  • Visual feedback

  • Easy-to-reach buttons

Pains

  • System shutdowns → disrupts navigation and music

  • Inaccurate voice commands → hands-free unreliable

  • Lack of notification control → distractions from excessive pings

User Persona

Low-Fidelity Wireframes

Climate tab

Personal Reflection

I knew Initially that I wanted the screen to have some sliding functions such as the climate. However, I had a bit of trouble figuring out the placement and organization of each function without it sharing too many similar characteristics of already existing UI of other cars.

Mid-Fidelity Wireframes

Personal Reflection

Doing prior research such as creating the survey and deconstructing exist-ing vehicles helped me gain insights of how users truly think apart from my own thoughts and ideas. It reminded me I cannot think for others and how imperative it is to do in order to expand that area of perspective.


When I digitized the wireframe for the main screen, I took into consideration all of my findings and a few aspects from my hand sketches to combine them hoping to be able to meet the needs and find resolutions to users’ pain points.

Personal Reflection

We decided to work on our own initial wireframes for the main screen and then collaborate to join ideas.


As we talked amongst ourselves about the pros and cons of each screen, we found difficulty coming to an agreement on where to re-arrange certain aspects, how we wanted it to look and function, and details we wanted to include and exclude. Additionally, with every feature we included came more issues such as how something would look swiped vs clicked, whether something needed to be hidden or shown, and more.


As a group of all designers, we all wanted our ideas to be seen which made us caught up on little details that didn’t need focusing on just yet.

Mid-Fidelity Wireframes (Group Collaboration)

Mid-Fidelity Wireframes (Screen Collaboration)

Personal Reflection

After completing the wireframe for the home screen, we were able to apply functions and ideas to our other screens such as the phone screen, navigation screen, and more.


Although our wireframes lacked a bit of consistency, we were able to get the main ideas down which helped us later to understand the contents and ideas of each page.

Logomark

Personal Reflection

Due to time constraints, project priorities, and team structure, we couldn’t dedicate as much time to branding as we had hoped.


However, after the project I chose to switch out the type that our logo used from “Komet” to “Days One.”


As mentioned previously, Luvo feels kind and accommodating because of the ability to create presets and widget customizations. The round corners create a sense of gentleness while the thick strokes create a sense of strength and energy.

Initial type choices by Amy P.

Vy’s new type choices

Primary

& Secondary

Primary

& Secondary

Logo Type

Logo Type

Elza Text (Bold)

Header

Elza Text (Bold)

Header

Komet (Bold)

Logo

Days One

Logo

Elza Text (Light)

Body

Elza Text (Light)

Body

Logomark

Personal Reflection

Due to time constraints, project priorities, and team structure, we couldn’t dedicate as much time to branding as we had hoped.


However, after the project I redesigned the logo to how I thought best fit the car and brand. I felt as though the initial logo shared similar characteristics to an already existing car company, Lexus.


Luvo’s unique UI that sets itself apart from others is its ability to create presets and customize widgets throughout different screens. To me, Luvo feels kind and accom-modating and I wanted the logo to reflect just that while still maintaining an energetic tone.

Initial logo by Amy P.

Vy’s Reiterated Logo

Naming

Personal Reflection

Choosing the name was quite easy. Because we were all designers, we were familiar with branding and how to pivot through this stage.


A few minor issue we encountered was solidifying a name after narrowing down a few. We learned from our previous mistake of getting caught up in the details and this time we went on ahead to choose a name that the majority of us liked and made the most sense to our vehicle.


In the end, we chose Luvo.

Luvo

Tellus


Solum


Luvo


lynxs

Velo


Dynam


Valens


Lunaire

2.1 Branding

Creating a survey helps the design process by gathering valuable feedback directly

from users, revealing their preferences, pain points, and expectations. This data informs design decisions, ensuring the UI infotainment system is tailored to user needs and provides a more intuitive and satisfying experience.

Feels

Thinks

Satisfied

Worried

Frustrated

Rushed

Interface is intuitive

Customizations would be fun

Safety of everyone

Says

“Most of my passengers never struggle while using the infotainment system which helps me not have to explain how to operate it.”

“When I search locations into my navigation it often gives me a farther location rather than closest.”

“Having an easy to reach mute button was very convenient for when the pigs pulled me over for only going 40mph over the speed limit.”

“I had messages connected from my phone and my friends were spamming the group chat so it kept pinging while I was trying to listen to music.”

System turning off randomly

Inaccurate voice commands

Inconvenient mapping

Lack of notification control

Gains

Safer driving all around

Convenience

Efficiency

Pains

Design Considerations

  1. Specific notifications separate from phone
    Visual feedback during command processing

  2. Provide clear feedback/confirmations to ensure accuracy

  3. Easy-to-reach buttons (ex. mute notifications, etc.)

Empathy Map

Alex M.

Lakewood, CA

Married

Marketing

About

Alex is someone who frequently drives for work and personal activities. They often have passengers in the car, including family, friends, or co-workers. They rely on the infotainment system for navigation, communication, and entertainment during their drives. Efficiency, safety, and convenience are Alex’s top priorities when using the car’s infotainment system.

Goals

  • Minimize distractions and easy controls for safety

  • Values time and accuracy for efficiency

Needs

  • Separate notification settings

  • Visual feedback

  • Easy-to-reach buttons

Pains

  • System shutdowns → disrupts navigation and music

  • Inaccurate voice commands → hands-free unreliable

  • Lack of notification control → distractions from excessive pings

User Persona