HTML Bill
Role: UX/UI Designer
Company: Altice / Optimum
Context
Previously, Optimum customers could only view a static PDF of their monthly bill online, offering little clarity on charges and savings. The goal of this project was to design a fully digital, interactive bill that clearly explained charges, highlighted savings, and encouraged customers to take advantage of features such as AutoPay. The experience also needed to handle multiple billing scenarios while remaining responsive across desktop and mobile.
My Contribution
As the UX/UI Designer, I designed an experience that improved clarity, engagement, and adaptability:
- Clear Charge Breakdown: Transformed the bill from a static PDF into a dynamic, itemized view, making it easy for customers to understand exactly why they were being charged.
- Promotional Messaging for AutoPay: Created a promotional area encouraging AutoPay enrollment. Once enrolled, this section dynamically switched to a message showing that the user was not enrolled, including a personalized savings amount to drive conversion.
- Savings Highlight: Designed a dedicated section that displayed customer savings, reinforcing value and transparency.
- Scenario-Based Designs:
- Past Due Scenario: Added a prominent alert at the top of the page to notify customers and prompt immediate action.
- Bill Change Scenario: Introduced a “What’s Changed” section to summarize all updated line items, allowing customers to see differences at a glance.
- Responsive Design: Delivered a mobile version that matched the functionality and clarity of the desktop version, ensuring a seamless experience across devices.
Outcome
The new digital bill experience provided customers with clarity and control over their billing information, reduced confusion around charges, and increased engagement with features like AutoPay. The responsive design ensured consistent usability and accessibility, resulting in a more transparent and user-friendly billing process.