Recurring Invoices SaaS App

Challenge

For our larger clients, they struggle with managing recurring invoices and payment plans that have issues, such as an expired credit card as their method of payment on file, or a plan balance that doesn’t equal their total balance due. There are many possible issues, and no easy way to filter and work them in the current system.

Role: UX Designer

Tools: Pen & Paper, Excel, Sketch, Axure, TypeForm, MailChimp

Discovery

Originally the Product Manager requested that I design a new report that would filter a client’s list of invoices by those that had a specific issue, allowing the user to locate invoices with a particular problem, and work them accordingly.

We whiteboarded some ideas that led to the following options.

Either of these options fit the challenge that I was given by the PM, and it solved the users problem. However- the more that I thought about the users flow of work, it became clear to me that we would be adding a second workspace for them. So I asked myself- why couldn’t they do all their work in one location?

That led to the following design, where I took our existing ‘Recurring Invoices’ page (which was just a table with search capabilities) and I transformed it into a work center where they can view the number of problems at hand, in one location.

I played with the following tabbed view first, partly because we already had a standard tab in our design system and I’m strongly encouraged by our development team to try to use standards first before inventing new interactions.

Testing - Voice of Customer Calls (VOC)

During initial VOCs it became clear this design didn’t meet user needs because of the following findings:

- Users wanted the ability to apply multiple filters at once.
- Users felt it cumbersome to select different tabs
- Users were confused if the search criteria they entered would apply to all tabs, or just the one they were on when they hit ’SEARCH’.

After testing, I went back to the drawing board, and landed on the following design. This option not only provided the number of invoices in each category, but when clicked a filter would narrow the results to only show invoices having that specific issue. Not only does this new design allow users to apply multiple filters at once- but it more seamlessly integrated with their current listing. Instead of having to select different tabs they can consistently work from the same listing and view specific problems as they arise.

Testing - Unmoderated Remote User Test

I developed a user test from scratch using Axure and TypeForm. I created an iframe that linked to my typeform/questions on the left and an iframe with my new design on the right.

Overall, users loved the value that this design added to their workflow, and enjoyed how the design integrated into a page they already used.

Takeaways

This design was a big hit with our users and it wouldn’t have been possible if I hadn’t had the courage to try something new and outside the original specifications outlined by the PM. He and I have a great working relationship, and I’ve built a great deal of trust with him, so he was very open to me testing this model. And at the end of the day, it’s very important that we, as UX Designers, advocate for the user. I was able to do so confidently because I had the user testing results to prove my theories, and professionally in a way that maintained positive relationships with my PM and the developers.