Leveraging New Technologies to Increase the Security of Online Transactions
SecurePay generates disposable credit card numbers for Mastercard customers, eliminating the need for individuals to save vulnerable credit card information when shopping online.
Mockup of Protekt App Screens
The Kick-Off
Project Type:
24 Hours
UX Researcher, UX/UI Designer, Branding Designer
Icon: Figma LogoIcon: Photoshop Logo
During my time at BrainStation, I participated in a 24-hour hackathon experience hosted by Mastercard x BrainStation. Tasked with creating a digital solution that increases the security of online transactions, I worked collaboratively with a team of UX designers, web developers, data scientists, and digital marketers to design SecurePay. My main contributions were conducting UX research, wire framing and prototyping using Figma, and ensuring we aligned with the Mastercard brand.
My Team
UX Designers
Web Developers
Data Scientists
Digital Marketer
Mockup of SecurePay in iPhone

Modifying my Design Process

One of the biggest challenges I faced undergoing this 24 hour hackathon, was adapting the UX process to a much shorter timeframe. Below are the steps of a modified design thinking process that we used to develop our digital solution over 24 hours, with a focus on being agile and keeping users at the centre of our process.
Icon: Heart with Person Inside
Project Brief
Problem Space
Secondary Research
Icon: Pencil
Revised HMW
Icon: Lightbulb
Market Research
User Stories
Task Flow
Icon: Phone Screen Prototypes
UI Inspiration & Branding
Low & Mid-Fi Wireframes
Hi-Fi Prototype
Modified human-centered design process

6:00 - 8:00 PM


The Challenge
With the increase of digital online transactions, online security has become a top priority for all organizations, so Mastercard asked us: “How might we (HMW) increase the security of online digital transactions for the widest range of users?”, placing an emphasis on keeping accessibility top of mind when designing our solution.
“How might we increase the security of online digital transactions for the widest range of users?”
Narrowing Down the Problem Space
In order to narrow our focus in the problem space, we kicked off our brainstorming session by drawing from our own experiences and pain points. An overwhelming commonality amongst our team was that when online shopping, when it comes to storing credit card information online, it’s clear that we prize convenience over safety. While we are all skeptical to save our credit card information online, we still do, because it is convenient.
A popup modal asking user to save credit card
Understanding the Problem Space
In 2017, 2 out of 3 consumers had their card information stored on at least one website or mobile app for future purchases. With a 44% increase in dollars spent on online shopping from 2019 to 2020, we can assume this number has grown drastically. This is a major concern as the more consumers store their payment information in a variety of places, the greater their odds are of being a victim of credit card fraud.
Individuals have their card information stored on at least one website or mobile app for future purchases
Credit Cards.com, 2017
Increase in dollars spent on online shopping from 2019 to 2020
Digital Commerce 360, U.S. Commerce Departement, 2020
And this vulnerability is reflected in the losses financial service providers are taking. By 2027, financial service providers are expected to take a $40 billion hit globally in credit card losses, a significant increase compared to $27.85 bn in 2018.
$40 Billion Loss

8:00 - 9:00 PM


Aligning the Design Team
Using insights derived from our secondary data, we created two proto-personas to align the design team in developing the best possible security solution for Mastercard users.
Our first proto-persona and core user is Angela Lewis, a 35-year-old consultant who frequently online shops and saves her credit card information as she finds the process very convenient. She wants to feel secure when shopping online and doesn’t know which sites she can trust with her financial information.
Primary Proto-Persona: Angela Lewis
Primary Proto-Persona: Angela Lewis
Our second proto-persona is Daniel Thomas, a 61 retiree. Daniel has had to shift to online shopping during the pandemic. Overwhelmed by online shopping, he is looking for a simple checkout process and doesn't understand the risks associated with saving his credit card information.
Secondary Proto-Persona: Daniel Thomas
Secondary Proto-Persona: Daniel Thomas
Revisiting the Design Challenge
With a deeper understanding of our problem space and the area of opportunity we want to tackle, it was important to revisit our HMW statement and ensure it best framed the design challenge at hand.
"How might we eliminate the need for e-commerce shoppers to store their banking information online in order to improve the security of their online transactions?"

9:00 - 10:30 PM


