The Problem

The current state of the outdated invoicing system forced users to subscribe to an invoice email subscription. This poor experience gave the users little to no control on how to pay their invoices. The user would have to call in to pay or dispute an invoice which overwhelmed the invoicing call center.

The Goal

Design a mobile-first responsive invoicing portal that is efficient and easy to use. It must also allow users to dispute, track and manage invoices without having to call in. The system must adhere to brand guidelines and meet all business requirements.i

Future-State Mapping

To improve the experience a future state site flow needed to be created in order to understand where pain-points could be alleviated. Also, the site flow could outline areas where expanded functionality and features could be made to enhance the experience for the user both internally and externally.

i

i

Wireframing (low to high fidelity mockups)

During the design phase of this invoicing portal there were hundreds of wireframes made. The interface needed to be responsive across three different viewports (mobile, tablet, and desktop). An entire experience was needed to be fully made for every viewport. During each iteration a prototype was made from the wireframes. These prototypes were used for both user interviewing and testing.

i

i

i

Testing

Interviewing both internal business and external users was key to understand where the old invoicing interface was lacking. Through iterative design sprints and SUS interviews many issues were made known. Simply put, the old solution made paying invoices difficult. External (customer) users had almost no control when all they wanted to do was gladly pay an invoice. In the database side for internal (employee) users being able to track payments was not simple. Actions for improving the database handling and customer detail information were simplified. Underlying code was tremendously outdated and was overhauled as well.

During this project I was in charge of leading the communication and consultation between design and development. Every detail of every interaction was well documented. The specifications of the designs needed to be very clear for the development resources being used in South America.

All works are copyrighted ©2025 to Chris Meyers and cannot be redistributed or used without permission. Please respect the work of others.