DIGITS from T-Mobile

Designed a web platform that increased Digits subscriptions by x that complimented the mobile apps for a virtual phone number communication platform.

Photo of laptop showing the calling screen
Visual Experience of DIGITS web

Program Summary

Develop a communication and collaboration service that helps business and retail customers share and manage multiple phone numbers on a single device.

  • Type: Consumer Small Business SaaS
  • Market: USA
  • Team: 1 Product Manager • 1 Designer • 7 Software Developers
  • Role On Feature: Sole Designer as Product Designer, Visual Designer, User Researcher on Web Version
  • Timeframe: 5-month Agile rollout • 2022

Challenge

Drive and increase the number of customer subscriptions by designing a new web and desktop platform as a new product pipeline to support the product mobile apps.

What Success Looked Like

  • Increase number of DIGITS subscribers by 30%
  • Create a space to encourage app downloads for mobile and desktop
  • Create a support and FAQ website to support the product
  • Align and grow visual language and T-Mobile digital branding
  • Accessible Compliance (WCAG 2.0)

What Changed

Product shipped, but I left T-Mobile before gaining insight into the results. I did deliver on time and worked with the engineering team to ensure Visual Language, Branding, and Accessibility goals were met.

Who is the Customer?

Understanding the bigger picture

T-Mobile created a virtual phone number app technology as at the time eSim technology wasn't widely available where users can have multiple phone numbers on a single device. To begin I wanted to learn what is the customer motivation around wanting a second or third line and what is the value they place on it.

Some findings from this exploration, Customer's would pay for multiple lines:

  • If the the price point is right for them for a second or third phone number
  • To be able to share a line with family or employees
  • To be able to give out a temporary phone number to strangers and casual acquaintances
  • To be able to set custom ringtones for each line
  • To be able to set unique voicemail greetings for each line

My research resulted in three rough market segment archetypes:

The third segment (the Skeptic) was based on some real-life customer service reviews. While it wouldn't directly affect the product vision, I wanted to be thoughtful around potential unintended consequences.

  1. 1. The Boss

    Needs a second line for a business or other professional reason
  2. 2. The Connector

    Likes the idea of a second line to share with family and friends. e.g. a party line
  3. 3. The Skeptic

    Dislikes the idea of the product, found out their significant other used it to cheat (Anti-persona)

The Strategy

Starting With People

How will I improve DIGITS for web/desktop?

I didn't work directly on the original DIGITS mobile product, thus had knowledge gaps about the product. I wanted to make sure we were designing the right solution for desktop/web. I also wanted to give back any discovery to my colleagues working on the mobile solutions. After interviewing with DIGITS mobile design and product about their experience and aligning on testing goals.

My first observational usability study was conducted with 10 users (5 DIGITS users, 5 people new to DIGITS) to understand the customers thought process interacting with the DIGITS mobile apps.

  1. Goal 1: How well does the customer understand what DIGITS it and adding a new virtual phone number?
  2. Goal 2: How easy are the communication features to use, and what missing features or opportunities can we uncover?
Image of a mobile phone holder with a mounted camera that points down so the viewers can see what the user of the phone is doing on the screen.

A few of my findings I will address in this write up

  • Finding 1

    How easy is it to remember which phone number the customer is using (7 out of 10 failure)
  • Finding 2

    How easy is it to add an additional participant to an ongoing call (8 out of 10 failure)
  • Finding 3

    How easy is it to find previously shared media within a conversation chat (4 out of 10 failure)
  • Finding 4

    How easy is it to discover DIGITs and download the app (4 out of 5 new users failure)
  • Finding 5

    How easy is it to get support with DIGITS (4 out of 10 failure)
  • Finding 6

    Customers requested a search message feature in conversations (All 5 DIGITS users)

Putting the Plan Together

For my own mental model, I sketched out the features, user workflows, and information architecture by comparing with the DIGITS mobile apps to maintain platform uniformity and onboarding steps.

Whiteboard Ideation
Sample Whiteboard Ideation

The Work

Designing the Fix

For brevity on this portfolio writeup, I am only going to focus on a few of the product design solutions for the findings I listed above from the first usability study and product discussions. Contact me if you fancy diving deeper into the full case study.

Which phone number did "I" use?

One of the key usability findings that was leading to customer frustration and adoption was the difficulty in easily understanding which of their phone numbers they used in any given message conversation or call.

I approached the design solution in two ways. first was to use a color indicator on the message and call logs. The second identifier was to show the phone number and color inside the conversation or call. My color choices were tested for WCAG accessibility compliance.

