MC mockups.png
mc_symbol_opt_73_3x.png

Choice

Making Mastercard customers online transactions more secure by using biometrics. 

Project Overview

Challenge

In May 2021, I participated in a hackathon hosted by BrainStation and Mastercard.  We had 24 hours to create a solution and worked together with teams in different fields such as data science, digital marketing, and web development.  The ask was to design a solution where online transactions are more secure.

Solution

My team created an innovative solution to make online transactions more secure. Mastercard Choice was introduced as part of the Mastercard online platform, allowing users to use facial recognition to make payments online. 

PROJECT. Remote Hackathon May 2021

TEAM. 3 UX Designers, 3 Web Developers, 2 Data Scientists, 1 Digital Marketer 


MY ROLE. UX/UI Designer

LENGTH. 24 Hours

TOOLS. Figma and Invision

RESULT. 1st Place Winner 

Hackathon Briefing 

With the increase of digital online transactions, security has become a top priority for all organizations.

 

The global digital payments industry is expected to hit $6.6 trillion value in 2021. However, with an increase in identity theft reports, most being credit card fraud, we expect this trend to be on the rise in the coming years. 
 

Mastercard asked us:

How might we increase the security of online transactions through innovative digital solutions?

 

Secondary Research

As we were researching competitors in the industry, one of the products from Mastercard caught our attention right away, Mastercard's existing Click to Pay system.  “Your Mastercard details are stored in Click to Pay, allowing you to shop without having to grab for your card or fill in payment information.”  But transactions through Click to Pay were still vulnerable to security breaches.

 

Keeping Click to Pay in mind, we examined the new trends developing in the security world.  

Change in digital payments has been accelerated by the impact of COVID-19.  Some driving factors include: consumers’ embracing contactless payment methods (now more so with a focus on hygiene and wanting touchless options) and ecommerce customers demanding quicker payment solutions.

We found customers were abandoning online purchases due to issues such as service errors or not having their card present to make the payment.  So we searched for an alternative to the usual secure checkout systems. 

recognition.png
voice-record.png
fingerprint.png

Biometric authentication, such as fingerprint scanning, retina scanning, speaker recognition and facial recognition, are regarded as the most effective standalone authentication method currently available because of how difficult it is to actually mimic or copy someone’s biological features.

Beyond ensuring that personal data is secure, it is of great importance that security systems are reliable and easy to use for as wide a cross-section of the population as possible.

 

 

 

Research Sources: GPayments Research, Visa Navigate

Insight from Research

Face id technology already exists but is not yet being used for online transactions. 

Proto Persona 

Due to the lack of time we forgoed creating a real persona and conducting interviews but rather created a proto persona. Our proto persona is a reflection of who we understand our ideal user to be. 

christian-buehner-DItYlc26zVI-unsplash_e

Joel Jones

Joel is a professor teaching IT Security.  He wants to teach the next generation of students the importance of security in the digital world.  A lover of technology, Joel is often an early adopter especially when it comes to security related products. He's an existing Mastercard Click to Pay user. 

Age: 29 years old

Occupation: Educator

Goals: to online shop using a credit card

Pain Points: has experienced credit card fraud in the past

Inspiration 

To understand how others in the online transaction field were using (or not using) biometrics we looked at Apple Pay, Google Pay, Saffe (facial recognition technology provider), and examined the current Mastercard app.

Apple_Pay-Logo.wine.png
saffe-color@4x-300x177.png
g pay 2.jpeg

How Does it all Come Together?

There is a huge opportunity to stimulate the development of new systems with inclusivity, ease of use, and high performance, which has the potential to make daily tasks much easier for a large number of people. Biometrics has the potential to improve the lives of people with disabilities.

Currently, users can use Mastercard's Click to Pay but the transaction is still liable to breaches.  That’s where our solution Mastercard Choice comes in. 

After enrolling in Click to Pay, the user goes through the onboarding of Mastercard Choice to set up a 2 step biometric authentication. The user can then go to the ecommerce store of their choice and use the Mastercard Choice feature. 
 

Sketching Our Idea

In order to demonstrate our solution, we needed to show the user's onboarding journey as well as an use case scenario.

Onboarding Journey
Screen Shot 2021-05-30 at 1.10.38 PM.png
Use Case - On an ecommerce app
Screen Shot 2021-05-30 at 1.10.50 PM.png

Final High Fidelity Prototype

Onboarding iPhone X Side View Mockup.png
Click below for the Onboarding prototype.
ECom iPhone X Side View Mockup.png
Click below for the Use Case prototype.

Bringing more benefit to the user.

As another benefit to users, we envision the voice design for Mastercard Choice being used to checkout or purchase items on virtual assistant AI technology devices such as Amazon Alexa, Google Home, and Apple Homepod.

"Alexa, use Mastercard Choice to complete my purchase."

hero_dot-echo-plus._cb515484415_.png

"Ok Google, use Mastercard Choice for sneaker payment."

googlehome.png

"Hey Siri, use Mastercard Choice for DoorDash payment."

apple pod.png

Looking Ahead...

binoculars.png

Due to our time constraint of 24 hours, we did not have an opportunity to build out all the features.  In the future, we would like to design the voice id and touch id functionalities within Mastercard Choice, elaborating more on the two-step verification process.

Key Learnings 

This was my first hackathon which I participated in.  Winning first place was an exciting feel but there is still much more to learn and improve.  There are a few key  takeaways  that I walked away with which I know will be valuable as I work on other projects in the future.   Three  of my main learnings are:

  • Collaborating with other disciplines (digital marketing, web development, data science) to understand their process and learning quickly that UX is spearheading and coordinating efforts 

  • Making quick and efficient decisions quickly became very important, showing yet again that UX is an iterative process with room to go back and makes changes rather than be perfect before moving to the next step. 

  • Clear communication is key!  At times when each team was working we didn't always know who was doing what and how to have a final deliverable.  We asked the same question multiple times, we spoke and spoke again until we all had the same idea and understanding of the problem and solution.  


     

Congrats you've made it to the end! If you made it this far, I'd love to chat! Let's work together!