Conducting Market Research
Having a deeper understanding of our user's pain points, goals, and motivations, we conducted market research to discover emerging technologies that could be leveraged in our solution, such as biometric authentication, tokenization, and digital IDs. Upon learning more about these technologies, disposable/ temporary credit cards was a top contestant for meeting the user's needs of convenience and security.
Third Party Wallets
Biometric Authentication
Disposable Credit Cards
Digital ID
Multi-factor Authentication
SSL Protocol
Defining Product Functionality
Keeping our users goals at the top of mind, we authored several user stories to highlight necessary product functionality. The two user stories that aligned most with both Mastercard’s goals and our users goals are:
“As an online shopper, I want to check out without filling in my credit card information each time so that I can save my time and energy.”
“As an online shopper, I want to see an additional security measure when checking out so that I feel confident in the security of my online transaction.”
We translated these user stories translated to a primary task:
Purchase an item online with a disposable credit card number
Taking that primary task, we created a task flow diagram to visualize the steps a user would take to successfully purchase an item using a disposable credit card number generator. When building the task flow diagram, we closely consulted with the web development team to ensure they would be able to implement the functionality requirements given the strict time constraints.
Primary Task Flow: Purchase an item online w/disposable credit card number
Primary Task Flow: Purchase an item online with a disposable credit card number

10:30 - 12:30 Am


Gathering Inspiration & Defining Constraints
Before my teammate began sketching, I collected UI inspiration and key assets from Mastercard’s brand.
For inspiration, I looked at key players in the financial services industry to see what components are commonly used, in order to create consistent and predictable designs. Some components I pulled out were popup login modals, radio buttons for secure payment selection and card selection, different ways to display disposable credit card information, and language selectors.

UI inspiration
UI inspiration
Mastercard's branding assets
Mastercard branding assets
To ensure our solution aligned with the Mastercard brand, I collected Mastercard assets, including logos, colour palettes and hex codes, typography, imagery, and screenshots of current site pages.
Exploring Digital Solutions
We wanted to get a first iteration of our digital product to the web development team as soon as possible, so they had a framework to get started, so my while I was collecting the branding assets, my teammate drew from the UI inspiration board to create a series of sketches. After the sketches were done, I started creating low-fi wireframes to hand off to the developers.
Idea: A checkout integration that generates disposable credit card numbers for Mastercard customers, eliminating the need for individuals to save vulnerable credit card information when shopping online.
Sketches of app screensSketches of App Screens
Sketches that translated to low-fi wireframes
Wireframe: Popup Modal Login Activated
Wireframe: Popup Modal Login Tapped
Wireframe: Select Credit Card
Wireframe: Select Credit Card_Tapped
Wireframe: Loading Screen
Wireframe: Confirm Purchase
Wireframe: Confirm Purchase_Tapped
Low-Fi wireframes
After the hand off, I got started creating the mid-fi wireframes and hi-fi prototype, with a focus on making our solution look and feel like an extension of the MasterCard brand.
Mid-fi Wireframe: Popup Modal Login Activated
Mid-Fi Wireframe: Popup Modal Login Tapped
Mid-Fi Wireframe: Select Credit Card
Mid-Fi Wireframe: Select Credit Card_Tapped
Mid-fi Wireframe: Loading Screen
Mid-fi Wireframe: Confirm Purchase
Mid-fi Wireframe: Confirm Purchase_Tapped
Mid-Fi wireframes
Finalizing our Prototype
After handing over the hi-fi prototype to the web development team and working with them throughout the night to assist them with executing our designs, SecurePay was designed and developed.
SecurePay Logo
SecurePay generates disposable credit card numbers for Mastercard customers, eliminating the need for individuals to save vulnerable credit card information when shopping online.
SecurePay Protoype

1 day after hackathon


Key Learnings
While my team didn’t win the Hackathon, there were many valuable lessons learned that made this experience memorable. As this was my first experience collaborating with different departments as a UX designer, I learned to communicate effectively with other teams using their language, and learned how to adapt my design processes to meet the needs of other departments in order to ensure we were aligned and working efficiently throughout the 24-hours.
Icon: Chat
Importance of being agile
We used agile practices such as constant communication with the development team and overlapping tasks, so we could collaborate and iterate quickly.
Icon: Calendar
Due to the 24-hour time constraint, I was forced to learn how to scale my design process according to a shorter time frame. Being comfortable adapting UX processes is a skill I am excited to practice in industry, as project timelines will vary greatly.
Mockup of Protekt App Screens
Assets Credit: Icons (Iconify), Photos (Unsplash), Mockups (Mockup World, Place It)