Visual Voicemail From T-Mobile

Challange

The application generated a high number of customer support calls. Users had technical issues and asked for additional features including features offered by Apple and Google Voice

Key Metrics

• Reduce customer support calls
• Offer increased localization (language) support
• Upsell premium subscription conversion
• Accessible Compliance (WCAG 2.0)
• Feature adoption (Language Translation, Transcription)

Approach

I worked on this project with 100% allocation for 2 months and then an estimated allocation of 50% for 3 months.

Skip ahead to the design solution or continue reading.

What's wrong with Visual Voicemail?

The singular issue plaguing the current app was performance and reliability, as a user of the app I personally noticed this. It was the most pervasive feedback from the app store comments and from help calls received by our customer care team.

The project was divided into two main milestones to measure success:

Research Methodology

There was not an appetite by the stakeholders to conduct extensive formal research. So, I took the guerilla approach by looking at the app store reviews and asking customer care for insights into customer calls trends. This was the start of my journey to understand the visual voicemail pricing model and hopefully reasons why customers do not subscribe to the paid version.

The effort was broken down into 5 steps.

Competitive Analysis

To better understand the voicemail landscape, I looked at other telecom companies and phone manufactures to compare ratings, features, and price points to determine where we could be a differentiator as Geeta and I had product ideas, but were they viable?

Empathy Mapping and Customer Interviews

In addition to app store reviews, I interviewed T-Mobile customers (internal and external) and non T-Mobile customers, about their experience with the voicemail app through survey's and in person (virtual meetings) sessions.

How can we make visual voicemail more useful and interesting?

I am including some insights here in the form of participant quotes from the larger artifact of information. The brevity is me siding on the side of discretion.

In these sessions Geeta and I decided there wasn't value in user testing the current app as we were going to spend this effort validating the new designs I was working on.

User Flow Mapping

Design Solution as Milestone 1

Milestone 1 was to improve performance and stability of the app through rewriting the native app from scratch. In parallel, I set my design iterations in this phase to three main objectives.

1. Iterate on the interaction design and remove unused features present in the current app
2. Create visual branding and a design system modeled off of what I helped create for DIGITS
3. Ensure the design solution meets Level AA Accessibility Guidelines

1. Iterate on the Interaction Design

One of the key new features to Premium was the ability to play the audio portion of the voicemail, share, or copy directly from the card or tap to enter the details and have the full transcript along with play controls.

A major change is moving the playback and scrubber to optimize placement considering how humans hold their phone. One cognitive affordance risk was changing the visual design from the standard knob and bar to a knob less tracking control where the bar becomes the equalizer. In testing this change, 9 out of 12 users was able to understand they could track forward or backward.

2. Create Visual Branding and the Design System

Design System

Visual Design

Branding

For the Out of the Box start screen I set the branding to adhere to T-Mobile's Corporate "Magenta in the Wild" theme through using a photo of a person wearing something magenta such as a scarf. I also simplified the content design on the start screen.

A visual design challange was how to incorporate magenta into the user interface to convey this is T-Mobile without making it too overwhelming in the sense of visual fatigue with the color. To accomplish this the broader CDSE UX team decided to use Magenta as a highlight color in our related family of products (DIGITS, Visual Voicemail, Name ID, Scam Shield).

Logos

In the effort of modernizing the visual branding I also updated the product logos to make them feel more modern by simplifying them to their core colors. I ended up setting the visual style standard for Metro and Magenta logos for mobile apps. This accomplished the Brand goals of T-Mobile.

Illustrations

One of the major drawbacks from a content perspective of Voicemail is it is just audio files and text. In considering our visual language brand and color palette for T-Mobile is magenta, black, and white, and for Metro by T-Mobile is purple, gold, black, and white. I wanted to bring the UI more alive and engaging.

As part of the visual personality, I wanted to achieve, I designed and added illustrations and photos wherever possible. Following established brand guidelines of other apps, the illustrative style was outline drawings with minimal detail. This adhered to our Diversity and Equity Inclusion guidelines while still creating visual interest.

Dark Theme

One of the top feature requests customers asked for was the ability to choose a dark theme. Initially I created a color theme for a dark mode, primarily for stakeholder review, but we decided to use the native Android dark theme in implementation as it was a lower dev cost.

3. Designing with Accessibility and Inclusion in Mind

The redesign focused first on addressing the contrast, colors, and hit targets of the icons and buttons and second on defining swipe order with the devs and content design in screens and with aria labels.

As part of my UX process I provide the Engineering and QA teams with Aria labels for accessibility. External Keyboard and Panoramic support are also critical for making mobile apps inclusive.

Milestone 2 Value adds

In Milestone 2, Geeta and I focused on additional features that would add value and could offer future monetization possibilities. While we added several features, for this case study I will focus on two.

Translation Service

The first feature supported by our stakeholders as a priority was the integration of a language translation and transcription service. We prioritized as no other telecom carrier or third party visual voicemail app except Google offered this service. The feature had two abilities: The first is the app would automatically transcribe voicemails in the language of the audio in 96 languages. The second was the ability to transcribe from one language to another on demand shown in Figure T.1.

Transcribe a Failed Transcription Feature

The second feature and one I advocated for was the ability to transcribe on demand if a voicemail failed to automatically transcribe the audio. This feature however was deprioritized to a future version as the developer cost was rather significant when measured against other priorities and our team resources.

Impact

Product was shipped after I left T-Mobile. Results are from a 2 month Beta testing program with ~10,000 customers