Spectrum TV Bill Pay Portal
The UX research team at Spectrum performed a competitive analysis to compare the user experience across bill pay flows for Spectum TV (Charter) and other competitors. The goal was to understand the landscape and better understand where we could improve Spectrum's bill pay flow UX.
As a result, it was discovered the Spectrum bill pay flow was missing these important features:
-
A digital bill statement (only downloadable PDFs existed at this time)
-
Service interruption date
-
A chart view to display monthly charges over time
INTERACTIVE BILL
My Role
Right about the time that I started at Spectrum a new paper bill had been designed. The previous paper bill was poorly laid out and did not have a clear hierarchy. My first task was to design a digital version of the new bill.
Goal
To reduce customer service calls related to billing
Proposed Solution
Create an easy to use interactive bill that will allow customers to self serve, thus reduce calls to customer service
Major Business Requirement
Digital version of bill must have same data points as paper bill
New iBill Concept
After multiple iterations and discussions with our team the design above was arrived at. In order to keep the most important information above the fold, we settled on an accordion based UI that lists the services the customer subscribes to. The user can drill down within each service to get more information about associated fees.
The right hand column contains callouts for making a payment and comparing statements (which will be described below).
App and Mobile Website Designs
ISSUE: The bill pay portal does not display interruption date.
The solution I came up with an accordion based alert. When closed, the alert gives the user the amount due and service interruption date. When open, more relevant information is given to the user.
Service Interruption Date
I designed a series of alert notifications with varying degrees of urgency. These designs became part of the Kite Design System.
COMPARE STATEMENTS
compare statements
No easy way to see differences between monthly statements.
Our team decided that a "compare statement tool" would be helpful. I went to the drawing board and designed many variations of layouts. During this design phase I met frequently with a UX designer on the team to settle on the what information need to be comparable in the tool. Instead of having the user compare line to line between two statements (this could be come tedious) we decided to dynamically display the statement difference. See below.
chart view
Our team developer created html prototypes of 3, 6, and 12 month versions for usability testing. Users preferred the 6 month version because it had the right balance of information displayed.
The statement highlights module on the left is the same information a user would get in the Compare Statements functionality.
