Viasat

Value Remodeling Internet Plan

Challenge:
Simplify the intricate satellite internet packages on BuyViasat.com and create additional features to aid decision-making. Develop an expandable design system to optimize accessibility and customer conversions.


Solution:
Shipped adaptive and responsive filters, multifunctional compare GUIs table that covers consistent data content, and AI wizard. Reduce customers' interaction costs and cognitive load then help them quickly select.

Outcome:
- Delivered high-fidelity mobile prototypes and responsive web 1.5 weeks.
- Achieved 92% satisfaction rate for the schedule filter and wizard task flows.
- Reduce the 32% bounce rate on the main product planning page. Improve cart-plan transitions.
- Increased internet plan shopping cart conversion rates to 43%.

Revamp the responsive satellite internet page to facilitate seamless comparison and selection for non-tech residents.

My Role

Team

Duration

Adaptive Design
Responsive App
Content Strategy
Competitor Research

1 Product Manager
2 Engineers
2 Researcher
1 Design Lead


12 weeks, 2022

Final Deliverable

Enhance the sophisticated satellite internet page for easy understanding and choice, helping non-tech users connect globally and enjoy their preferred lifestyles.

01 - Effortless
Understand

Intuitive plans page with flexible filter

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.

02 - Quick Make Decision

Clear-cut table facilitates comparison

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.

03 - Help Me Choose

Self-sufficient wizard shortens consideration

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

Problem Faced

We didn't explain our products clearly and amicably.

Crisis: The Plan-Cart Conversion Rate Is Low

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.

Empathize with Users

Dig deeper our current plan grid pages

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.

Link to BuyViasat.com
Customer Pain Points

- 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.

Competitors Research

What do appealing plan content pages look like?

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:

Synthesize

My design approaches

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.

Put into practice

HMW create the complex and boring
satellite internet plan bundles in a more informative and appealing way?

communicate concept

Pricing page design is a little bit of ART
and a whole lot of SCIENCE.

Plan page architecture proposal - Mobile

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.

Restructure with a flexible mindset
Design in a mobile-first

Preliminary pricing card design

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.

Design Principles

High-fidelity wireframes

WHY?
Flexible Filter

What's hard to understand doesn't have to be the sheer volume of data. More because of the complexity and lack of consistency that data often contains.

Displaying filters above the results could keep the user interaction stable and predictable. In fact, it doesn’t have to be visible at all times. An option to clear all filters is available as well.

Filter Page
Available Plans Page
Details Expanded Page

WHY?
Easy Comparison

Comparison is the most critical activity that users perform when they review satellite plans. Offer up to 2 plans for easy comparison.

The most important part - the plan name and price should be pasted at the top of the page, a no more than one page breathability level comparison table helps reduce the user's memory load and facilitates a quick comparison.

The more varied the options, the more comfortable people are with a slightly larger set of options. Use illustrations and meaningful icons to visually differentiate the available plans.

Select 1 Plan Page
Select 2 Plans Page
Horizontal Comparison Page

WHY?
Thoughtful Wizard

The easy-to-use wizard design helps boost clients' confidence in finding plans and prevents them from bouncing off pages.
Users have the right to quit the process midway although wizards are not gracefully interruptible.
Mitigated users by thoughtful questions ensuring that the process steps are clearly communicated to the user.

Help To Find Banner
Q1 - Plan Users Number
Q2 - Devices Numbers
Q3 - Daily Internet Usage

Responsive Web

Redesigned and optimized the responsive large desktop(1440px) platform most frequently used, also considering usability and flexibility through interaction design.

Homepage - Filter Popup
Homepage - Filter Results
Homepage - Plan Selected
Plan Compare Page
Testing Goal

Time to get target customers involved.


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.

Testing digest

3 Pivotal Design Revisions

01 - Pricing Card Iteration

Version 1.0
Version 2.0
Version 3.0

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.

02 - Plan Filter Page

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.

Version 1
Version 2

03 - Comparison Web Page

Version 1
Version 2

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.

What else I've built

Payments Pattern

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.

Credit/Debit Card
Pay With Bank Account
Paypal

What I've Learned

More common design patterns are, more traps.

Filters are a ubiquitous and powerful design pattern for quickly retrieving and finding intelligible results on an individual basis. However, the design of the filter is also risky because of the real-time interaction with the user. It usually needs obvious and sensible defaults to remember user input. And they need to always be interdependent which means associated with the results on which they are based.

Narrowing down problems is more valuable.

With limited internship time, useless flippant designs can arise without a thorough understanding of the problem. Discuss weekly with user testing and development teams and seek feedback on every detail to help identify real issues or narrow down each area. All the time I should be passionate about the iterative design process, inspired by group criticism

Next Step

Allow exit wizards and save states.

Our wizard is very simple with only 4 steps, and saving state may just complicate the interface unnecessarily. However, we are not users and the process is at the heart of finding the most suitable plan, so it is important to allow users to stop their work at any time, save it in a file, and let them retrieve it later. They still incur the cognitive cost of restoring context and remembering goals, but at least they don't have to re-enter the same information.

Find a balance between the conversion and users needs.

Customers think far beyond algorithmic pricing to maximize profits. Unintended consequences can occur if we optimize only for conversion rates and maximizing profits. Should we think more about customer attitudes. New rounds user interview should be set up to seek their feedbacks on our pricing system.

Why not this?
You Had
Contacted Me
In Another
Universe.