Leveraging New Technologies to Increase the Security of Online Transactions
24 HOUR HACKATHON
SecurePay generates disposable credit card numbers for Mastercard customers, eliminating the need for individuals to save vulnerable credit card information when shopping online.
Project OVERVIEW
The Kick-Off
Project Type:
Timeline:
Role:
Tools:
Academic
24 Hours
UX Researcher, UX/UI Designer, Branding Designer
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.
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.
Empathize
Project Brief
Problem Space
Secondary Research
DEFINE
Personas
Revised HMW
IDEATE
Market Research
User Stories
Task Flow
PROTOTYPE
UI Inspiration & Branding
Sketches
Low & Mid-Fi Wireframes
Hi-Fi Prototype
Modified human-centered design process
6:00 - 8:00 PM
EMPATHIZE
PROJECT BRIEF
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.
DESIGN CHALLENGE
“How might we increase the security of online digital transactions for the widest range of users?”
FINDING A FOCUS
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.
DIVING DEEPER
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.
2/3
Individuals have their card information stored on at least one website or mobile app for future purchases
Credit Cards.com, 2017
44%
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
DEFINE
PROTO-PERSONAS
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
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
REFINED HMW
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.
REVISED DESIGN CHALLENGE
"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
IDEATE
INSPIRATION
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
Tokenization
Encryption
SSL Protocol
USER STORIES & TASK FLOWS
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 with a disposable credit card number
10:30 - 12:30 Am
PROTOTYPE
UI INSPIRATION & BRANDING CONSTRAINTS
Gathering Inspiration & Defining Constraints
Before my teammate began sketching, I collected UI inspiration and key assets from Mastercard’s brand.
Inspiration
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
Mastercard branding assets
Branding
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.
SKETCHES & WIREFRAMES
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 that translated to low-fi wireframes
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 wireframes
HI-FI PROTOTYPE
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 generates disposable credit card numbers for Mastercard customers, eliminating the need for individuals to save vulnerable credit card information when shopping online.
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.
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.
SCALING MY DESIGN PROCESS FOR A SHORTER TIMELINE
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.
