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
Set the AC to 64ºF on the driver’s side be tapping the “+” and “-” signs to adjust
Turn on the steering wheel heater by sliding the climate tab at the bottom up and tapping the steering wheel heater once.
Navigate to CSULB from home by tapping “Start” that is already ready to go
Scenario 2: Climate Presets
Tap the ‘presets’ button labeled “Winter Morning” at the bottom left corner
Look towards the bottom of the list and select the “Winter Morning” preset.
Select climate settings options
Select schedule settings options
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
IOS Integration and priority
Android compatibility
Adapt layouts to iPhone and Android
Personal Reflection
The sequence of entering and exiting tasks sound similar to my personal experience
Design Considerations
Have bluetooth/phone connectivity appear first when starting the car
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
Carpool assistance features (scheduling rides, sharing real-time locations, etc.)
Sharing integrations (driver profiles, temp. access codes, keyless entry, etc.)
Sharing usage insights (data tracking for sharing habits)
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
Allow more personalization (themes, sounds, photos, etc)
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
Prioritize music (shortcuts for favorite playlists, radio stations, etc.)
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
Quick actions/favorited features (navigation, music, etc.)
Short term content (weather updates, local traffic reports, etc.)
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
Specific notifications separate from phone
Visual feedback during command processingProvide clear feedback/confirmations to ensure accuracy
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
Set the AC to 64ºF on the driver’s side be tapping the “+” and “-” signs to adjust
Turn on the steering wheel heater by sliding the climate tab at the bottom up and tapping the steering wheel heater once.
Navigate to CSULB from home by tapping “Start” that is already ready to go
Scenario 2: Climate Presets
Tap the ‘presets’ button labeled “Winter Morning” at the bottom left corner
Look towards the bottom of the list and select the “Winter Morning” preset.
Select climate settings options
Select schedule settings options
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
IOS Integration and priority
Android compatibility
Adapt layouts to iPhone and Android
IOS Integration and priority
Android compatibility
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
Have bluetooth/phone connectivity appear first when starting the car
Frequently used phone/connectivity-related apps readily available such as navigation and music.
Have bluetooth/phone connectivity appear first when starting the car
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
Carpool assistance features (scheduling rides, sharing real-time locations, etc.)
Sharing integrations (driver profiles, temp. access codes, keyless entry, etc.)
Sharing usage insights (data tracking for sharing habits)
App connections (carpooling apps, group management)
Carpool assistance features (scheduling rides, sharing real-time locations, etc.)
Sharing integrations (driver profiles, temp. access codes, keyless entry, etc.)
Sharing usage insights (data tracking for sharing habits)
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
Allow more personalization (themes, sounds, photos, etc)
Customizable functions (presets, screens, etc)
Allow more personalization (themes, sounds, photos, etc)
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
Prioritize music (shortcuts for favorite playlists, radio stations, etc.)
Optimize navigation (clear, easily readable maps and real-time updates)
Prioritize music (shortcuts for favorite playlists, radio stations, etc.)
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
Quick actions/favorited features (navigation, music, etc.)
Short term content (weather updates, local traffic reports, etc.)
Smart suggestions (frequent locations, preferred radio stations, etc.)
Quick actions/favorited features (navigation, music, etc.)
Short term content (weather updates, local traffic reports, etc.)
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
Specific notifications separate from phone
Visual feedback during command processingProvide clear feedback/confirmations to ensure accuracy
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
Specific notifications separate from phone
Visual feedback during command processingProvide clear feedback/confirmations to ensure accuracy
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