Trista Tu
F
E
A
T
U
R
E
D
W
O
r
K
Display small capacity caps in different colors for easy differentiation across all available plans.
Offer package + service bundles to meet the diverse needs of users.
Optimize content writing on the filtering page to guide users in choosing scenarios.
Incorporate key CTAs and minimalistic icons to instill a consistent and trustworthy company culture.
Directly manipulate the items of interest. Separate the comparison activity from the product-listing page, keeping the planning grid simple initially.
Set the planned number of optional comparisons to two, avoiding visual overwhelm and excessive considerations.
Convert tedious featured data into an intuitive horizontal table for quick comparison.
Implement a clear sequence of steps that minimizes decision-making and simplifies interactions.
Display less information at a time to help users focus on relevant content at each step and reduce the chance of errors.
Make sure to ask only essential questions, eliminate irrelevant information, and reduce cognitive work for the user.
Establish a design hierarchy between the main Next and Previous buttons to indicate the user’s next steps
BuyViasat's current plan grid is the first place we present products to customers. It is an online service of Viasat that provides customers with internet plans available in their area.
From updated user research data, I learned that most users come back to the plan pages for more product information before making a purchase.
My hypothesis that users can't get a clear understanding of our satellite internet service when they first browse so many plans.
Why did users go back to Viasat.com to get more information before purchasing?
Since there are internship restrictions there are no user interview chance. I conducted the data resources while learning from past research; empathized with the non-technical residents to understand our current plan page as part of their journey. I found the following problems.
- Too many details are shown one time.
- The plan is expensive, why should I buy it?
- What's 50GB enough for? What’s MBPS meaning?
- The price combination is hard to understand.
- What's small/medium/large screen device? Which plan is better for me?
- The grid carousel does not display well on all screen sizes.
- Difficulty distinguishing each plan.
- Product language is not understandable.
- Have to scroll a lot to see all information on the mobile version.
Except competitors listed, I also researched Square, Shopify, Zendesk, Zillow, BWM, Hulu, Mailchimp, etc.
Before sketches, I researched and synthesized 20+ competitive companies of their the responsive planning pages with specific elements, content, and features that made them successful. Once I've gathered all the research results, I made a list and mapped them to find appealing points. In the end, I concluded the following workarounds:
Streamline and user-friendly
Prioritize vertical scrolling over horizontal card sets, as horizontal scrolling can hide content and make it challenging for users to find information. Opt for vertical scrolling on the mobile version for improved accessibility.
Make the promotion noticed first
Enhance visual distinction
Utilize visual aids such as figurative illustrations and icons to intuitively communicate each plan's features and distinctions, providing a clear visual representation for users.
Keep vital info on one line per card, preventing table length issues.
Columns large enough to be legible
Ensure legible columns on mobile screens without scrolling or zooming.
Clarify plans using everyday terms, aiding user understanding of features like daily usage for household accounts.User-friendly daily term explanation
Use a daily term to describe the internet plan like how many householder accounts can be used in which kind of daily usage. It can help users better understand.
Reduce working memory capacity
Display prominently unique plan names, eliminating the need for time-consuming comparisons.
1
Accessible location setting:
Location setting, available plans, and options to change address. Due to our products restrictions, the network services available in different regions are slightly different.
2
Main title in a digestible way:
Add an eye-catching and clear title to directly shows the main purpose of this page. The choice of internet bundles helps potential users who want more services.
3
Subtitle with filter pattern:
The number of available plans located. The new filter function with detailed explanation can help quickly and precisely search plan
4
Plan card includes price and features:
Plan description, avoid unexplained jargon, and mention usage purpose and the number of people.
Price, the real one, not discounted. Discounts, and limited offer prices, must be clear.
Features list with expanding option, keep it short when not expanded.
5
CTA area:
Place the call to action button in a distinguished area. Enough whitespace is used to distinguish the button. Use a highly contrasting color of BuyViasat libraries.
After soliciting feedback from managers, design operations leaders, and our stakeholders in pre-weekly meetings. I consolidated the problems and polished the design to come up with the first version of pricing card design and main user flows that needed pre-user testing as soon as possible.
？
Does the up/down scrolling mobile version get more retention than the previous one?
What are the good or bad experiences of mobile and web that are most valued by stakeholders?
？
Is Illustrations really help? Do customers understand plan name "featured plan" meaning better?
Could users easily understand the promotion and promo pricing?
？
Do customers quick choose plan after using the filtering feature?
Are they feeling more effective to find the plan? Or will there be obstacles/roadblocks?
？
Test filter with winner card. Analyze the pros and cons and the reasons for winning separately.
Then do an A/B test between a winner plan and what we currently have.
Why meaningful and intuitive illustrations were added, each plan is still not well explained.
Although the illustrations and icons can express brand characteristics and product attributes. But They also take up a certain amount of space and require users to spend time thinking about them.
CTA area in secondary button is not valued and need to be highlighted. The pricing area needs to look like a promotion, not a discount.
Although testers and stakeholders said they loved icons of person and speed icons which also helped understanding of plan features/details, it does not real help them make quick decision.
After seeking feedback from PM and design leaders, use the same icon first to make fullscreen more unified and then carry on A/B testing.
Minimal proportions and narrow blocks of different system colors help visually plan without being overly distracted. Other hand, colorize current prices and instantly highlight our promotions.
I added the "Type your daily internet usage" header to personalize choices, but our satellite networks limit detailed user-defined content. I addressed this by including user ranges for each Mbps. "Build your package" was highlighted for guidance.
The two CTAs on the filter page confused users, so I moved "Help to find a plan" to the main scrolling page. Testing showed the filter features made it easy for users to understand and find plans.
I applied a scalable design for comparison. When the user selects two plans for comparison, the corresponding comparison information is directly stretched below. (After the iteration of the mobile version, the illustrations were moved out.)
I used the primary Viasat navy block as background to highlight the differences in the selected plans, also clearly delineating selected 2 plans from the complex contrasting content below.
The main plan parts are fixed at the top of the page to reduce the customers' memory burden caused by scrolling up and down frequently.
When the marketing team starts the prototype of the user test plan. In addition to following up on user testing, I joined one of the operation design teams to brainstorm ideas for payment methods. There are the one-time payment cards I designed. Below are part designs.
Common patterns like filters can streamline user interactions but require careful design. Filters should have intuitive defaults and maintain interdependence with results to ensure accuracy and relevance.
Time constraints make it essential to focus on core issues. I collaborate with user testing and development teams to gather feedback, ensuring designs address real needs and are well-targeted.
Allow users to pause, save progress, and resume later, minimizing redundant data entry while accommodating their needs.
Ensure the wizard process is user-friendly, even if it adds slight complexity, as it’s central to finding the best plan.
Conduct more user interviews on the pricing system and balance profit goals with customer satisfaction. This ensures solutions evolve based on user input and meet practical requirements.
