A mobile website that protects your credit card online by enabling users to control what websites or services store their card information.

duration

24 hours
(Hackathon)

Role

UX Researcher,
UX Designer

Team

UX - Hema Nookala, Raquel Marin
Web Dev - Charles Lu, Joshua Sepulveda
Peter Reyes
Data Science - Chase Holtan, Puneet Sran
Digital Marketing - Natalie Mitchell

The project scope

We had 24 hours to design and develop a solution. Brainstorming through our secondary research helped us identify the loopholes in sharing our credit card information online, and we used these insights as to the basis of our design.

Identifying our scope of work and collaboration with engineers to make sure we, as UXers, iron out all the kinks helped us attain results in a limited timeframe. My role included research planning, comparative analysis, writing task flows, and UI design.

The challenge

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

How might we increase the security of online digital transactions for the widest range of users?


With the guidance of a team from Mastercard and BrainStation, my team designed and developed Shield, a web application that helps the user keep their credit card information safe online.

The project timeline

We created a timeline keeping in mind the aspects that are essential to the project's completion. As UX Designers, we started by focusing on what we do best: research and ideate!

Diagram: Project Timeline

Secondary research

We live in a time when much of our lives reside online, and therefore digital security to protect your online identity, data, and other assets is of paramount concern. Our data science team was provided with four data sets, and one of them was a synthetic financial dataset for fraud detection. Having personally experienced credit card fraud, I shared my story with the team.

Three years back, I woke up in the early hours of a Monday to see notifications of fraudulent transactions made on my credit card to buy international air tickets. I quickly rushed through my wallet to see if I had lost my credit card. To my relief, it was sitting in the tiniest pocket that seemed almost invisible. But then, how were these transactions made? I never in my life flew on that airline. I later discovered that my credit card details were hacked from a travel site I had used for a recent booking.

My story was thought-provoking, and we were keen on diving deep into the realm of credit card fraud. But, again, this is a massive topic, so we focused our research mainly on 'Card-not-present' fraud. In this type of fraud, the scammers obtain the account holder's information by hacking their details online. So, next, I have listed the insights to determine the patterns from our research.

The insights

There were 650,572 cases of identity theft in the U.S. in 2019. Of those, 41 percent were credit card fraud. Credit card fraud is the most common type of identity theft, followed by other and loan fraud.

Most of the scammers use malicious code to steal your credit card details and other information during the checkout process on online retail sites.

Over the last decade, the number of accounts, mostly aged between 20-40 years, who have reported at least one case of credit card fraud has increased by 71 percent.

Most credit card fraud occurs at shopping or grocery vendors.

Most fraudulent transactions occur for less than $2.

We did not have time to conduct user interviews. So instead, we relied on the insights we obtained from our research and the given datasets and my real-time experience with online fraud.

The goal

We brainstormed dozens of ideas to find a solution to keep users secure about their credit card transactions and chose an idea that we as a team could successfully execute within 24 hours.

We decided to create an aggregator for the user to see all the accounts where their credit card information is stored and give them the ability to edit or delete these accounts. A text message to alert the user of any unusual activity on the associated credit card is an added layer of security.

The persona

We added our insights to my experience to develop our persona. Keeping our persona at the center of the design, we discussed ideas on preventing online fraudulent transactions and securing our credit cards.

We sat together to develop user stories that would address the frustrations of our persona. Mentioned below are the ones that we decided to focus on in the limited time frame.

As a

I want to

So that

Task

Online shopper

keep record of where my card information is shared

I can see where my credit card information is stored

create list of accounts associated with the credit card

Online shopper

detect when there is unusual activity with my card

I can be aware of what transactions are happening on my card

text message alert

Online shopper

set my own requirements for an irregular transaction

I can be made aware of certain types of transactions before they happen

create filters to detect suspicious activity on the credit card

Online shopper

delete my credit card information from sites I no longer use

I can manage where my credit card information is stored

option to edit/ delete credit card information

How the final product works...

Below, I will discuss how we broke down the user stories into tasks that convey the actual intent. Creating task flows helped us to ensure we designed sequentially and thoroughly to reach our final product. The web development team came together with my design team to discuss the feasibility and duration of development.

Angela Barnes does not remember where she has used her credit card to make online transactions. So how to find out the accounts the user's credit card is associated with?

The first step was the ability for the user to see all the accounts storing her card information.


Add your credit card to the app > View accounts storing your credit card information

Diagram: Task Flow 1

Wireframes for Task Flow 1

We developed task flow 1 into wireframes to show the user action of adding a credit card to the app to view a list of accounts storing its numbers. We drew U.I inspiration from banking interfaces like BMO, Tangerine, Citibank to see what users are familiar with. The final prototype was created with American banks because the data we were using reflected American locations.

Diagram: Wireframes show the steps for the user to see all the web accounts storing their card information.

Transitioning to high fidelity designs for the above Task Flow 1

Diagram: Hi-fidelity designs show the steps for the user to see all the web accounts storing their card information.

Can users be informed of any unusual activity on their credit cards and how to prevent it?

We added the text message alert feature to get notified and immediately deny any fraudulent transaction request. The user can then visit the application and edit or delete the suspicious account storing their card information.


Get Notification of unusual activity on your credit card

Diagram: Task Flow 2

Wireframes for Task Flow 2

Diagram: Wireframes show the steps where the user receives notification for a fraudulent transaction and takes the necessary steps.

Transitioning to high fidelity designs for the above Task Flow 2

Diagram: Hi-fidelity designs show the steps where the user receives notification for a fraudulent transaction and takes the necessary steps.

Now talking about unusual activity, how to define an attempt to be unusual?

To solve this, we created a custom filter for users to set their online purchase behavior. From the data, we found that most fraudulent transactions occur below $2 and after midnight. The high-fidelity mockups show how the user sets the filters on the card.


Set custom filter to detect unusual activity on credit card

Diagram: Task Flow 3

Wireframes for Task Flow 3

Diagram: Wireframes show the steps on how the user sets the custom filter.

Transitioning to high fidelity designs for the above Task Flow 3

Diagram: Hi-fidelity designs show the steps on how the user sets the custom filter.

Accessibility

Digital accessibility in financial services is critical. We have designed the final product keeping accessibility as a priority to create an inclusive experience.

Shield is a mobile website that protects your credit card online by enabling users to control what websites or services store their card information. Please click on the below button to try out the interactive prototype in iPhone 13 mini.

Next Steps

As a product designer, I believe that good feedback helps drive projects forward, resulting in better products and healthier collaboration. Therefore, in discussion with my team, I have jotted down a few points that have to be considered in the future to improve our product for optimum security.

  • To integrate the information of multiple financial institutions
  • To consider how we validate communication protocol between Shield and vendors to reset passwords
  • Further configuration of filters to recognize suspicious patterns
  • Ability to report irregular transactions from vendors
  • Ability to report irregular vendors to the financial institutions

Reflections

  • Good communication across different disciples brings out the best ideas required to build a good product
  • My coding knowledge helped me to understand the developer's perspective
  • Clearly defining our research plan and prioritizing getting answers to the most important questions helped us achieve our goal in a limited time