Project Summary
Overview
University of Washington (UW) EcoCAR team is participating in a four-year competition sponsored by General Motors that challenges university teams across the U.S. to retrofit a conventional internal combustion 2019 Chevrolet Blazer into an electric-hybrid, semi-autonomous vehicle destined for use in a car-sharing platform. Currently, the EcoCAR Mobility Challenge is entering its fourth year. (avtcseries.org)
Goals
• Create an onboarding program that teaches new users how to use car features, specifically adaptive cruise control (ACC).
• Conduct user research to create personas and user journey
• Develop a fully integrated prototype onto the infotainment center of the competition vehicle
Problem Statement
How might users who are unfamiliar with adaptive cruise control (ACC) achieve sufficient education in a Mobility as a Service (MaaS) environment so that they can safely and successfully operate an unfamiliar vehicle?
Role
User Experience(UX)/Human-Machine Interface (HMI) Design Team Lead
Scope
September 2018- June 2022
Tools
Figma, Adobe Illustrator, Adobe After Effects, Miro
Team
Sebastian Priss - HMI/UX Team Lead
Elliana Beberness - HMI/UX Design Team Lead
Woo Young Kim - HMI/UX Research Team Lead
Han Feng - HMI/UX Design & Research Team Member
Varun Chawla - HMI/UX Design & Research Team Member
Cynthia Xinyi Yan Zhang - HMI/UX Design & Research Team Member
Kulbir Singh - HMI/UX Design & Research Team Member
Ryan Lee - HMI/UX Design & Research Team Member
Vatsal Chandel - HMI/UX Design & Research Team Member
Year 4
Final Prototype
The final product was a prototyped Figma design that taught users how to use adaptive cruise control in a Chevy Blazer. The prototype was built using research about how users best learn and retain instructional information and by testing the usability of the user experience, which was measured using system usability scale scoring (SUS scores). The product was presented by myself and our team research lead at the EcoCAR competition in Phoenix, AZ, through a 30-minute technical presentation and a four-hour in-car interactive presentation.
Below are samples of flows that show an implementation of a side navigation bar, animations to demonstrate how the adaptive cruise control works visually, and an interactive knowledge check that makes sure users are retaining the information. Each of these features was added to adhere to visual and physical learners and to make the information easier to review.
Prototype 3
The competition goal shifted from mobile able to an in-car infotainment center this year. Below are some of the current prototype iterations in a dark mode (left) and light mode (right) I created for onboarding new car users. The team has determined a final branding kit for the prototype and A/B testing is being conducted using this prototype version as well as two others created by other team members.
Year 1 & 2 Overview
During the first year of the EcoCar Mobility Challenge the newly formed HMI/UX team brainstormed potential designs and formed a hierarchy for roles within the team including team leads, UX designers, and UX researchers. The goals of the team were established including the aim to create two interfaces, an app and an infotainment center, and the design process began.
The HM/UX team's goal was to design an intuitive system that users can quickly access and reference when using the rental vehicles. This system would potentially include a mobile app, infotainment center, website, or other digital interactive platform.
The second year of the competition led to the creation of two subteams within the HMI/UX group. The first subteam worked on a HMI system design for within the vehicle and the second subteam focused on developing a mobile app. During this year the teams completed competitive analysis, user research, and designs on Figma for both of the interfaces.
I joined the UX design team during the third year of this ongoing competition.
Year 3
User Journey
The journey maps were created by the team members using software including Figma and Miro. Visually understanding how a user would require the use of the vehicle and rental car software the team determined a proper user flow that could be used for furthering the design of the mobile app and infotainment center.
Information Architecture (IA)
Below is the information architecture I created for the mobile app portion of the vehicle onboarding system. Through this IA, the layout of features and pathways by which users would be able to access them were made clear and prepared the team for creating the mobile apps wireframes in the future.
Mobile App
Wireframes
Below are a few initial wireframes I designed for the mobile app onboarding and rental system. The homepage allows users to see where the vehicles are located on a map, how they can book a car, view their profile, and access the learn page. The learn page is designed to be easy for users to navigate. The page allows users to review information about features such as ACC. The users also create a driver profile where they upload their license information and create a profile for future application use.
Prototype 1 (Mobile App)
During the creation of the first prototype, the team chose a color palette. Red was a color for danger for occasional negative buttons, and blue demonstrated trust is universally used and would therefore be an intense base color for the app. I updated the driver profile to allow users to edit their information once a profile was created. Users were notified about specific settings on the subsequent screens, such as location access. In addition to adding color to the homepage, detailed descriptions explain parts of the app to the users to make the interface easy to navigate when first learning the app's features.
Prototype 2 (Mobile App)
Based on user interviews and testing conducted by the UX research team, the goals of the second prototype were adjusted to improve terminology that aligns with mobile application standards and to make the location of the owner’s manual and other functionalities clear.
The screens below demonstrate the implementation of standard mobile app terms and conditions, clarification on menu items, and a change in formatting and color scheme for the overall app, which is continuing to be altered. I added further detail to the pages, such as terms and conditions where users are notified about their agreement with the company when using the app. There is also a new format for the bottom bar of the homepage that is more visually appealing and reformatted how the information for what each home icon led to. I implemented the new navigation bar on the menu page as well. Throughout this second prototype, the team brainstormed a new color scheme ideas to make the app appear less "childish" based on feedback from user research.
Lesson Learned
• Clear communication - It was essential to sure our research findings and connect throughout the weeks about the small tasks that needed to be completed.
• Improving physical user engagement - As we learned through research in previous years, people learn well through physical interaction, and it was important to have users engage with how to use ACC.
• Address user expectations in usability testing - This was explicitly important when having to do testing on zoom. I needed to communicate what the user should try to complete during the testing, listen clearly to what they had to say about the prototype, and take detailed notes to share with the team.
• Testing and iterating a project is a continuous process - There are always ways to improve or change a prototype to fit a user audience better, as we learned after receiving feedback on our final project, even though that was technically the last step of the competition.
