cancel
Change Plan
Overview
Current change plan page is not suitable for T-Mobile's latest plan (unlimited data plan). So the page has redesigned based on survey and data as we collect from users. In this project, I led the UX design from the start to the end, and here are the results of my design points:
- T-Mobile users are more interested in plan benefits than data usage (because T-Mobile offers unlimited data plan as default).
- Make sure the page is mobile friendly as we have more users access from a mobile app (My T-mobile).
Design Process & My Role
In this project, I led the UX design from the start to the end.
designprocess2
Define problem: Understand users pain points from previous project.
According to the data provided by the program manager, about 73.3% of online users were not able to receive trade-in credits successfully in 2016. There were a lot of reasons including user returned the iPhone without turning off the find my iPhone feature. Users were also confused with how they receive their trade-in credits. While promotion credits immediately applied to cart, standard trade-in credits applied to their next bill. These pain points resulted in increased care calls and customer dissatisfaction
defineProblem
Investigation: Checking past research data
First, I looked at old research data about how the decision on the current page came out.current
I found that the page was designed for the old plan that has option based on data usage. Currently, the T-Mobile plan only has one plan, and it is an unlimited data plan, so the page is not used for its intended purpose. I needed to design for T-Mobile One plan which is the unlimited data plan.
Survey
So, our researchers conducted surveys through Crowdtap to see what kind of information users are looking for new plan. We found two interesting facts: 1. T-Mobile customers were less likely to be looking for data usage. (b / c T-Mobile offers good 4G LTE and unlimited plan). 2. Compared to other carriers, T-Mobile customers were more likely to be looking for information, especially about current plan details, info about current promos/discounts, and new services to add.
survey
Target user: Simple choice plan user
The simple choice is the name of the plan that before launching the new plan from T-Mobile (T-Mobile One). These users keep their old plan because their plan is cheaper than the new plan. So T-Mobile is offering a lot of benefits to the new plan so that hopefully these users switch to the new plan. Recently, T-Mobile offers free Netflix service with their new plan.
Design Approach 1: Tell users whether their device is eligible for trade-in ASAP
Based on survey, T-Mobile customers were more interested to learn about their new plan benefits and discounts compare to customers from other carriers. So, to reinforce that, I have designed one plan comparison page that user can view their current plan and able to compare with available plans.
design approach 4
I thought it would be easier for mobile users to swipe in ways that make it easier to compare plans. But, there is no card-based component in the T-Mobile design component at present. So we decided to proceed with usability testing.
Wireframe
Design Approach 2: How might we help users to compare multiple new plans with their current one?
About 70% of users use T-Mobile service through mobile app(than web), so I designed the comparison of the plan to make it easier on mobile.
design approach 5
Design Approach 3: Make it looks consistent all channels
Currently, many pages on T-Mobile have different style. So our design team are working together to create global CSS and ensure that all channels use the same fonts and styles to keep consistent over T-Mobile.com.
Current and New Design
Testing & iteration
Our team and I explored 2 prototypes (Stack vs. Swipe) with 20 participants in usability testing. Participants prefer swipe version(60%).
“Because stack design almost hides other plans, if I don’t remember to scroll down enough. The swipe design makes sure that I get to see every plan they have”
With final design, I eliminated more contents on the current plan and gave more space on available plans so that user don't have to scroll more to compare. (Because T-Mobile offers only one plan today the compare plan feature became out of scope for this round)
StackStack
SwipeSwipe
Arrow
Final DesignFinal
Design Card Component
Lastly, I worked with design owner to apply card component to global CSS libarary.
Zeplin
Where is it now?
The project is currently in development and will be launching in March 2018.
logo