Spectrum iBill
Web • Android • iOS
Project Overview
The goal of this project was to reduce customer service calls related to billing. It was widely recognized that this was partly due to there not being a digital version of the billing statement online. A user's only option was to download a PDF. As a result of the design process, I also created a bill comparison tool and a 6 month chart view that allows users to analyze and compare their expenses more effectively.
My Contributions
I was responsible for the UI for website and apps and a major portion of the UX. I collaborated with our team lead, a UX designer, a UX researcher, a prototyper and UX copywriter. I presented to the product owner, dev team, and VP of Digital Products.
Foundational Research
To better understand the pain points customers were having with the billing experience, our team spent the day at a call center to listen to managers and customer representatives describe the type of calls they receive related to billing issues.
Many of the reasons customers called for support were due to not having an easy way to find out what changed on their bill. Below is an example bill with data points that needed to be in the new interactive bill.
High Fidelity Wireframing
Utilizing the Spectrum's Kite UI Kit I developed multiple layout ideas (shown below). During a team brainstorm we established that an accordion based layout would be effective in displaying a customer's list of services with the ability to drill down to specifics. I also used tab, button, and alert components from the UI kit.
Although needing eventual refinement, one design direction (1 column stacked) stood out among the rest because it was evident it could also work at mobile web breakpoints and mobile app screen sizes.
Final UI
After many iterations and testing, the final designs were arrived at. Designs for each platform, desktop website, mobile website, and mobile app (Android and iOS), varied slightly due to established UI patterns.
The desktop version had the real estate for Spectrum news at the bottom and a right column which prominently displayed an "Amount Due" module, a CTA for Compare Statements functionality, and an area for marketing.
