The situation

A chargeback occurs when a cardholder requests a refund from the merchant, often due to a return or suspected fraud. While large businesses manage chargebacks efficiently through dedicated teams and data exports,  small merchants depend on the user interface and chargeback reports to handle disputes, making the process more challenging for them.

The problem space

For small business merchants, disputing a chargeback is an important process for recovering revenue from contested transactions. However, merchants using the existing chargeback management experience were encountering problems even when they possessed the appropriate supporting evidence.

The Customer Success and Business teams had received complaints from merchants who did not understand why their chargeback disputes were not being completed correctly. Many of these customers operated small businesses with a single brick-and-mortar location.

To investigate these complaints, the teams conducted a customer survey. Their findings pointed to a critical weakness in the dispute submission experience: the interface relied on merchants to manually enter information the system needed to associate their evidence with the correct chargeback.

To submit a dispute, merchants had to open a separate form, manually enter the chargeback case ID and merchant ID, attach their supporting evidence, and submit the request.

This workflow introduced opportunities for clerical errors. An incorrectly entered identifier could cause evidence to be filed against the wrong record or otherwise processed incorrectly.

More concerning, a successful form submission did not necessarily indicate that the dispute had been filed correctly. Merchants could receive confirmation that their submission was successful without knowing whether the evidence had been associated with the intended chargeback.

The problem was not a lack of understanding of the required documentation. Merchants already had the evidence they needed. The interface placed the responsibility for maintaining data accuracy on the merchant instead of providing safeguards against preventable input errors.

The Design Challenge

How might we help merchants submit evidence directly against the correct chargeback, reduce manual data entry, and provide greater confidence that their disputes have been filed accurately?

Design strategy

Preventing Errors at the Source

The research revealed that merchants were not struggling to obtain the evidence needed to dispute a chargeback. Instead, the existing submission process introduced unnecessary opportunities for error.

Merchants had to manually enter their case ID and merchant ID into a separate form before attaching their evidence. An incorrect identifier could result in the submission being associated with the wrong record, even when the merchant had provided the appropriate documentation.

This led to a central design decision: Rather than making merchants more careful when entering identifiers, we could eliminate the need to enter them altogether.

The redesigned experience allowed merchants to initiate a dispute directly from an existing chargeback record. Because the dispute was initiated within the context of that record, the system automatically associated the submission with the appropriate chargeback.

This removed the manual identifier-entry steps and allowed merchants to focus on their primary task: uploading the supporting evidence.

The solution was intended to reduce preventable filing errors, simplify the submission workflow, and provide a more reliable path to disputing a chargeback.

Design strategy

• Simplified the UI: Merged multiple tables into a single expandable nested table for a cleaner hierarchy.
• Prioritized Data: Displayed critical data points at a glance, with detail panels for secondary information.
• Contextual Awareness: Designed a layered information model — from row to detail panel to modal — that aligned with user decision-making flow.
• Visual Clarity: Refined status indicators for better scanability and distinct visual roles (no more chip/button confusion).

Rework, redesign

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.

UX Analytics strategy

• Dispute rates: there’s increased engagement with the chargeback dispute flow
• Dispute error rates: User mistakes contributed by the UI should be reduced
• Duplicate disputes: Duplicate disputes should be reduced to zero
• Expanded detail views usage: increased usage of the new expanded detail views

Outcome

• Delivered a clear, actionable user experience that supports proactive chargeback management.
• Empower merchants to make informed decisions, reducing passive acceptance rates.
• Maintained developer efficiency by utilizing our design system.
• Gained stronger buy-in from stakeholders/product team with a design that balanced business goals and user needs.