top of page

AT&T DriveMode 

As part of the AT&T - "It Can Wait" Don't text and drive campaign, DriveMode is a mobile app that encourages safe driving. It helps prevent driver distractions by silencing incoming phone calls, text messages, and other alerts with auto-replies.

Parental controls can be set up on teenage young adult phones.
DriveMode_writeup.png

Goals:

Customers should be able to quickly tell what state DriveMode is in and how to turn the app on or off. Remove visual distractions to simplify the UX for distraction-free driving. 

 

Worked with my program manager, creative director, designers, copy writers, cato accessibility, user research, and developers to align on the project vision, scope, and deliverables. Deliverables included final mockups, redlines, styleguide, interaction spec, and source vector files. Deliverables handed to third party developer. Reviewed builds and communicated bugs for final polish.

Final DriveMode 1.0 Design with Customized Photo

ios_DM_4.png

iOS

ios_DM_12_done.png

iOS

android_DM_8.png

Android

Older Version of DriveMode

Project Scope:

The project started out as a request to visually refresh a dated looking dashboard. It turned into a project to improve overall usability and accessibility. The older version of DriveMode, displayed a steering wheel with the ON and Off text. It was visually on brand when the app launched back in 2011, however, it wasn't clear to the customer what state DriveMode was in and that they needed to tap on the steering wheel to switch between ON and OFF. In addition, the small sized instructional text on how to interact with the dashboard when it was ON appeared as a distracting pop-up box with a big red x.


 

Design Improvements:

The overall ui of the dashboard was simplified and optimized. The experience should feel like a lock screen.

Infrequently used tasks were removed from the Dashboard. For example, the 911 action was moved under the allowed call list but still kept prominently displayed on that secondary level. The access point into DriveMode Settings only appears when DriveMode is turned OFF. This helped focus the driving experience. When driving, customers won't be concerned about changing their settings. They should only change their settings when they are stationary and safe. Also grouping the controls together in the same location below the primary action of turning DriveMode ON and OFF provided more efficiency and was better information hierarchy over displaying Settings in the header bar.


 

Notable Contribution:

In a brainstorm session with product owners, I posed the question of how can we make the experience more meaningful to the customer. Can we give the customer a more sentimental reason to not text and drive. The idea of a customizable home screen with a personal photo reminding you why distracted driving prevention is so critical was born. That particular feature is one I am proud of. What started out as a visual redesign, ended up going beyond what was expected. In recent months, USA Today featured AT&T DriveMode as the top app for anti-distraction driving. 

android_DM_old-on.png
android_DM_old-off.png

Phase 1

dm-android_p1-on.png
dm-android_p2-off.png
DM-ON.png

Accessibility:

Acting as a driving companion, when DriveMode is mounted at arm's length onto the car's dashboard, the driver should be able to scan the interface. Text labels under the icons were removed to avoid reading distraction. Symbol imagery was enlarged to be more accessible touch targets. The color value of the dashboard symbols were made a darker shade of blue to firmly pass visual accessibility requirements and differentiate it from inactive controls that were in grey.

Interaction-wise, to prevent accidentally turning DriveMode ON or OFF with a tap action; the use of a toggle switch to make the action intentional was introduced. As most users know what toggle switches mean, it was a better interaction model than relying on a graphic that doesn't look actionable. It was more intuitive.

DriveMode
DriveMode

Accessibility Check

press to zoom
DriveMode
DriveMode

Accessibility Check

press to zoom
1/1

Design Considerations:

Two versions of the DriveMode app were built. One for Android and the other for iOS. Each version honored the user interface style of the system controls. The product was able to save on build time and costs by leveraging many of the system controls for use in DriveMode's Settings.  Android version was first launched in August 2011 (1.8M people activated the application). Worked on version 2.0. The iOS version was launched in November 2014. Worked on version 1.0.  

DriveMode Setup
DriveMode Setup

press to zoom
DriveMode Setup
DriveMode Setup

press to zoom
1/1

First Run Customer Flow:

On the Android version of DriveMode, 5+ screens of setup customization were removed. In its place, three screen feature walk through was introduced. The design philosophy here is to let the customer quickly experience Drivemode and know the value of it so that they will be less likely to unistall the app. We can set their primary defaults to what would benefit them most without making them go through a set of customization screens.

The design approach for first run was different between the iOS and Android platforms. DriveMode comes preloaded on Android devices, the three feature walk through is to educate them on the benefits on why it comes pre-installed. On iOS, DriveMode is not preloaded. The customer finds out about the benefits of DriveMode through a different marketing channel and thus the three screen feature walk through was not needed and is not present in iOS. There are standard legal acceptance terms and prompts like location awareness that appear along the flow when setting up DriveMode on both platforms.
 

DriveMode
DriveMode

First Run Walk Thru.

press to zoom
AT&T DriveMode
AT&T DriveMode

Driver Profiles Created

press to zoom
AT&T DriveMode
AT&T DriveMode

Reward for anti-distraction driving

press to zoom
DriveMode
DriveMode

First Run Walk Thru.

press to zoom
1/5

Increasing Usage and Engagement

Additional ideation and user interface design explorations took place to conceptualize how to encourage higher usage of DriveMode and to prevent the customer from uninstalling the app. Created personas while researching customer's usage and needs. This work helped formulate how to increase user engagement. 
 

drivemode_persona.png
drivemode_multiplereward.png
drivemode_single_reward.png

Target Customer & User Value

Envisioning who would use DriveMode. Anticipating their usage and how we might present them with relevant rewards during their journey.   
 

drivemode_persona_stories.png

User Journey

Planning out how the user would set up driver stats. Driver stats is a concept that usage of DriveMode could be fed into auto insurance lowering premiums for safe driving.  
 

drivemode_photo_stats.png
bottom of page