© 2018, Zach Evetts
© 2018, Zach Evetts
In Business Center, users are able to access their accounts' invoices in a comprehensive ‘Billing’ portal. There, they can analyze various charges associated with their invoice, see variances from month to month, create ‘favorites’ list and bookmarks, and much more.
But, there is a pain point for users when trying to access more information in relation to ‘Charge Details’, a set of subpages that breaks down an invoices' current charges into multiple categories. When trying to drill down further from these pages, the data can take quite a while to load due to the shear size of some of these reports, in some cases more than 6 seconds if it loads at all. To make matters slightly worse, the iframed tables that display the detailed charges are not an accessible UI for all users. Although sighted users have no trouble traversing the table for data, it is a difficult experience for screen readers and keyboard users.
Our team was tasked with creating a new, accessible way of displaying detailed charges, in junction with our development team implementing a new backend system that would increase load performance. Our UX research team conducted user interviews to gain insights into what was important to the users in performing their invoice auditing tasks. Customization and sortable data were two of the biggest takeaways from these interviews.
Utilizing feedback from initial prototype tests and interviews, the new charge details framework consists of a sortable, configurable table with overall account information at the top of the page.
Vetted for e508 and CATO compliance, the new framework is much more user friendly for assisted technology users compared to the old iframe tables. This was accomplished by seperating account, group and subaccount totals into their own tables that can be toggled by tabs at the top of the page. Paired with a faster backend system that now loads the data in well under 2 seconds, the new eBill framework allows our users to perform their tasks more efficiently.