The situation
A chargeback occurs when cardholders request funds to be returned to them by the merchant. This can happen when they request a refund or identify fraudulent charges on their credit card account. The current chargeback management system works well for large businesses that have dedicated teams to export chargeback requests and import responses with evidence, as they do not rely on the user interface. However, small merchant businesses, such as mom-and-pop shops, rely on the chargeback report to address all of their chargebacks.
Through surveys, we discovered that users find the chargeback process cumbersome and confusing. As a result, merchants are missing their window to respond to chargebacks, leading to lost revenue.
The current state
The current process for small business merchants to approve or dispute a chargeback begins with a form where users can provide evidence and relevant information to assist in recovering funds. Two major grievances with this process are the inability for users to proactively track the progress of a chargeback dispute and the ease with which users can mistakenly dispute the wrong chargeback. Additionally, multiple disputes can inadvertently be submitted for the same chargeback.
Adopting a design from another team
Our North American counterpart began developing a reimagined experience. The designs aim to provide aggregated data points that offer users a comprehensive view of chargeback behavior on their accounts. Additionally, the process of responding to chargebacks has been enhanced with a more intuitive user flow. Instead of requiring users to memorize chargeback details for each form submission, action buttons are now available to enable seamless responses to chargebacks.
Although this was a step in the right direction, product managers were not particularly enthusiastic about adopting this experience. Additionally, design leadership recommended that my team and I explore ways to enhance the design. Some of the critiques included that the screen felt cluttered and the multiple tables appeared disjointed.
Rework, redesign
We initially experimented with rapid prototypes to explore potential modifications that would allow us to retain the existing designs, enabling developers to reuse the code base and conserve resources. However, we were still dissatisfied with the results. Our goal was to provide users with situational awareness and a clearer understanding of chargeback activity. Business stakeholders highlighted a key issue with chargeback management: merchants often accept chargebacks because it is the easiest option. However, accepting a chargeback results in funds being returned to the cardholder, negatively impacting the merchant’s revenue. Stakeholders wanted to see an experience that emphasized this point.
Inspiration for transformation
We began exploring design exemplars of effective chargeback dashboard layouts. We sought examples that featured organized structures, conveyed information clearly, and maintained situational awareness for users.
New layout
“In the first draft of our full redesign, we reduced the number of tables to one. This nested table featured primary rows that could expand to reveal a detailed panel cell. The primary row displayed the most critical data points for a chargeback, while secondary data points were located within the detail panel. If users required additional information, they could open a modal containing all the data points for that specific chargeback.
Final design
The final designs were enhanced by modifying the visual affordance of the status chips. In previous iterations, we consistently received feedback that the chips closely resembled buttons. Additionally, the visual hierarchy of the status components in the detail panels was refined to improve scanability.