Wireframe of new app. Three panels: Left panel is conversation logs, middle pane is conversation, right pane is details about participants. Main navigation has 4 items: Messages, Calls, Voicemail, Contacts
Messaging/Landing/Home Screen Wireframe
Screenshot of a messaging app web interface showing a 'Compose new message' panel open on the right side, with a 'From line' dropdown set to 'Oceanside Offshore Accounts' and an empty recipient search field. The left sidebar shows a list of conversations with contacts including Neeta Moodbidri, Porsha Kahlo, Georgia Song, and others, each with timestamps and message previews (text, voicenote, image, video, etc.). The top navigation bar includes tabs for Messages, Calls, Voicemails, and Contacts, with Messages currently selected.
New Navigation Screen
Old Navigation Screen. Navigation is stacked on the left.
Messaging Screen with Color Bands and Phone Number Designation Addressing One of the Customers Pain Points

An example of the calling screen with call logs.

New Calling Screen Undocked

The phone number is displayed by a color that the customer can customize their color preference in settings. The customer can also filter their message and call logs by each of their phone numbers.

One interaction I thought about but discarded was changing the color on the message details screen without needing to go to settings. Discarded due to scope and it might have caused confusion to the customer.

Message Screen showing user assigned phone number names and colors to distinguish their phone numbers and be reminded of which phone number they used
User Can Use Color and Names to Identify Their Phone Numbers

When a user activated a phone number it would be automatically be assigned a unique color. The user could then choose a more meaningful color for that phone number in settings.

Settings screen with left pane options for phone numbers. Highlighting the Color Chooser to assign a color to a phone number to identify it.
Phone Number Settings Showing Color Identification Chooser
Result of Finding 1

How easy is it to remember which phone number the customer is using? (10 out of 10 success!)

Disclaimer: due to most customers have 2 or 3 phone numbers maximum

How do "I" add another particpant to a call?

We were failing our customers when it came to ongoing call management. Customers were having trouble adding participants to ongoing calls and managing multiple calls. These were core feature of DIGITs that presented an opportunity to elegantly solve in a way customers could control their agency.

My solution to address the first issue was to make calling similar to starting a conversation.

New design of the call screen with a search based contact form and dialer that is centered on the page
New Calling Screen Undocked

I added a Add to call call to action on the call screen. The customer could then dial a number or add an existing contact and add the participants as chips, then select Merge which would merge all the participants into the call in one go. The user would also get feedback if a call failed, or the participant did not answer.

New design with search to add a contact or dial a new number to add to an ongoing call.
Add Participants to Active Call

To address the second issue of managing multiple calls on the customers multiple lines, I added the ability to dock the first and second call to multitask and improved the way second and third calls are held and answered.

Screenshot of a messaging/calling app web interface during an active call (01:03) with Georgia Song, indicated by a green bar at the top and an active call panel on the right side showing controls for mute, hold, and end call. A popup notification appears in the center showing an incoming call from Qin Zhao (202) 555-7888 on 'Digits T&T 12', with options to 'Put Georgia Song on hold,' 'End call with Georgia Song,' or 'Reject incoming call.' The left sidebar shows a list of message conversations, and the main panel displays a chat conversation with Neeta Moodbidri, including a photo of an animal swimming in water and text messages discussing plans to see a moose.
Incoming Call with Active Call and Multitasking

The user can switch between calls on multiple phone numbers or on the same phone number. This design shows the multi phone number situation where they have received 2 calls, 1 on each phone number.

2 Calls Docked Multitasking

The last scenario I addressed from a product and design scenario was in the case of three calls. Example: 1 Active call and a second Incoming Call; 1 Active call, a second call on hold, a third incoming call.

While customers were familiar with the feature and icons used in native mobile calling for 1 Active call and 1 incoming call, I needed to consider an elegant solution as the technology allows for 3 call scenario. The solution I tested was to write CTAs that are clear. I also considered localization with this solution, but it was a tradeoff for icons only as usability testing confirmed they were confusing to understand.

Although the technology allowed for more than 3 calls simultaneously I advocated with product's support to stakeholders that we limit the calling feature to a maximum of 3 calls (1 Active, 1 Held, 1 Incoming) for spatial cognitive understanding and safety guardrails.

Incoming Call Modals: First Incoming; Second Incoming; Third Incoming
Result of Finding 2

How easy is it to find previously shared media within a conversation chat (9 out of 10 success!)

How do "I" find previously shared media to me?

The research showed finding previously shared photos and videos on the mobile device was quite difficult due to an legacy product decision to not store media on the mobile device. Part of the problem could be attributed to the lack of a search feature within conversations.

Using the data from the usability study and customer support feedback. I aligned with product and stakeholders and proposed a media library the would be in sync with cloud storage across platforms.

