OVERVIEW

THE PROBLEM

For cars nearing full autonomy, drivers can be hands-free most of the time while the car drives itself. This gives scope for drivers to do other things – like using their phones. But we know that using a phone while driving can be dangerous because most mobile apps are currently designed to require users’ full attention.

From my research, I found that drivers wanted to use messaging apps when they could be hands-free during their drive. In this project, I have used WhatsApp as a case study to redesign a messaging app for drivers of semi-autonomous cars. 

How can I design WhatsApp for semi-autonomous car drivers so that they can balance their attention span between the road and their phone?

PROJECT INFO

Individual UX Project

DURATION

4 Months

ADVISOR

Prof. Wei Wang

TOOLS

Principle | Sketch | Balsamiq

Solution

Message Suggestions

Choose from a set of personalized message responses to save time, or type your own

Want to send a quick message while in transit? Does typing distract you from the road? This WhatsApp learns from your chat conversations and recommends message responses. Now you can text your friends that you’re on your way and still have an eye on the road as your self-driving car drives you to your destination.

Take Over Pop-ups

Use WhatsApp without worrying about missing your self-driving car’s take over requests.

Want to stay updated about your drive while you use your WhatsApp? Get alerted on your phone when your car needs you to take control. WhatsApp will notify you when to take over, along with details of what to look out for on the road.

Favorite Contacts

Access your favourite contacts while driving in just one click

Get a curated set of frequent contacts during your drive. Do you always call your friend during your evening drive? Find that friend listed under Favourites. WhatsApp learns who and when you contact, for your experience to be effortless.

Turn Off Car View

Switch off WhatsApp Car View as Needed or switch it on again from Settings

WhatsApp will automatically switch to car view when your phone connects to your car via Bluetooth. However, we understand if you need to switch off car view in certain circumstances. Car view enhances readability and enables you to use WhatsApp’s main features as your Level 3 autonomous car drives you to your destination.

JUMP TO FINAL DESIGN
Process

RESEARCH

Survey

I first sent out a survey to understand which activities people prefer to use their phone for, while driving. I found that calling and messaging were second to listening to music.

Based on my survey results, I decided to design for messaging apps and picked WhatsApp for my case study. I chose not to design for Music and Podcast apps because there already exists a Car View for apps like Spotify. Also, since interaction with Messaging apps typically comprises of more interaction than Music apps, I found messaging apps to be appropriate and interesting for my case study.   

Domain Research

I looked into the market to learn about Automotive UX design. I also examined how mobile apps are redesigned for driving scenarios on android auto, Android Automotive OS, Apple CarPlay, and Spotify Car View. 

Following design principles summarise key concepts that I found useful for my project.

SEE DETAILED LEARNINGS

Interaction Design Principles

Interactions between a driver and a screen must be simple, non-distracting, and interruptible, so the driver’s attention can quickly return to the road.

Keep information current and glanceable by conveying tasks and states at a glance, providing quick responses, and timely and accurate driving information.

Prioritise driving tasks by allowing driver to control pace, prioritising driving related tasks, and considering non-driving content carefully.

Discourage distraction by avoiding hazardous or distracting activities and irrelevant movement like videos and animations.

 

Visual Design Principles

Content designed for a car view screen must be legible and glanceable, with a consistent UI and large touch targets that drivers can identify under all viewing conditions.

Make content easy to read by displaying legible fonts, limiting text length, and following contrast ratios for text, icons, and backgrounds.

Make targets easy to touch by displaying appropriately sized touch targets, avoid touch target overlap.

Keep UI elements consistent by using design patterns, interaction patterns, and clarifying active and inactive features while in motion.

Context

Autonomous car levels range from Level 0 to Level 5. While Level 0 cars are manually driven, level 5 corresponds to fully autonomous cars. For Level 3 driving, the car can drive itself most of the time but needs the driver to take control of circumstances for which the car is not trained for.  Because Level 3 cars are most likely going to be abundant in the next 2-3 years, I designed WhatsApp for Level 3 car drivers.

Persona

From my research so far, I made a persona to keep myself focused during the project.

DESIGN

Wireframes

To meet my design goals, I started brainstorming ideas that can help me achieve these goals. I quickly made some wireframes on Balsamiq to demonstrate my ideas while obtaining feedback.

Enlarge content: I enlarged the font and icon sizes of the screen content for users to find chats in a glance. From my research, I knew that this would enable users to keep an eye on the road as well as use the app intermittently.

Eliminate secondary content: I split type of content into two categories – primary and secondary. Elimination of secondary functionalities would simplify the Information Architecture, and therefore declutter the UI. Users would rarely use secondary functions during transit, and  they would be more distracting than useful for this scenario.

User Feedback

I conducted quick user feedback sessions with 5 participants. All users liked the WhatsApp car view and the motive that its functions served. Moving on, I made design changes based on users’ feedback before making the high fidelity design.

I introduced message suggestions for conversations, voice to text messaging, Favorites section on the Chats view, and added the option to turn off WhatsApp car view. Furthermore, I readjusted the Chats view to show profile pictures and a glimpse of recently exchanged messages.

VIEW DETAILED USER FEEDBACK

How would users communicate in this scenario?

Many users wanted a way to send short and quick messages. A user mentioned: ‘It would be nice if WhatsApp can suggest me ‘on the go’ responses like my smart watch does’. In lieu of this, decided to Introduce personalized message suggestions for each conversation

