"Stuck in traffic, new ETA 9:10amâ - Prototyping a New Car App Feature
I recently came across Drivemode, an app that provides drivers a safe way to use their phone. Users can access music, navigation, and messaging apps using simple swipes and audio commands.
One feature I found useful was the calendar navigation. The app accesses the appointments from your Google Calendar and automatically adds the location to the navigation options. I found this feature very handy, especially if you have several business meetings in different locations. Â
But what happens if there is a traffic delay or change of plans? How could the system adapt to these changes and deliver timely information to the driver?Â
I decided to examine this scenario and created a video prototype of possible solution:
Below youâll find notes and sketches from my design process.
I sketched out a rough 9 panel storyboard of this scenario. In this context, a business man will be attending several meetings in different locations throughout the day.
 The meeting time, location, and attendees are all contained in his Google Calendar.
Next, he connects his mobile phone to the infotainment system
He then chooses the navigation optionÂ
In this system, the driver interacts with the app, using the  carâs physical touchpad and rotary button (instead of the touch screen).
The driverâs meeting locations are pulled from the calendar app and presented in the navigation app. The system will even suggest when the driver leave, based on his distance from the destination.
Driver begin journey and encounters traffic. The driver will be late.
 The navigation system detects the delay, and calculates the new estimated time of arrival or ETA.
The driver can update the attendees with the new ETA by sending a precomposed text message.
âMessage sentâ confirmation
User Workflow & UI Sketches
Next, I examined how the  user would flow from screen-to-screen to complete the tasks. I also began exploring designs for the screens. For example, what information and actions should appear on the alert screen?
The UI was meant to be minimal, delivering information that is important to the driver at that moment in time. To help the user plan his journey, I included the âLeave in xx minâ on the calendar screen.
A second addition is a smart precomposed text. The system can anticipate the userâs needs and provide a text containing the new ETA, ready to send to the participants.The features utilizes data from the navigation app and the contact info from the calendar.
Following the patterns of the Drivemode app, I created smooth transitions from one screen to the next.
These animations were created using Adobe After Effects.
Finally, I composited the screens, syncâed the audio and edited the footage.
And the final video again:
Designing for a car is very from a desktop or mobile device. Here are some guidelines and lessons learned while designing this prototype:
Glanceable interface - Minimize interface to keep eyes on the road and hands on the wheel. This can be achieved using large fonts, high contrast between background and foreground, and most importantly, studying and understanding the userâs needs.
Utilize other modalities - To minimize glances away from the road, modalities such as audio and haptic feedback can be used. For example, the Drivemode provides audio feedback when making selections, and allows for voice input. The device also vibrates when navigating from screen to screen.
Make use of control physical controls - The app provides vibration feedback when swiping the touch screen. However, it may be ideal to take advantage of the physical affordances of tactile buttons on steering wheels or the the rotary knob in the center. This would allow the driver to keep their eyes on the road while they âfeelâ their way through the interface.
Anticipate user needs - What information do they seek at this given point in time. For example, the user will want to know what time they need to leave to reach their next destination in time. An on-screen âleave in 15 minutesâ can aid the user.
Use contextual awareness to provide timely information - The driver needed to know his new ETA, based on his current location and traffic patterns.
For more information about designing apps for cars, check out the Android Auto Guidelines.