A product designer that advocates for inclusive design and champion advocate for the user experiences.
MCM.png

Capital One: Merchant Response Workflow

Capital One: Merchant Response Workflow

Frame 2.1.png

Merchant Workflows

A case management system in Empath, an agent-facing web application tool. I was brought on in this project to improve the merchant response workflow so it was easier to use for our agents.

Team

UX Visual Designer: Anna Yoong

Lead UX Designer: Liz Rimerez

Background


Capital One presents Empath, an all-in-one agent-facing tool used by agents in call centers to improve the customer’s experience. There are no existing feature to simplify this so it was a change to remove clutter and establish a user-friendly design.

What’s a workflow?
A step-by-step process where an agent uses to help resolve a specific customer issue.

Agent’s User Journey
An agent disputes a case on a customer who is not at fault for charges that were placed in their bank account.

 

Problems


01 Hard to navigate workflow to resolve issue.

02 Must pull up multiple screens to service a simple issue.

03 Vital information is buried in the app.

 
 

The Old

 

In the last 20 years, Chordiant runs the customer dispute process. We needed to find a solution that would remove clutter, surface relevant data, and a way to respond disputes in one seamless workflow.

What’s Chordiant? An old processing web application that agents use to send/receive responses from merchants and customers.

 
 
Screen Shot 2019-10-08 at 1.14.58 PM.png
 
 
 

 

The Workshop

This was a 3-day workshop to discover the obstacles, pain points and needs of the agent that we are servicing. The ux designer facilitated a design sprint in collaboration with the agents, PM, developers, engineers, and stakeholders. We worked through the main problems they were serving and came up with possible solutions. We were mindful about the dependencies and the MVP scope.

Here’s what we came up with for MVP:

01 Design a workflow with capabilities to handle multiple data points.

02 Surface data information in one screen.

Screen Shot 2020-12-23 at 9.51.13 AM.png
 

 

Wireframes

After coming out from a focused sprint, we consulted numerous agents, designers, the PM, and engineers. With that, I developed the hierarchy layouts for the new workflow and creating new components that fit the agent’s needs and consistent with our design system.

The wireframes explorations are based on the pattern guidelines. Grids were important in our pattern library because uses for containers are important to track and separate information and it’s easier for tech teams to manage.

 

 

Final Designs

 
 

Iterations and Development

The merchant response tile is a very important part of the whole workflow. As mentioned above, the design goal is to streamline the process. First, I input the necessary information with the amount in bold and the reason for response and relevant data on the side for scan-ability. Then, went into several iterations:

 
 
 
 

Reflection

 

We were fortunate to receive feedback from high level agents who are experts in their field. I always come out understanding more of a small part of what they do in order to service their customers. I’m delighted at the outcome where we were able to reduce the amount of noise and agents were extremely excited to utilize these feature to the full extent. At the moment, there are numerous unresolved edge as we continue solving these complex and exhausting process.