The perfect form flow
T-Mobile's virtual retail form designs (2020)
T-Mobile's virtual retail agents had to send out 5 independent form links to new customers who wanted to set up an account with T-Mobile. The virtual retail agents wanted to reduce the form links via chat bot so the customer would not be overwhelmed by forms they had to fill out online (mobile or desktop) with the agent.
I was the only designer. Worked with Product Managers and Developers. I focused on:
- Low- and high-fidelity wireframes
- Design mock-ups
Problems that needed to be solved
- To many form links sent to new customers
- Had two sets of forms for English and Spanish
- Mobile vs desktop usage
Website & Mobile (iOS & Android)
Below are the past desktop and mobile T-Mobile forms.
About you form
Billing address form
Pin, Passcode or Social Security (SSN) form
Since no user research was documented for this project. I reached out to other T-Mobile teams within the virtual retail and business departments to get the most recent data regarding desktop and mobile usage. I did a competitive analysis on Verizon and AT&T as well as reached out to T-Mobile online agents to get as much information as I could to create the best user experience for the T-Mobile customer.
Mobile vs. Desktop usage in 2020
Below is the 2020 data that shows the difference between mobile and desktop users. With mobile (Android and Apple) at 60%, which has grown by 20% over the desktop that was at 40%. My future prediction is that mobile will continue to grow as the number one device used by new T-Mobile customers.
I wanted to see how T-Mobile compared to its competitor's virtual retail forms.
The research I have done showed that mobile would be the main device that customers would use moving forward. So I mainly focused on the mobile platform in my design. So I wrote down a number of mobile-focused elements that I wanted to suggest to the team to re-organize and layout information in a new manner that would create a better mobile user experience like the following below.
- Camera function/option
- Biometric authorization
- Location services
- Automate actions
- Group related fields together - chunking
- Providing success states
Mobile phone element requests
Below are a number of new elements I proposed to the team to move forward with to make it a better mobile user 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 success states
- The user will have viewable success and error alerts as they fill out the form fields one by one.
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 double-check with the user to make sure they really wanted to do that type of action.
5. Camera function
- The user has an option to scan a bankcard instead of having to input it into the form fields.
Taking in all of the research information I have found, I started sketching out my ideas on paper for the new customer-facing form pages.
After I sketched out my wireframes, they came alive in color. Using the T-Mobile branding, I moved forward by adding new elements and accessibility features within my mobile and desktop designs.