The perfect form flow
T-Mobile's virtual retail form designs (2021)
Why redesign?
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.
My role
As the sole designer, I worked with product managers and developers to focus on:
- Research
- Low- and high-fidelity wireframes
- Design mock-ups
- Prototypes
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
Platform
Desktop, Tablet, and Mobile (iOS & Android)
Research
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.
Competitive analysis
I wanted to see how T-Mobile compared to its competitor's virtual retail forms.
Research notes
The data revealed that mobile is the primary choice of device for customers. To address this, I designed several mobile-focused elements to enhance the user-friendly experience. These included:
- A camera function/option
- Biometric authorization
- More accurate location services
- Automating actions
- Voice functionality
- Group related fields together (checking)
- Providing real-time inline validation
- Numeric keyboard
Mobile phone element requests
Below are a number of new elements I proposed to the team to create a better mobile experience.
Numeric keyboard
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.
Real-time inline validation
2. Providing real-time inline validation
- 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.
Notification permission
4. Notification permission
- Once a user swipes auto pay on, a notification alert will appear to verify autopay.
Camera function
5. Camera function
- The user has an option to scan a bankcard instead of having to input it into the form fields.
Wireframes
With all of the research in hand, I began sketching out my ideas for the new customer-facing form pages.
Low-fidelity sketches
Design mock-ups
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.
Mobile and desktop form designs
Desktop forms
