FIORE PIZZA
FIORE PIZZA
FIORE PIZZA
Overview
As Divvy's product grew, we were seeing more fraudsters going after Divvy and we needed a better way to prevent fraud and only authorize the charges customers intended to make. This project goes over how we built a payment authorization program.
The Problem
The business problem
Divvy was paying out a lot of charges that were reported as fraud.
A lot of these charges could have been prevented if we were able to identify the customer's identify. 3D Secure was a service we could use that let us do that before the charge went through.
Customer problem
Extra verification steps can add lots of friction to the online checkout experience. We had to balance stopping fraud and also making it easy to spend online. This was a tricky balance and one that would need lots of validation to get right.
Sketches
To generate a bunch of different ideas of how you could present payment verification to the user, I started sketching out a couple ideas. I did some the old fashion way and with the new FigJam app for the iPad.
.jpg)
.jpg)
Iteration
After exploring lots of different concepts, I narrowed in on a couple concepts.
The one below is one we all felt good about it. The idea behind it was we took what a completed transaction looked like. This would create familiarity with the user, but we slide up the prompt in order to help the user focus in on the task and complete it.
Usability tests
We got our concepts in front of a couple of users and got lots of great feedback. Here's what we found:
Insight #1
The payment information was hard to read behind an overlay.
It's one of those things that are so obvious after you get the feedback and you kick yourself for not catching it. Verifying payment information is extremely important information and shouldn't be displayed behind an overlay.
Insight #2
The layout of our emails were easier to read than the prompt in mobile.
During this test, we also tested a prompt from their email. All the users we talked to noted that the email was easier to understand as the information was grouped together and easier to read. Here is what the email looked like:
Insight #3
50% of our participants didn't catch the mobile push notification.
Another thing we noticed is that half the people didn't catch the mobile notification. They either had notifications turned off, or they were getting to many notifications with other apps that they didn't catch it. This was a big deal because if the user didn't click on the notification, then the whole payment verification process wouldn't start.
After testing, the product manager and I reviewed the insights and made a plan together of what we would include in our next release.
Version 2
Old Version
New Version
With all the feedback I switched the design up to this: Here is a summary of the changes we made:
1. Easier to read content- No more putting information behind an overlay. We brought the content front and center.
2- Easier to disgust content- We switched to using clear labels that helped the user understand and take in the information faster.
3- Improved button placement- Another thing that got brought up in testing is that the side-by-side buttons were easier to use than the staked buttons.
4- Improvements to increase the response rate
One thing we discussed was how do we account for people who miss the push notification. As a team we talked about solving this problem by sliding up the prompt the first time they opened their app regardless of they clicked on the notification or not.
The usability feedback helped us make better decisions on how to make online payment easy while at balancing how to make online payments more secure. Here is how the whole checkout experience looks with 3D Secure.
Beta
We decided that a big indicator of success was a high response rate. If people weren't responding then we knew we had to make adjustments. So we open up a beta with some of our employees and gave them money to go and make a purchase. During this beta, we measured results to get a good idea of how things were performing.
Response rate
75%
Outcomes
After our beta, we felt pretty good about the 75% response rate and decided to release it more generally and track the results. Here is what we saw:
Response rate
95%
This was a huge success for our team as this response rate was higher than the industry standard.
Chargebacks
We also looked at how we were affecting dispute chargebacks. The business outcome we wanted was to reduce these. We were seeing things fall and with the dispute team we're seeing a lot fewer requests come in.
Version 2
After seeing success, we decided to go back and look at the flow and see how we could improve the experience if someone selected that they didn't recognize the payment. In our first version, if the user didn't recognize the charge, we would just recommend they freeze their card. But as we looked at our outcomes, we realized there were opportunities to improve things.
Outcomes
Rebuild customer trust to quickly re-enable spend when fraud occurs
One of our main outcomes was to rebuild trust with customers and re-enable spending as quickly as possible. So our team met and we did some brainstorming. What we talked about is how we could create a virtual card for them and then remind them they could add it to their apple pay or google pay wallet.
I think this flow set us up as a differentiator in the market.
Most credit card companies stopped after someone replaced their card. But through great collaboration between Product, Design, and Developers, we were able to come up with a great solution.