top of page
Roles
- Product Designer
- Visual Designer
- UX Researcher
Project Deliverables
- Wireframes
- Visual Designs
- Design System
Tools
- Figma
- Zeplin
The Takeaway
Our design team saved $4 billion 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.
This 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 is a shot of the last step of the process, where the user can submit their OpCerts data forms to Visa.
Image: Form submission screen
Generate reports for Business team
Another broken part of OpCerts was viewing quarterly reports. Previously they were cribbed together by technicians taking days to compile in an ugly Excel spreadsheet.
We changed the process, so OpCerts could now generate the same information
not in days, but 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.
Visa uses these filled out forms to deterimine: How much does each bank owe Visa in fees.
What's the problem?
Problem 1: Many techs not sure how to submit OpCerts forms to Visa
Technicians used 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.
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 key 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 forms easier to file.
-
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.
UI Design
Design System
Below is an excerpt from the design system our team built for the app.
Image: A sample screen from our design system.
The Completed Mockup: Dashboard features
Image: Dashboard Callouts
Mega-menu with all forms in that family
After clicking on, the "donut," a Mega-Menu appears.
In this example, 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 data entry form for Prepaid Infinite Debit will appear.
Image: Click on Prepaid
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.
Final step: Form submission screen
Once all the errors have been fixed, user sees the screen below to submit their OpCerts data to Visa.
Image: Form submission screen
User feedback
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.
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 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