Viasat usage experience overhaul
Years of business-driven design necessitated a customer-centric approach to revamping the entire usage experience
Company
My role
Lead designer
Contributions
Identified the problem during reviews of our customer feedback survey with the product manager
Defined guiding design principles for proposed solution
Worked closely with UXR to take the early designs through 2 rounds of usability testing
Designed high-fidelity features and component states
Tools
Figma
User Testing
Condens
High Charts
Problem
Ongoing complaints from Viasat residential internet customers indicated that the current usage did not provide customers with a reliable way to check their total data usage. Without data transparency it's near impossible for customers to plan their data usage for a data cycle, leaving them vulnerable to slow speeds and unplanned data overages.
Solution
Big picture, little picture: users can quick-glance view their high-speed usage on the homepage and drill in to view the comprehensive total usage visualization on an interior page for more detailed information.
Impact
70% decrease in customer complaints around data management experience as well as positive feedback left via the customer feedback survey.
75% decrease in development time for a new data-savings add-on service in the new data management framework.
Context
An expensive data problem
A poor self-service experience was driving calls to customer service
Customers weren't content with the self-service data experience and called into customer service for a fuller picture, leading to high call center volume.
50%
of 1 or 2 star reviews in our Customer Feedback survey pertained to the self-service data management experience
It was expensive to scale
The product roadmap showed the launch of multiple add-on products in upcoming quarter— but we had no framework to show the usage of new add-on data types.
The data-capped internet experience
Viasat residential internet customers begin their journey by learning that their internet is data-capped by design (ex: 60GB). Most customers exhaust high-speed data before the end of their bill cycle, though high-speed “top-ups” can be added at any point.
A customers data journey throughout their bill cycle
Customer feedback was clear
I combed through customer feedback surveys and treated members of our Customer Care team as proxy users to get a feel for how customers were interpreting and responding to our current data experience.
1
Low data caps and slow speeds sew customer distrust
Customers felt deceived when it came to understanding their total usage. They often needed more high-speed data but had no way to track usage of additionally purchased data
2
Data exhaustion is a threat to career and livelihood
Running out of high-speed isn’t an option for many users who depend on high-speed connectivity to get online for work, connect with family and have access to emergency services
3
Comprehension of add-on data service value was low
Comprehension around additional services that offer data-free streaming, work-from-home data benefits and more was low
The challenge
Take a data-capped internet experience and make retaining high speeds as seamless and intuitive as possible.
North star design principles
Transparent
Hiding the fact that customers speeds are slow won’t make speeds any faster. we need to be honest about the usage state that a customer is in.
Comprehensive
Ensuring that customers feel that they (and do!) have all the relevant data available to them will help build trust around the data-cap experience
Timely
Helping customers get more high-speed at the right time makes the transition top-off data seamless and eliminates data throttling from the journey
Ideation
Creating and refining the solution
Painting a full picture of data usage
We revamped the data experience to include our "little picture"— the widget — and the "big picture" — a new total usage 'donut' viz. Our new donut viz also set us up to easily scale as Viasat added more add-on data services like free streaming and WFH tools.
Key features of the new usage experience included color coded badges + page alerts to indicate usage status as well as complementary data visualizations.
Usability testing results:
Users accurately understood their data usage using a combination of widget and total data donut viz
“I can see that I’m out of high-speed data even though I bought a Data Boost. Now I’m using standard data, not high-speed”
Users knew how to get more high-speed
"Now if I wanted to get out of the standard data, I could buy a Data Boost from the ad for faster inernet"
Users did accurately note that they were out of high-speed
"I can see that I don't have any more high-speed because of all the orange information"
Users struggled with nomenclature— what’s ‘standard’ data really mean?
“Well, standard data is really slow. It’s not standard data. It’s slow data”
When is it good enough to build?
It's hard to know when a solution is totally solid enough to begin building. We took a step back and mapped user feedback from testing against our driving product themes: we had successfully solved for each of them.
And that feedback about speed-tier nomenclature? We logged it as a future enhancement and put a meeting on the cal with marketing to discuss how we name and explain speeds to customers.
North star principles the new design successfully solved for:
Design
Sweating the design details
Driving consistency no matter the usage state
The Usage widget component and the variants and props that make it flexible across all data use cases
Designing with an enterprise design system
The Viasat enterprise design system, BEAM, was relatively new at the time of this project— but we still benefitted from a lot of bread and butter components like buttons as well as type styles and colors.
I worked through interaction patterns and variants for the accordion component seen here, and it was eventually used as the starting point for the accordion component added into the design system in a future release.
All of the components that came from BEAM, Viasat's enterprise design system.
Making it move
I worked closely with development during the detailed design process to ensure that what I was designing was technically feasible in our viz toolkit (Highcharts).
In addition to the detailed handoff file, I met weekly with development to check out the latest build and do live design QA.
'Dev spec' notes and markups that I included in the handoff file to inform final interaction patterns
Feature highlights
The data info customers want, when they most need it
Clear & concise usage indicators
Orange status badges clearly indicate to users when they are out of high-speed data.
We also display global app alerts when users hit data thresholds, so that they can get more data before speeds slow.
The data usage widget before and after a customer exhausts the high-speed data in their plan.
Data usage alert notifications that are launched in app when a user hits predetermined high-speed data usage thresholds.
A data viz that tells the whole story
Scalability is baked into the new ‘donut’ viz so that customers can get a sense of what data types make up their entire usage.
With more add-on services in the roadmap, we can use the donut viz to easily value prop data and cost savings.
Different states of the total usage 'donut' visualization, depending on how many 'add-on' data services a customer has.
Customers can also toggle to the 'Daily' version of the viz to get a sense of their day to day usage
Guidance, when it's needed most
Users don't have to be tethered to the customer portal— the same alerts that show up in-app at data thresholds are sent straight to customers as text alerts, native app push alerts, or both.
The data usage widget before and after a customer exhausts the high-speed data in their plan.
Impact
A clear win for customer satisfaction
In customer complaints regarding data usage which surpassed our goal of seeing at least a 50% drop
75% drop in dev time
Post launch, we were able to show a new add-on service, Office Hours, in our total usage donut viz. We accomplished this in one sprint; 2 weeks.
Previously, value propping the data savings of a new add-on service took ~8 weeks of design and development time.
The total data usage viz, including 'Office Hours', a new data savings add-on service.
What comes next
A lot of my ideas never left Figma due to time, budget and buy-in constraints. The following are some of the feature enhancements that I added to our data usage experience backlog.
Smart internet plan suggestions
The data shows that of customers who purchase at a data-add on, most buy three or more per month to keep speeds high; at that point, we could help customers save money and heartache by recommending a higher GB monthly plan.
Speed-tier nomenclature
We tabled the work around plan speed naming to avoid scope-creep, but many of the remaining complaints about data usage center around hte slowness of 'standard' speed data.
