US Mobile Plan Page Redesign
Designing a user-friendly and transparent plans page for US Mobile
WEB UX • PRODUCT BRANDING
Project Overview
US Mobile is an American mobile virtual network operator (MVNO) that utilizes T-Mobile and Verizon Wireless networks to offer talk, text, and data services. To enhance user engagement and facilitate business growth, I help them to redesign the plan page experience by improving shopping efficiency and boosting customer confidence.
Client
US Mobile
Timeline
2 days of UX Design
+ 2 days of 3D Arts
My Role
UX/UI Design
Business Strategy
3D Artist
Tools
Figma
RedShift
DESIGN CHALLENGE
What does the new plans page look like? How are the plan groups presented within it?
DESIGN GOAL
To create a more user-friendly, transparent, and compelling plans page that drives customer conversion by effectively communicating US Mobile's powerful 5G network and low prices.
BACKGROUND
Initial Opportunity Exploration
Before starting to research, I try to understand what are the opportunities and goals from different perspectives, which will help me define problems and search for solutions at later stages.
User Needs
1. Easily navigate the website to find an affordable plan
2. Quickly understand the pricing and features of each plan option
Business Goal
1. Attract more users to choose US mobile service
2. Encourage more users to sign up for the free trial plan
Design Process
The UX process varies based on the different types of projects. The design process was determined by project goals, business needs, the complexity of the design solution, timing scope, etc.
For this project, 50 percent of the time was spent on design iterations. From prioritizing key features to conducting user testing to evaluate design decisions and improve on user-centered design solutions.
RESEARCH
Background Research
For the UX research, I conducted research through 3 main research methods: User reviews in app stores, competitive app audit, and understanding the user demographic, to collect data on each facet of the design challenge in order to answer our research goals.
Feedback From User Reviews
Key Insights from app store comment research:
1. Users are most care about price, data, coverage, and feature
2. Inconvenience in previewing different plan options
3. The lack of transparent pricing information
4. Inefficiency in searching for the plan they want
IOS & Android App Store Review
Competitive Analysis
Opportunities:
1. Most of the mobile carriers currently don't have freedom to customized the plans, which is a good opportunity to attract potential users.
2. Many mobile carriers' plan comparing feature is inefficient and lacking.
Inspiration:
A unified card design can be helpful for users to compare, but may limit the level of freedom in plan choices.
Plans Competitive Analysis
Demographic Research
Key insights from user demographic research:
1. US Mobile is more appealing to younger generation
2. 69% of users choose to use mobile web service instead of desktop
3. Average visit duration is 04:49 minutes, longer than other competitors
Quantitative Research
Current Website Critique
I visited the plan page on the US Mobile website and carefully evaluated the current shopping experience. I applied the think-aloud protocol as I reviewed each plan and take notes.
Website Critique Notes
IDEATION
Brainstorming
Based on the user pain points, some initial ideas are generated to solve the problems of ‘inefficiency in plan search’, ‘lack of transparency in price, and ‘hard to understand different plan options’.
What if....
What if....
we change the Information architecture to better serve the needs of different users?
we redesign the plan card to be transparent in pricing and easy to understand?
Some Initial Sketch
Re-Prioritizing features
With limited time and resources, all the ideated features are reprioritized according to their impact and feasibility.
Re-Prioritizing features
Design key features
In order to explore more how we can achieve the design goals, I analyze three key features:
1. Highlight the free trial (including promo card & unified card design)
2. Increase shopping efficiency and accuracy when customizing plan
3. Convenience & clear to compare different plans
WIREFRAME
Information Architecture Redesign
In order to add these features, I decided to redesign the website's information architecture. I restructured the plan page, segregating it into distinct sections for individuals and groups.
Site Map Design
Key Feature Wireframing
Iteration #1 Highlight Free Trial
During the website critique, I noticed that the Free Trial CTAs were scattered and confusing. To address this, I plan to highlight the free trial plan with a dedicated free trial card and improve the clarity of the promo card design.
Tree Trial Feature Wireframing
Iteration #2 Custom Plan
The current custom plan features on the website lack checkout options and detailed information. To improve, I've added a create plan feature for generating custom plans and included recommendation plans for easy comparison.
Custom Plan Wireframing
Iteration #3 Compare Plans
The current compare plans cannot compare all the plans, and lack price information. So I add a checkout button with price on it to make the price more transparent which comparing. I also add one more column to compare 3 plans at some time and adjust the UI style to make it clearer.
Compare Plans Wireframing
Transfer to Lo-fi Wireframes
FINAL SOLUTION
Reimagined New User Shopping Experience
Scenario #1 Landing on the hero page
Kate, a first-time visitor to US Mobile, is keen on exploring the available plans. She navigates to the plans section by clicking on the corresponding option in the navigation bar.
Upon landing on the Hero page, Kate immediately notices the presence of a 100-day free trial plan. Intrigued, she proceeds to review all the recommended plans.
Scenario #2.1 Explore individual plan
As Kate scrolls down, she discovers the individual plans. In the redesigned version of the website, she can now compare each plan features, including the free trial option. Additionally, a label indicates the most popular individual plan, streamlining Kate's decision-making process.
Scenario #2.1 Explore group plan
Kate proceeds to the group plan page to explore options for her and her roommates. In the redesigned version, she can now choose the number of lines needed, which dynamically displays all the relevant plans for easy comparison.
Scenario #3 Compare plans
To determine the most suitable plan for her needs, Kate utilizes the compare plans feature to assess different options. She can customize her comparison by hiding certain information in the plans that she deems less important. This enables Kate to compare plans more efficiently.
Scenario #4.1 Customized plan
Having gathered sufficient information about the existing plans, Kate is now interested in exploring whether a custom plan would better suit her specific needs.
She enters the desired number of lines and data requirements into the system. This allows Kate to assess the viability of a custom plan based on her personal preferences and budget.
Scenario #4.2 Generate customized plan (New feature)
Kate now has the ability to generate a customized plan, which is presented as a plan card. Also, the system provides recommendation plans specifically tailored for Kate to compare against her customized plan.
Scenario #5 Understand Unlimited Plans
To improve Kate's comprehension of the Unlimited Plans, I have redesigned the information layout to align with other plans. Specifically, I have highlighted the perks of the Unlimited Premium plan, making it easier for Kate to understand the unique advantages it offers.
VISUAL BRANDING
Design System
Due to time constraints, I was unable to fully develop the entire design system. However, I did utilize certain components during the hi-fi prototyping stage.
3D Illustrations
Promocard redesign
During the website critique, I noticed that the Free Trial CTAs were scattered and confusing. To address this, I plan to highlight the free trial plan with a dedicated free trial card and improve the clarity of the promo card design.
3D Art WIP
Heropage 3D illustration
I created a captivating 3D illustration for the Hero page, strategically designed to grab the user's attention and create an engaging visual experience.
