Brenon Kalu
Eon Jung
Megan Matsumoto
Krystle Young
Talha Aamir
Veronica Hernandez
IN4MATX 284 | Mini Project 04 | Option 2 | Redesign: from bad to good | Week 8 | 03/05/17
Table of Contents
3
4
5
6
7
8
9-11
12-13
14
15
16
17
18
19
20
21
22-25
26
27
28-29
30-33
34
35
Introduction
Why we chose this interface
About the 2016 Prius Dashboard
Problem Statement
How might we create a more user-centric car dashboard and interface that is safe, intuitive, easy-to-learn, and not overly distracting?
Constraints
Project Timeline
Project Roles
UX Designers : Eon Jung, Talha Aamir
After conducting product and user research, draw initial sketches with justifications and present it to the team. Move forward by incorporating the team feedback into initial and final wireframes.
UI/Designer : Veronica Hernandez, Krystle Young
Create the style guide, final mockup and prototype based on final wireframes from the UX designers. The designers iterate based on team evaluation and feedback.
Presentation Design : Brenon Kalu, Megan Matsumoto
Collect and organize all relevant project materials (data, research, meeting notes, sketches, wireframes, final design and feedback) to tell the story of the entire design process/rationale from beginning to end in a final presentation.
| | | | | 2/17 Decide on interface to redesign | 2/18 |
2/19 Initial sketches | 2/20 | 2/21 Meeting Sketch Feedback Wireframe brainstorm | 2/22 Initial wireframe | 2/23 Initial Mockups | 2/24 Meeting Initial Mockup Feedback | 2/25 Final Mockups |
2/26 Presentation slide created | 2/27 | 2/28 Meeting Final Mockup Feedback | 3/01 Refine the Mockup, Hi-Fi Prototype | 3/02 | 3/03 Meeting Finalize Presentation | 3/04 |
Roles are assigned but members are encouraged to freely contribute to different aspects of research and design for the project as they see fit to facilitate group collaboration and teamwork.
Investigation
Product Research, Competitive Analysis
Prius Research
The methods we used to gather findings included primary research and secondary research.
Primary Research
Secondary Research
Tesla Model 3 SUV
Honda Accord sedan - has eco-mode, normal, sport
Lexus IS250 sedan - eco-mode, normal, sport
Mini cooper - Sound/temperature radial button
Mazda3 sedan - rotating knob control
Product Research
We watched videos describing the components of the Prius interface and dashboard
How the Current Product Works
Prius Interior
A
C
B
Dashboard
Control for dashboard
Touch screen panel
How the Current Product Works
Static Area: Meters
• Reading the meters/adjusting the instrument cluster light
• Warning lights/indicator lights
• Where the warning lights come on
Dynamic Area :
Multi-information display
• Display
• Energy monitor
• Where the warning messages are displayed
Dashboard Interface Deconstruction
A
Control for dashboard
C
How the Current Product Works
Touch Screen Panel Interface Deconstruction
B
Interface Analysis
Dashboard contains too many functions on a small screen. Left area of screen shows most significant element for driving, such as lights and speedometer. Right area is for general information regarding current car condition, such as ‘energy consumption, climate control setting and audio etc’.
There are some elements in the dashboard that are redundant with the touch screen panel, such as navigation, audio, climate control setting.
Too much information on a small screen can be hard to operate/see while driving. This is not safe for the driver.
Dashboard
A
Interface Analysis
Lack of color makes it hard for the user hard to distinguish the different functions.
Overall screen
Apps > Eco page
Apps page
Apps page
Overall, there is a lack of indication of where you are which may cause the user to get lost or disoriented.
Menu categorization is confusing as it does not match with the user’s mental model. (i.e Navigation-Traffic can be same category, but phone and eco doesn’t match in the same category).
There are a few redundant menus on the physical buttons and the icons on the screen. (i.e Audio, Phone).
Touch Screen Panel
B
User Perceptions and Competitive Research
User Perceptions
Negative Brand Health
Competitor Electric Car User Comparison - Prius Drivers vs. Tesla Drivers (Gravity Blog, 2017))
Design Research
Japanese Design Philosophy An Raku Tan (Toyota Design)
Brand Design Story (Toyota Prius Design Story)
Dashboard Features
Competitive Analysis
We gathered some inspiration from our analysis of other car interfaces including the following cars:
| | | | |
| | | | |
Mini Cooper
Lexus IS250 Sedan
Honda Accord Sedan
Tesla
Temperature radial button
When user turns the ring to set the desired temperature, the control indicates the current temperature. The blue/red bars help the user visualize the current temperature
Mazda3 Sedan
Rotating knob control
To control the menu, users can rotate this knob clockwise/counterclockwise as well as up/down/left/right. Users push down to select.
Wide Screen
Main interface
Secondary features
Interface takes up the entire center area of the car. It provides in-depth information regarding the status of the car.
The Honda Accord has secondary features like checking your mail through the interface.
User interacts with the interface through touch. She is able to adjust seat height, seat temperature, among other features.
Research Wrap Up
Based off of our research activity, we decided to:
Original
Proposed New Design
Ideation
Persona, Sketches, Wireframes
Persona
Identify our users in order to design products that match with the user’s goals and behaviors. This process allows us to understand the user’s pains and needs. In addition, detailed information regarding their health, social conditions, and relationship with family and technology.
Name: Angela
Age: 33
Work: Sales Engineer
Family: Married, with 2 kids
Location: San Francisco, CA
Goals
• Conserve energy and planetary resources, promote social good
• Get to work comfortably, economically, and practically
• Remain within her monthly budget for gas and auto expenses
• Assess drive data and fuel efficiency in real time
Frustrations
• Cluttered, unforgivingly small, intangible buttons and small
displays
• The negative stigmas and stereotypes about Prius drivers
• Too many distractions within the car while driving
Bio
Technology
IT & Internet
Software
Mobile Apps
Time spent on tech
Angela was a bioengineering major who became a Sales Engineer post-graduation. She shuttles her two boys between school and soccer practice in between client meetings all around the California Bay Area. Angela is secretly a data nerd and loves making lists to stay organized. She is always looking for ways to promote social good and be environmentally conscious at home and at work. She is a huge Apple product fan and owns an iPhone, iPad, and a Macbook Pro. Her sister got into a car accident recently due to distract driving so she wants to make sure her next car purchase takes into consideration safe driving practices for a distraction-free experience.
Design A Sketches
Navigation, App, phone will show on the dashboard. (For example, navigation is only shows up if the address is previously saved through touch panel) Dashboard - output / Touch panel - input
Since driver seat is on left side, the elements essential for the driving is place on the left side of the screen.
Weather, temperature on the top of the screen.
Clear indication of where you are : The global menu moved vertically. In addition, arrow icon indicates which page they are in. This helps the user to see the information easy and clear.
Design B Sketches
Alerts are on the left and the icons will display flashing updates. The type of alert is clearly seen at the top to help users identify what the issue is. Additionally, after the user selects an alert, this view will show a guided walkthrough to help solve the problem.
Users control the menu via a haptic feedback panel either on the steering wheel or where the cup holders are. This way the user can focus on driving while receiving haptic feedback to let them know where they are in the menu. The currently selected menu option is displayed above the speedometer as well .
The purpose of this sketch page is more to show the information architecture rather than the design of the center control itself. To reduce redundancy, menu options that existed in both the dashboard and the center control were consolidated into one or the other. Vital driving information was moved to the dashboard while in-depth sub-menus were moved to the center control.
The dashboard was moved from the center of the car to behind the steering wheel. This way the driver can understand information quicker and safer as per Fitt’s Law.
Initial Wireframes
1
The dashboard is kept in the center of the interior to save production costs. Having the dashboard in the center makes manufacturing for both US and international drivers cheaper.
Temperature and time are displayed large but to the side. This is to focus the key needed information to the left as close as possible to the driver.
Frequently used flow controls, like home, back, and power, as well as volume and call are placed to the left as close as possible to the driver. This is to minimize reach according to Fitts’ Law. These buttons are physical.
The interface menu options are also placed to the left. These touch buttons are enlarged to minimize driver error and increase safety while the Prius is in motion.
USB ports for the driver and passenger are added beneath the center control panel for easy power charging.
2
3
4
5
7
6
The various alerts and status updates are placed at the top so that the driver can see this important information at a quick glance.
The speedometer was changed from digital to a combination of analog and digital. Drivers can now properly gauge acceleration while still retaining the quick speed update.
Design Justifications
1
2
3
4
5
6
7
Initial Wireframes
1
Volume and temperature values are placed at the top near their respective knob controls for consistency as well as for quick status updates.
The currently selected sub-menu is enlarged, bordered, and colored differently to signify to the user it is currently selected.
The map is enlarged so the driver can clearly see and manipulate navigation.
This bottom section exists across all the main menu options for consistency purposes.
2
3
4
5
6
This section on the bottom contains all the different sub-menu options contained within the main menu options.This allows the main content above to take precedence while allowing for quick transitions between the sub-menu options.
This bottom section is scrollable left and right. If these buttons are made larger, then users will have to scroll right for more options. If they are made smaller, then scrolling may not have to be implemented. However they may be too small for the user to accurately touch while in motion.
Design Justifications
1
2
3
4
5
6
Initial Wireframes
1
Each main menu option at the top of its page matches its icon on the main menu for visual consistency.
Since each sub-menu from the scrollable section contains more sub-menus underneath it, it is important for the user to see them all displayed. The more granular the user gets with the menu flow, the more visual information they will see. This offloads the pressure early on so that they can focus on finding exactly what they need to in a fast manner.
2
3
4
Songs, artists, radio stations etc. can be switched left and right. The main content area is not dynamic like the scrollable section below. This is to distinguish the two sections. It is also to prevent the content area from being too distracting to the driver.
If the user wants to make the content area full screen, then they can possibly either swipe down the scrollable section or tap a downward arrow. To bring the scrollable section back up, the user either swipes up or taps an upward arrow.
Design Justifications
1
2
3
4
Initial Wireframes
1
To distinguish the menu views that result from physical buttons (call, fan) from the menu views from touch screen buttons (info, navigation etc) the bottom section is locked in place and is colored differently. Additionally, there is no need for a scrolling functionality as there are only five sub-menu options for calling.
2
Since the fan menu has a small scope of functionality, everything can fit all on one screen. There is no need to have the bottom sub-menu that exists on all the other pages.
Design Justifications
1
2
Final Wireframes
Product Design
Style Guide, Final Design
Style Guide
Original source: Toyota USA Identity Standards
Color Psychology - Goal: Eco-friendly, modern, techy, understated sophistication
Green earth tones - Indicates a grounded individual who appreciates nature and respects the environment
Blue - Practical, positive, upbeat color. Medium to bright blue can indicate the driver is down to earth and reliable, while slate blue exudes more formality and professionalism. By contrast, lighter shades of blue can convey the desire to be low-key and a bit more in the background.
White - elegance, to make yourself stand out in a classy way. Can have an air of opulence. Bring a contemporary feel that shows taste and style.
Silver - High tech, sleek, not overstated, appreciation for change and evolution
Gray - not wanting to stand out or be too flashy, low key, mainly functional
Black - sophisticated, powerful, makes a statement
Fonts - Goal: Modern, clean, crisp, highly legible
Montserrat - Selected Montserrat font over Roboto since Roboto is an Android font and we want to appeal to Prius drivers who are Apple fans
Highlight selected color - Green
Text colors - White
Background Color - Black for high contrast nighttime visibility
Shapes - Goal: Round, spheres
Round, spherical shapes like that of water droplets. It will be favored over square shapes and corners to invoke an earth-like, soft, inclusive feel. It is also reminiscent of a circular, renewable environmentally conscious sense.
Style Guide
Original source: Toyota USA Identity Standards
Style and Aesthetic
Final Design Description and Justification
The system alerts the driver with a warning buzzer sound and message when it detects the vehicle deviating from or swaying multiple times within its lane.
Overall Design
Dashboard Design
Since driver seat is on left side, the elements essential for the driving is place on the left side of the screen, such as light, speed and gas.
Digital display is same as actual gear shift.
Final Design Description and Justification
Incorporation of both touchscreen and physical buttons will allow the user the best of both worlds: modern touch screen features with haptic feedback in addition to physical buttons and dials for frequently used features so that trendy design features will not sacrifice safety.
The home touch screen will display frequent screen options of drive info, navigation, music, and settings on a charms bubble-like menu that is accessible via tap on the touch screen or can be browsed through using the dial. Highlight color in green and increase size of the bubble selected will indicate to the user their current selection. Users will be able to immediately view and access on the home screen various statuses of current states such as door lock status current cabin temperature, phone mic status, remaining car battery charge, battery power mileage remaining, and current drive distance and time info. The top status bar will display when a mobile device is connected and mimics mobile device status displays such as Bluetooth connection, phone battery life % remaining, mobile data connection, and time.
Final Design Description and Justification
The phone/call screen will mimic call screen styles of mobile phones for consistency and familiarity with existing and connected mobile devices. Green is used to prominently highlight the selected contact, placed front and center on the screen for maximum visibility. The bottom navigation buttons are available consistently across all screens to reduce the number of clicks/pages for the user to go through. The bottom navigation is scrollable via swipe or dial turning so that the user can see all available options quickly and easily (rather than navigate through numerous layers of menus)
Green and blue are incorporated prominently in this chart to convey eco-friendliness and monetary savings. Gas prices are listed with cents on the dollar per gallon to match with real world gas price sale displays at gas stations. The most recent month readings will be highlighted in green with a larger circle to confirm to the user which is the most current. User can quickly at a glance see their most recent gas savings as it trends over time in the bubbles on the top of each bar.
To reduce frustration with learning a new car navigation interface, the navigation screen will incorporate maps that are familiar to users via Google Maps to prevent confusion and remove learning barriers.
Final Design Description and Justification
Users have the flexibility to use the car’s media player or connect to their Spotify app. The music player will feature a circular music player to display song length and progress like that of a clock. Repeat and shuffle features are also bubble like switches.
The settings menu will be laid out to mimic a phone settings menu. Large tappable areas for each selection so that the driver can make more accurate selections safely.
Fan controls display actual seating to supplement the user’s existing cognitive mapping of the Prius’ physical and spatial layout for the car interior with respect to fan placement. This will facilitate their understanding of which fans will be controlled and increase the user’s sense of control over their environment. The controls will allow the user to control the fan speed in smaller, more concise increments.
Conclusion
Final Design Overview
Final Design Overview
Original Prius Interface
New Proposed - Prius Interface