The Program
T-Mobile offers a visual voicemail solution for native Android consumer and business users across its various branded experiences.
- Type: Consumer and Enterprise Native Android
- Market: USA
- Team: 1 Technical Product Manager • 37 Software Developers • 1 Product Designer
- Role: Sole Product and Visual Design • User Research on feature • Design System
- Timeframe: 5 Months (50% allocation) Agile rollout • 2022
The Challenge
Support calls were piling up and subscriptions weren't growing. There wasn't an appetite for formal research, so I went guerrilla by talking to customer care and digging into app store reviews to find out what was going on. Turns out users weren't just asking for more features. The app was just too slow. I redesigned the core experience and validated new premium features through beta. The direction was confirmed and the product shipped. The performance improvements are ongoing.
What Success Looked Like
- Reduce customer support calls
- Increase paid premium subscription conversion
- Offer increased localization (language) support
- Feature adoption (Language Translation, Transcription, Voicemail Transfer and Retention)
- Accessible Compliance (WCAG 2.0)
What Changed
Product was shipped after I left T-Mobile to pursue other opportunities. Results are from a two month Beta testing program with ~2,000 customers
- -25%
reduction in support calls related to performance complexities - 2x
faster success rate in consuming transcriptions and playing voicemails - 32
localized UI languages and support - +12%
increase in app store and survey sentiment toward premium features
How'd I get there?
What's wrong with Visual Voicemail?
My mandate was to improve the user experience through a visual redesign and ideate new features to increase subscription revenue.
The project was divided into two main milestones to measure success:
- Milestone 1 (Visual Design):
Rebrand and redesign the core user experience - Milestone 2 (Value Added Features):
Design and develop new features to increase revenue through paid subscriptions to access additional features.
The Strategy
Research and Discovery
The effort was broken down into 5 steps
- 1. Classify top 5 pain points design and engineering can address to maximize impact
- 2. Conduct a competitive analysis of other voicemail apps and listen to customers
- 3. Identify additional value add features to increase subscription rate and retention
- 4. Read in stakeholders for signoff, approval, and align to business goals
- 5. Redesign and rebrand app to resolve pain points and integrate new features
Top 5 Opportunities (Pain Points)
Four of the top five pain points I learned from the user research were technical pain points. One was a business opportunity that product design could address.
Technical
- Customers often experience a delay in receiving voicemails often for hours or days
- Customers often cannot reliably authenticate into the app
- Customers often cannot successfully transfer their voicemails into their new phone when they purchase one or switch providers
- Customers often experience inaccurate transcription or no transcriptions
- Customers question why they must pay for features other apps offer for free e.g. storage and transcriptions
Competitive Analysis
To better understand the voicemail landscape, I looked at other telecom companies and phone manufacturers 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 surveys and in person (virtual meetings) sessions.
Making visual voicemail more useful and interesting?
I am including some insights here in the form of participant quotes from the larger artifact of information. I've shared a selection here. The fuller research artifact goes deeper.
- Thinks:
"What is the difference between premium and basic?"
- participant 1 - Thinks:
”Transcripts are not really accurate, sometimes they are nonsense words”
- participant 3 - Says:
"I get transcripts for free with Google”
- participant 4 - Says:
"There is a lock feature? huh.. I've never used it. What does it do?"
- participant 1 - Feels:
”It is irritating when I miss a voicemail, I don't trust this app"
- participant 2 - Feels:
"Why should I pay for something that isn't reliable?"
- participant 2
After these sessions, the TPM and I agreed there was little value in testing the legacy app. The effort went toward validating the new designs instead.
User Flow Mapping
I documented the user flow to sanity check with a few internal users to validate this made sense. One of the great things about working at T-Mobile, colleagues are also customers.
Execution (Milestone 1)
Early Concepts - Designing the Fix
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 the corporate led Level AA WCAG Accessibility Guidelines
1. Iterate on the Interaction Design
A new Premium feature let users play, share, or copy voicemails directly from the list item on the home screen. Reducing the number of interactions.
Improving Playback Interactivity
A major change was moving the playback and scrubber to optimize placement considering how humans hold their phone, replacing the standard knob-and-bar scrubber with a waveform-style progress bar. In testing this change, 9 out of 12 users were able to understand they could track forward or backward by sliding along the waveform graphic.
A Usability and Accessibility Issue Discovered
I designed then later discarded an expand control button on each voicemail list item, shown in the animation, so the user could read the entire transcript without leaving the screen.
Design Choices
- Expandable card so user could read full transcript without leaving screen
- Animation on the expanding and collapsing
Why Discarded?
- Expansion did not add value as full transcript was one tap away and a long transcript made the collapse portion clunky
- Engineering stated it would take extra effort to code
- Was not Accessible
Voicemail Transfer and Retention
A highly requested feature from users was a seamless way to transfer existing and saved voicemails to a new device across T-Mobile brands and subsidiary brands.
Within team discussions, while this feature had been scoped to require design artifacts for a manual process, in planning we discovered this could be solved in code and would be automatic and seamless to the user. A solid win for good user experience!
Visual Design
2. Visual Branding and the Design System
Creating a Scalable Brand for T-Mobile.
Branding
For the out-of-box start screen, I applied T-Mobile's "Magenta in the Wild" theme, using a lifestyle photo featuring the brand's signature color. In this case the women's scarf. I also simplified the content design on the start screen.
Visual Design Constraint
The visual design challenge 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, I 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 outlined drawings with minimal detail. This adhered to our Diversity, Equity, and 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 engineering 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 developers 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.
Execution (Milestone 2)
Premium Features to Drive Paid Subscriptions
In Milestone 2, the TPM 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:
- Automatically transcribe voicemails in the language of the audio in 96 languages
- Ability to transcribe from one language to another on demand (Figure T.1).
Transcribe a Failed Transcription Feature
I also advocated for on-demand transcription: if a voicemail failed to auto-transcribe, the user could trigger it manually. The development cost was too high relative to other priorities and team resources. It went to a future version.
What Shipped
Product was shipped after I left T-Mobile. Results are from a two month Beta testing program with ~2,000 customers
- -25%
reduction in support calls related to UX or feature matters - 2x
faster success rate in consuming transcriptions and playing voicemails - 32
localized UI languages and support - +12%
increase in app store and survey sentiment toward premium features
