top of page
Roles
- Product Designer
- Visual Designer
- UX Researcher
Project Deliverables
- Wireframes
- Visual Designs
- Design System
Tools
- Figma
- Zeplin
Intro:
Our design team saved billions in revenue for Visa card
OpCerts a quarterly filing of thousands of reports from banks to Visa was broken.
Our team set out to fix the process.
In the end, our efforts saved Visa $4 Billion dollars in revenue per year.
What follows is the story of how we met this goal while making user's lives easier.
Screenshots:
At a glance: The finished product
Below is the dashboard landing page our team built to meet the needs for OpCerts.
This design will be covered in greater detail later on in this case study.
Image: Visa OpCerts landing page
Form submission screen
Here the user can submit their OpCerts data forms to Visa.
Image: Form submission screen
Generate reports for Business team
This report is autogenerated for Business users in the OpCerts process.
Instead of taking Data Entry Technicians days to gather this data,
our system could generate it in seconds.
Image: Form submission screen
Image: Generate reports screen
Overview:
So what is OpCerts?
OpCerts is a set of forms filed every quarter to Visa Card by thousands of banks around the world.
Each bank branch must file one, ( 1 ), OpCerts form for each Visa credit card product they issue to customers.
Each bank submits dozens of these forms to Visa each quarter.
Visa uses these filled out forms for two purposes:
1. Calculate Revenue: How much does each bank owe Visa in fees?
2. Determine how many new Visa cards to issue banks in the next quarter.
How are OpCerts forms organized?
Visa has over a hundred OpCerts credit card product forms that banks can send to them.
These forms live under six ( 6 ) credit card family names including:
1. Credit 4. Acquiring
2. Debit 5. Other
3. Prepaid 6. Associates
Image: Structure of OpCerts forms
But there were problems ...
Problem 1: Many techs not sure how to submit OpCerts forms to Visa
Technicians used many internally designed forms to submit data that varied from one bank to the next.
There was no single source of truth. It became really confusing!
Image: Four different reporting forms. There were many others too.
Problem 2: Lots of errors - Hundreds of forms were rejected by Visa
The forms were so confusing that 35% of bank branches had their forms rejected.
Visa didn't tell Data Entry Technicians at banks how to fix them.
Many banks gave up on filing the forms altogether.
What's at stake?
If Visa didn't solve these filing problems,
the company would lose 4 Billion Dollars per year in fees paid from banks.
There had to be a better way for banks to submit this data to Visa!
Our team set out to find one.
Objectives and Key Results
Our interviews helped us determine OKRs for two user groups: Business and Data Entry Technicians.
Business OKRs
-
Let Business users view OpCerts reports easily.
-
Display information better.
Data Entry Technician OKRs
-
Make the OpCerts system easier to use.
-
Show what step I'm on and what's left to do.
-
Improve acceptance rates for our submitted forms to Visa
-
Help us create quarterly reports for Business team.
-
Give us Online Help.
Personas
Based on interviews, I built out personas for two types of users, Data Entry Techs and Business.
Our stakeholders could review these archetypes and ask questions like:
"Is this how Martin would create quarterly reports?"
The data entry technician persona
UI Design
Brainstorming
Thanks to interviews and research, our pod developed deep empathy for Data Entry Technicians on the front lines as well as Business users.
Image: Whiteboarding sessions
Along with white-boarding sessions, we scoured UX articles, and code repositories, to find interactions that could solve our user's pain points.
Design System
Below is an excerpt from the design system our team built for the app.
Image: A sample screen from our design system.
What step am I on?
We designed a progress bar, to show technicians their location in the data entry flow.
Below this progress bar, the system would display the relevant screen for each given step.
Step 5 - "Upload Metrics," is the data entry step for technicians.
Image: Progress Bar
Visualization:
How much data have I entered for a product family?
Data Entry Techs had to understand which credit card families they entered data for,
and what was left to do.
We looked at many different ways to represent, "Completeness," such as gauges, charts and graphs.
Image: Whiteboarding sessions
We believed the donut chart would be the most effective graphic for showing:
- How much data has been entered for a credit card product family and,
- What was left to do.
We tested this concept along with others to measure user understanding.
In the end, 82% of test subjects preferred the donut chart over other graphics.
Putting in all together: Completed mockups
Here's the landing page for the Dashboard.
Image: Step 5 - Enter Data
Dashboard features
Image: Dashboard Callouts
Flow:
How to enter OpCerts form data
Drilling down to forms
In this example, we're on step 5 of the process - The data entry step.
To access forms, users click on the Donut Chart for a given credit card family.
In this example, let's click on, "Prepaid."
Image: Click on Prepaid Donut
Mega-menu with all forms in that family
After clicking on, the "Prepaid," donut, a Mega-Menu appears.
The menu shows links to all data entry forms for the Prepaid family.
To the left of each form name in the Mega-Menu, is a status icon, (See below).
In this case, the status icon shows, there are errors for the data entry form, "Prepaid Infinite Debit."
Click on this link and the form for Prepaid Infinite Debit will appear.
Image: Click on Prepaid
Data entry form
We're now on the form.
Red section shows links to each data entry error on the form.
User clicks on the first link.
As a result, user goes to a field in pink - the first error in the form.
Image: Error on Data Entry Form
Fixing errors on form with context sensitive Help
Click on this pink field and a "Help," popup appears.
This popup explains how to fix the error.
User updates the value in the field based on instructions from the Help popup.
Image: Context Sensitive Help
User repeats this step till all errors on their forms are corrected.
Finishing up
Estimated fees for quarter
Once the technician has corrected all errors in their forms,
they see a screen that summarizes the fees their bank is expected to pay to Visa.
User can either:
- Upload all of their OpCerts forms data, ("Certify Now")
- Create a report for Business users.
Image: Submission Screen
User results and findings
Progress bar
Favorable Reviews: 85%
In general, users found the progress bar vastly improved their idea of where they
were in the data entry system.
Donut charts
Favorable Reviews: 94%
Users thought the new organization of information, made more sense,
than the old homegrown spreadsheet forms.
Mega-Menu
Favorable Reviews: 88%
Subjects found the Mega-Menu easy to understand and navigate.
Forms + Context sensitive Help
Favorable Reviews: 94%
All users liked the new error checking feature and context sensitive help.
OKRs addressed
At the end of our project, we were able to provide the following benefits to users in the OpCerts process:
Business user needs met:
-
Modernized look and feel for OpCerts.
-
View Reports
-
Business users could now view summary reports.
-
Data entry technician needs met:
-
Wayfinding
-
The progress bar shows data entry technicians where they're going and where they've been.
-
- Donut Charts + access to forms made data entry easier.
-
Improved debugging with pink fields and Inline Help for forms.
-
Higher Successful Submission Rates to Visa.
-
Acceptance rates rose from 65% to 97% for forms.
-
The bottom line
Not only did we enable Visa to keep its $4 Billion line of revenue,
We made the system much easier for Data Entry Technicians and Business to use.
Thank You
Copyright © 2024 - Joe Wahrhaftig, All rights reserved
bottom of page