Overview

I participated in a 24-hour hackathon with a team of UX Designers, Data Scientists, Web Developers and a Digital Marketer. Mastercard, the financial services corporation, hosted a challenge for seven teams to devise a digital solution that increases the security of online transactions. We created Mastercard Choice, a security feature available for Mastercard users prior to completing a digital transaction. It uses biometric authentication that can be added onto Mastercard's existing Click to Pay feature.

Role

UX Designer

Scope

Hackathon

Timeline

24-Hours

Result
image-44
Tools
Icon1

Discover

Background

As digital online transactions increase, security becomes a top priority for all organizations. The global digital payments industry is expected to be valued at $6.6 trillion in 2021 [1]. However, with an increase in identity theft reports, most being credit card fraud [2], this trend will be on the rise in the coming years.

What does this mean?

As a cross-functional team, we were tasked with addressing these fraudulent activities involving online transactions. To begin our research into a solution, we were presented with this prompt.

"How might we increase the security of online digital transactions through innovative digital solutions, for the widest range of users?"

Secondary Research

We looked at Mastercard's existing online payment and transaction methods and initially found Masterpass, a service that stored all payment information in one secure location. However, this transitioned to Click-to-Pay in mid-2020, a single payment system created by Mastercard, VISA, AMEX and Discover.

Consumers register their credit cards with their card network's website. Upon paying for a transaction, they tap the Click to Pay button, enter their email address, and a security verification code is sent to their mobile device. The consumer can then select which card they want to use [3].

CTP-2

Define

The Key Insight

With some further research, we found that consumers preferred biometrics for its increased security measures, as it's more secure, faster and easier than traditional payment methods [4]. However, their bank and device were not using biometrics, nor were they familiar on how to use it; this was our key insight to focus on.

“Consumers also want the choice to use multiple types of biometric payments, which might be depending on where and when a transaction will take place"

What are biometrics?

Biometrics involves the use of fingerprintsretina scans, voice and facial recognition. It's seen as the most effective authentication method currently available, as it's difficult to copy someone's physical or vocal features [5].

30b
93
92

Proto-Persona

Combining all of our research and biometric findings, we created a proto-persona who represented an assumption of our target user. This person would like to shop online without worry, since experiencing credit card fraud has made him more cautious.

MC-Persona-PNGx3

Design

Drawing Inspiration

To design a solution that involves biometrics, we drew inspiration from current digital payment/security services on how they work, such as Apple Pay and Google Pay. We also found Saffe, a facial recognition provider based on Artificial Intelligence that focuses on secure, authenticated payments.

image-30
image-32
image-31

Mastercard Choice

Mastercard users can register their credit card on the MC website to use the Click to Pay service, but it's still liable to breaches. By integrating biometrics with this existing service, we created Mastercard Choice, which provides users an option to choose between facial recognition, haptics (touch) and/or voice.

This "choice" allowed us to consider the widest range of users.

MC-Choice

Sketches

To use Mastercard Choice, users set up biometric authentication after enabling Click to Pay, which will be used before confirming a transaction. We sketched the onboarding process (where the user enables biometrics) and the usage process in an e-commerce app (how it will work when making a digital transaction).

Onboarding-1
Usage1

Wireframes

Using Figma, we designed and prototyped both sketches into hi-fidelity wireframes to visualize how these would work. For our target user, they can now shop online without worry using this biometric authentication feature, as it allows for safer, more secure digital transactions.

Deliver

Presenting our Solution

After the UX Designers finished the design, we collaborated with the Web Developers, who coded the prototype in Github for a live presentation. The Data Scientists conducted research on cryptocurrency and its effect on biometrics, and the Digital Marketer created a marketing campaign proposal. This was completed in 24-hours to Mastercard's team of HR & technology leaders, which resulted in a first place finish.

What did I learn?

By following the double diamond of DiscoverDefineDesign and Deliver in a hackathon setting, I quickly learned a lot from working with other disciplines. If we had more time, we would have tried to present another biometric feature. There were a few key learnings that I gained from this experience.

1. Make quick decisions: I learned that quick and efficient decisions must be made, since a hackathon is a relatively short event. A solution that solves every frustration is not feasible given the time constraint.

2. Communicate often: I learned to constantly keep communication between all team members open. Designers must be on the same page with their research, ideation and designs as other disciplines in order to be successful.

3. It won't be perfect: I learned that as a designer, we tend to strive for perfection, but getting it done is more important. We should not spend precious time trying to perfect every detail.

Copyright1-2
Email1