Co-Badged Cards
PayByPhone
Focus
Strategy, UX & Interaction Design, User Research
Deliverables
Research Findings Summary Deck
High-Fidelity Mockups for IOS, Android and Web app
An EU regulation went into effect, requiring merchants to provide consumers holding co-badged cards the option to select which brand they want use to process their transaction.
Overview
Co-badged cards are payment cards that integrate two or more brands together. Many of our consumers in France hold co-badged cards like “Carte Bancaire (CB) + Visa” or “Carte Bancaire (CB) + MasterCard”.
Most individuals are not familiar with how co-badged cards work. Therefore, the design needs to be intuitive and informative.
We also wanted to design it so consumers would pick Carte Bancaire (CB) over Visa and MasterCard. Doing this will cost PayByPhone less in fees as well as generate an easier security challenge for our consumers, resulting in more successful transactions.
The Challenge
How might we design an intuitive and informative interface that will influence consumers to pick the brand CB over Visa and MasterCard?
Understanding our consumers
With the regulation being so new, would consumers even understand what was going on? I needed to make sure I understood their mental models around co-badged cards so I created a survey through Survey Monkey to validate my research.
I discovered that majority were unfamiliar with co-badged cards and how they worked. When given the choice between CB or Visa/MC there wasn’t a clear winner, but those that picked Visa, generally did so out of habit and familiarity.
I created multiple mockups based on the results of my discovery research.
Some designs were focused on being simple and fast, others on being more informative. I also tried different visual ways to represent a co-badged card.
In the end, there were 2 standout iterations.
Exploring all options
#1 - Shorter Intuitive Option:
PROS
very intuitive & fast
option to switch badge is at the top level
CONS
not informative about why you can switch badges there
easier for them to switch to Visa/Mastercard
#2 - Longer Informative Option:
PROS
UI provides more context on what is happening
option to switch badge is more buried (consumers less likely to switch to Visa/Mastercard)
CONS
involves a added click and step
Usability testing with our consumers
Taking these 2 iterations, I conducted a usability test on Usertesting.com with 16 French participants, all with co-badged cards.
The test was used to validate 3 things:
Was it easy to use?
Does adding a “recommended” label influence their choice?
Which flow were consumers least likely to switch their badge from CB to Visa/MC?
Our test results found that both versions scored above industry standards for being easy and intuitive.
The “recommended” text, did in fact, help influence their choice.
#2 - Longer Informative iteration was the flow where consumers were least likely to switch their badge.
View the full study here.
Shorter is not always better
Since switching the card badge is not a primary function, it made most sense for it to be nestled as a second layer of content. This not only made consumers less likely to switch the card badge but it also prevented users from clicking it by accident.
The new payment flow was approved by production and later designed for all PayByPhones platforms; iOS, Android and web app.
User Testing is Key!
Thanks to testing, I discovered that one iteration had an unnecessary extra step that was tripping up our consumers.
Data based design is the best way to help your business catch any odd areas before its released to the public. It is not always 100% accurate, but it can get you pretty darn close!