The perfect form flow
T-Mobile's virtual retail form designs (2021)
T-Mobile's virtual retail agents had to send out six independent form links to new customers who wanted to set up an account with T-Mobile. The agents needed to reduce the form links via chatbot to create a better customer experience by omitting the number of forms they would need to fill out.
As the sole designer, I worked with product managers and developers to focus on:
- Low- and high-fidelity wireframes
- Design mock-ups
Problems that needed to be solved
- Had two sets of forms for English and Spanish
- Mobile vs desktop usage
- Too many form links sent to new customers
Desktop, Tablet, and Mobile (iOS & Android)
There was limited user research available for the project, so I contacted other T-Mobile teams in the virtual retail and business departments to gather recent data on desktop and mobile usage. I then did a competitive analysis of Verizon and AT&T and spoke to T-Mobile online agents to get a well-rounded view of the various user experiences to create the best possible user experience for T-Mobile customers.
Mobile vs. desktop usage in 2020
Below is the 2020 data that shows the difference between mobile (Android and Apple) and desktop users. With mobile usage at 60%, which has grown by 20% over desktop, which remains at 40%. Based on these numbers, I predict that mobile will continue to grow as the Number 1 device used by new T-Mobile customers.
I wanted to see how T-Mobile compared to its competitor's virtual retail forms.
The data revealed that mobile would be the first choice for the device customers would use. Because of this, I concepted a number of mobile-focused elements to create a better mobile experience. This included:
- A camera function/option
- Biometric authorization
- More accurate location services
- Automating actions
- Voice functionality
- Group related fields together (checking)
- Providing success states
- Numeric keyboard
Mobile phone element requests
Below are a number of new elements I proposed to the team to create a better mobile experience.
1. Numeric keyboard
- Replacing the present default keyboard with the numeric keyboard was one of my first requests to make it a better experience filling in numeric form fields. This new feature was approved and adopted.
Providing success states
2. Providing alert states line by line
- Users will get an alert after entering information into each form field that their entry was successful or failed. This allows for users to know the status as they go rather than waiting until the form is completed and clicking the next button.
Bank card icon
3. Bank card icon
- Giving the user a viewable bankcard icon when they input the first few numbers of the bank card in the form field letting the user know the card they are using.
4. Notification permission
- Once a user swipes auto pay on, a notification alert will appear to verify autopay.
5. Camera function
- The user has an option to scan a bankcard instead of having to input it into the form fields.
With all of the research in hand, I began sketching out my ideas for the new customer-facing form pages.
After I sketched out my wireframes, they came alive with T-Mobile branding, enabling me to add new elements and accessibility features in my mobile and desktop designs.