UX Redesign
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1464 193" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 C 0 0 142.331 16.847 214.63 23.123 C 286.93 29.388 389.726 40.168 441.691 35.466 C 493.656 30.764 558.612 33.798 597.013 44.776 C 635.425 55.743 741.32 60.403 768.436 54.127 C 795.553 47.862 892.549 43.129 969.374 46.267 C 1046.187 49.405 1102.595 75.384 1179.409 56.9 C 1256.222 38.417 1423.342 21.163 1464 22.727 L 1464 193 L 0 193 Z" fill="rgb(255, 255, 255)" height="193px" id="TzyXF_8ah" width="1464px"/></svg>)
A UX redesign initiative focused on improving the bills and payments experience by simplifying information architecture, reducing cognitive overload, and enabling faster payment completion for users.
Contribution
Understanding the Challenge
The existing billing experience presented users with multiple pieces of information, fragmented tools, and unclear payment priorities — making it difficult to complete payment-related tasks efficiently.
The opportunity was to redesign the experience with a clearer structure, simplified interactions, and stronger visual prioritization to improve usability and task completion.
High payment drop-off potential
Fragmented billing experience
Increased support dependency
Difficulty prioritizing bills
Information overload
Unclear payment actions
Weak visual hierarchy
Scattered billing tools
Multi-account complexity
Goals & UX Strategy
Improve payment task completion
Simplify information hierarchy
Reduce cognitive load
Improve multi-account management
Increase payment confidence
The redesign approach focused on simplifying the billing and payment experience through better prioritization, clearer information hierarchy, and more intuitive task flows.
Key payment actions were brought to the forefront, billing information was grouped more meaningfully, and supporting tools such as reports, downloads, and payment history were organized to reduce friction and improve task completion
Simple
Guided
Prioritized
Task-focused
Accessible
My Contribution
Reimagined the billing experience to improve usability.
Reorganized content to reduce confusion.
Simplified payment journeys for faster action.
Improved readability and payment prioritization.
UX Redesign Approach
The redesigned experience focused on prioritizing payment-related actions while simplifying navigation and content grouping. Information was structured to help users understand billing details faster and take action with minimal friction.
Key Design Decisions
Outstanding bills and payment summaries were surfaced prominently to help users take action faster.
Billing data was grouped into clearer sections for easier scanning and decision-making.
Selectable billing states improved clarity when paying across multiple accounts.
Reports, downloads, and settings were grouped for better discoverability, Payment history visibility.
The redesigned billing experience
The final experience introduced clearer navigation, stronger visual prioritization, and simplified workflows to help users complete billing-related tasks more efficiently.
Results & Impacts
The redesign improved clarity, simplified decision-making, and reduced friction throughout the billing journey. By introducing stronger hierarchy and guided interactions, users could complete payment tasks with greater confidence and less cognitive effort.
Key Outcomes
Reflection
This project reinforced how thoughtful prioritization and clear information hierarchy can significantly improve task completion in high-intent user journeys such as billing and payments.
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 1457 90" xmlns="http://www.w3.org/2000/svg"><path d="M 1457 0 C 1457 0 1315.35 7.856 1243.396 10.783 C 1171.442 13.704 1069.138 18.731 1017.421 16.539 C 965.705 14.346 901.059 15.761 862.842 20.88 C 824.613 25.994 719.225 28.167 692.238 25.241 C 665.251 22.319 568.719 20.112 492.261 21.575 C 415.815 23.038 359.677 35.153 283.231 26.534 C 206.785 17.914 40.463 9.869 0 10.598 L 0 90 L 1457 90 Z" fill="rgb(255, 255, 255)" height="90px" id="ECRI63_AM" transform="rotate(180 728.5 45)" width="1457px"/></svg>)