I also learned that while driving, users don’t prefer to type messages, and that they would instead resort to calling, or sending voice messages. Some users mentioned that they would like sending  ‘voice to text’ messages too. Hence, I decided to prototype calling, typing, and voice to text messages. Which mode of communication would users choose? I was about to find out from my evaluation sessions.

 

How to find frequent contacts quickly?

Although enlarged UI size enhanced readability, it signifcantly reduced the information displayed. This was especially an issue on the Chats view where the screen can fit in only 4-5 recent chats. Using the search bar to search contacts involves a lot of cognitive load and time. How will a user access frequent contacts with ease? To solve this, I added a Favorites section on the Chats view similar to the Calls view. This section would list frequent contacts which are usually contacted when the user is in transit.

 

How to build willingness to use WhatsApp Car View?

Users were unsure whether they would be willing to use their phone while the car was driving. A major concern was that they wanted to know when they needed to take over. Usually Level 3 cars notify drivers to take over on the car dashboard. What if users missed this notification? To tackle this problem, I decided to introduce a pop-up to notify users when their car needed them to take control.

I added a ‘Turn off Car View’ option in the overflow menu  incase a user wanted to turn off the car view in certain circumstances.

 

How to make an intuitive switch from WhatsApp to WhatsApp Car View?

As users would be using WhatsApp when they’re not driving, they would need an intuitive switch to the WhatsApp car view. Therefore, I needed to make sure that the UI for the Car vIew wasn’t too different for the users to reorient themselves on switching to this view.

Users wanted to see the profile picture of their contacts in the chats view as they are accustomed to identify contacts based on profile picture on WhatsApp. Hence, I reverted to display contacts’ profile picture for the chats log. Morevover, users wanted to see a glimpse of exchanged messages in the chats view for context. Therefore, I changed my design to show a glimpse of exchanged messages.

High Fidelity Design Iteration 1

My first design iteration reflects the changes made after receiving initial feedback from users. My primary goals for this iteration were to validate whether the new features enable users to send and receive messages quickly and to test if the Car View helps users to use WhatsApp with ease during the drive.

I used Sketch and Principle to create a basic interactive prototype to illustrate enough functionalities for me to test my hypotheses.

EVALUATION

User Testing Process

To test the features introduced in this iteration, I conducted user testing sessions with 6 users. Participants went through a Task-based A/B testing session followed by a questionnaire. I used WhatsApp as a control for the WhatsApp car view and followed a within-subjects approach. Here’s a brief overview of the process:

  • Introduce the project goal, and describe the scenario.
  • Describe the tasks to users and let users use WhatsApp and WhatsApp car view while thinking aloud.
  • Ask follow up questions and gather feedback.
  • Let users fill out a questionnaire. Thank them for participation.

The user testing was conducted in a stationary car in a lab setting. I simulated a self-driving car using a video on loop on the big front monitor. This gave the illusion of the car being in motion – users were expected to keep an eye out on the road, and pause the video in case they wanted to stop the car.

SEE DETAILED SCRIPT AND PROCESS
Results

I was able to gather a lot of positive feedback on the prototype, from users with different driving experiences, different attitudes towards using WhatsApp while driving, and different familiarity levels with WhatsApp. Here’s a summary of how people rate ease of use, comfortableness, confidence, and likelyhood of use, with the app available:

In addition, 5 out of 5 users believe that the switch to WhatsApp Car View from WhatsApp is intuitive. All of them are also willing to recommend the app to a friend, and believe that it is a meaningful solution for the scenario of communication while driving Level 3 self driving cars.

Feedback and Design Iterations

During user testing, users mentioned that they would rather use the ‘message suggestions’ feature than the ‘sentence auto-completion’ and ‘voice to text’ features because of ease of use. Hence, I decided to eliminate these features from my prototype.

LATEST PROTOTYPE

FUTURE STEPS

Onboarding Tutorials

It’ necessary to design an onboarding and setup process which users would go through for educational and safety purposes before they use WhatsApp Car View in driving scenarios.

Sharing Live Location

Many users expressed the need to have easy, one-click access to the ‘share live location’ button on WhatsApp. This option is especially relevant because drivers use WhatsApp to share their location during transit.

App Design Guidelines

It would be interesting to draw design guidelines from this project and consider how we could design other apps like Facebook Messenger, Phone messenger, etc. It would also be worthwhile to expand these design guidelines to other levels of autonomous driving.

Instant Emojis

How might we minimize the cognitive load for users so that they can send frequently accessed emojis instantly?

Picture-in-Picture

It would be an interesting research question to explore how we could design picture-in-picture screens for WhatsApp Car View.

REFLECTIONS

What users say they want can be different from what they find usable

Based on my interviews, I designed features that users said that they would like to have, but many of the features didn’t fare well in usability testing sessions. Therefore, I learned that I need to have a balance between user feedback and my design instincts when I have to narrow down to design features.

This design simplifies interactions for some non-users too!

While I intended to design WhatsApp Car View for Level 3 car drivers, I found that this design simplifies interactions for other levels of autonomous driving as well. This design could also be useful to people who want to use WhatsApp intermittently while doing other tasks like reading, cooking, etc. Perhaps there needs to be more work in this area.

Challenges while handling a lot of uncertainty

Because designing for the context of autonomous cars is a niche and unexplored field, it was extremely challenging for me to make design decisions in this problem space. A lot more research and design needs to be done before we change the laws in favor of Car Views for mobile apps.

Maybe speech to text becomes very accurate in the future..

It’s possible that speech recognition advances exponentially in the next few years, and that we might not need to rely as much on screen-based interfaces while driving.