eoStar

Dispute Center -- Design Mentorship

A new Accounts Receivable module to help manage and speed collections activities as it related to invoice disputes

Expertise
Product Design Mentorship
Platforms
Windows
Deliverables
UI & UX Design
Dispute Center -- Design Mentorship

Context

Dispute Center was a new Accounts Receivable module to help manage and speed collections activities as it related to invoice disputes.  Receivables clerks would research the disputes and work with the customer to either rectify an issue if there was one or get the customer to actually pay the invoice that was actually correct.  The VP of Product, Sebastien Charroud had already done some initial user research working with several customers and came back with a set of wireframes to illustrate a solution for this module.We reviewed the mockups with Sebastien to have an understanding of the problem, the needs, and where he saw his solution.  Before even beginning to hit the Figma artboards, I told Gaby, task #1 is to understand the data and come up with questions.  So, we retrieved some sample data from a test system and began to just fill out each area of the screen.  This of course led to a ton of questions, especially given we were NOT part of the research phase.

  • Does the user need to quickly navigate to a customer record?
  • What about status indicators or better indicate past due or close to due vs just a date?How should disputes be sorted in the queue?
  • Should all grid columns allow for sorting?
  • What about filtering?  If I’m an assigned clerk, do I always need to just see a giant mixed list or shouldn’t I be able to filter to disputes assigned to me?
  • Is this all the detail needed to view as part of a dispute?  What information is most important and why?
  • Are there really multiple possible contacts for a dispute?  Isn’t it usually just one person from a retailer?

I’m sure you get the idea.  So Gaby and I kept going through this cycle, until we felt we fully understood the data and proposed solution from Sebastien.  On a number of occasions, we had to just talk directly to users to get these answers.  Again, we couldn’t really put a pretty coat of paint on Sebastien’s mockups without truly understanding the user need.

Initial Design

Armed with all the necessary requirements and related research, I set Gaby off to improve the existing design, minimal hints.  I wanted to see how she’d identify issues and come up with relevant UX solutions.  One such hint was, instead of splitting off individual Disputes in the same tab row, to split the screen into 2 sections, with the Queue at the top and individual Disputes below, especially since once a user filtered assignments to themselves, they’d only be looking at 5 - 10 assigned disputes at a time.  She took that idea and ran with it.  To make things easier, she just started low fidelity work in Balsamiq, the tool used by Sebastien to create the original mockups.  All in all, she was headed in the right direction, so I told her she could move the hi fidelity.

Then she presented me with version 1 of hi fidelity.  I suppose it was my fault for not telling her to NOT imitate the boring, outdated look and feel of eoStar.  So, after I saw this design, I asked her “Do you think this is good?”  “No Jim, I don’t like it at all.”  So then I set her on a different path visually starting with a little competitive analysis, i.e. look at other peoples’ stuff.

So she pulled tons of relevant examples from the web to help start establishing a style, which by the way, ended up as the updated style for eoStar.

Back to basics

I had Gaby go back to basic wireframing a really thinking about the content hierarchy.  When you’re looking at a highly detailed visual, it’s hard to take a step back to see the big picture since there are so many fine details.  Talk about cognitive overload.  So she took a step back and thought more deeply about the content areas, especially the hierarchy for the information of a Dispute itself.

Then I saw this and I bet you already know.  I had a smile on my face that went from ear to ear.  So I had her continue to flesh out this new direction providing support and feedback along the way.

Back to basics

Below is the final version of the design and let’s just say involved customers were floored.  Definitely a huge win and a highlight of my mentorship of Gaby.  I was very proud of her.