The media library addressed the customer pain point of scrolling back through endless messages in a conversation to find that shared file or url link. The solution was to group the different types of shared files into 3 types: "Media, Documents, and Hyperlinks

Right panel media well showing 3 tabs: Media, Documents, Hyperlinks. Organized in a scrollable grid with call to actions to download, share, and delete objects.
New Media Well Screen Hi Fidelity
Right panel media well showing 3 tabs: Media, Documents, Hyperlinks. Documents tab is in focus state by a magenta underline to tab. Organized in a scrollable grid with call to actions to downlaod, share, and delete objects.
New Media Well Documents Screen Hi Fidelity
Right panel media well showing 3 tabs: Media, Documents, Hyperlinks. Hyperlinks tab is in focus state by a magenta underline to tab. Organized in a scrollable grid with call to actions to downlaod, share, and delete objects.
New Media Well Hyperlinks Screen Hi Fidelity

Customers could also manage the stored media by downloading, and deleting.

Right panel media well showing Media tab focused and 1 video selected in the grid. Selection state is a magenta border and a selected checkbox fliied in with a magenta background and white checkmark. Also the three call to actions appear on top of the media grid with buttons for download, share, and delete. There is also an option to select all the media files.
New Media Well Item Selected Screen Hi Fidelity

One idea I had initially was to have a fifth tab for files so the customer would have access to all media across conversations in one place. We deprioritized this idea from the first release to ship on time.

Screenshot of a 'Shared Files' web interface with the Files tab active in the top navigation, alongside Messages, Calls, Voicemails, and Contacts. The left sidebar shows categories: Media (selected), Documents, and Links. The main panel displays a grid of media thumbnails—mostly nature photos and videos of landscapes and animals—organized by date sections labeled 'Today,' 'February 3, 2022,' and 'January 23, 2022.' A selected video thumbnail is highlighted with a pink border. The right sidebar shows file details for the selected video: File Name '2022_07_07_165123.mp4,' Type 'MP4 File,' Dimensions '1920 x 1080,' Duration '1 minute 37 seconds,' and Date Received 'Today.
Consolidated Storage Tab Hi Fidelity
Result of Finding 3

How easy is it to find previously shared media within a conversation chat (8 out of 10 success!)

Notable finding: discovery was a 10 of 10, but customer needed to remember in which conversation was that file they were looking for

How do "I" discover DIGITS?

DIGITS as a product offering is promoted in the T-Mobile store at Point of Sale and is largely successful to get the app on the phone, but then often customers forget it is there.

The opportunity I proposed was going to address product discovery in two ways mobile team would create push notification reminders and I proposed a product support website where users could learn about what DIGITS is, what is the value proposition for them based on the identified market segment archetypes and get technical and customer support. Traffic would also be driven from the corporate website, customer care, and search amongst other channels.

To design the website, I utilized elements of corporate branding and the design system and visual language I authored for T-Mobile CDSE products.

The primary call to actions on the landing page is to download the apps or sign into the DIGITS web platform for the initial release of DIGITS web.

New version iteration 1 web page with a woman looking happily on her phone and multiple call to action buttons for: mobile app, web log in, desktop app download and a brief description about DIGITS as follows; Free your phone and your number with DIGITS. Use the same number on all your compatible devices—phones, computers, tablets, even a smartwatch—or have up to five numbers on a single device. The choice is yours.
New web page iteration 1
Revised Version After User Feedback

User feedback from the first hi-fidelity version revealed that many users confused the iOS Download on the Apple Store Mobile app button with the Desktop App download button. To reduce friction, I separated the buttons visually and included a QR code for the mobile apps.

New version final iteration web page with a woman looking happily on her phone and multiple call to action buttons and QR code for mobile app, web log in, desktop app download and a brief description about DIGITS as follows; Free your phone and your number with DIGITS. Use the same number on all your compatible devices—phones, computers, tablets, even a smartwatch—or have up to five numbers on a single device. The choice is yours.
New web page final iteration
Result of Finding 4

How easy is it to discover DIGITs and download the app (No data)

Reflection: This website was shipped only as a partial solution due to scoping bandwidth constraints to adhere to the product shipping date.

Accessibility

Preparing a Design to Engineering Handoff

As part of the design documentation handoff, engineering and I worked together to make sure our products are WCAG compliant. An example of one of the design artifacts I created dictating keyboard access. Building accessible products and learning as much as I can about inclusive best practices has been a career passion of mine within the product and product design space. Contact me if you fancy reviewing your product or service to see how it meets accessibility WCAG standards.

Keyboard Shortcuts and Tab Order

Let's Build Something Brilliant

Connect with me and we can discuss all the enterprise and consumer products I worked on at T-Mobile.

Check Out More T-Mobile Projects