A mobile website that protects your credit card online by enabling users to control what websites or services store their card information.
UX - Hema Nookala, Raquel Marin
Web Dev - Charles Lu, Joshua Sepulveda
Data Science - Chase Holtan, Puneet Sran
Digital Marketing - Natalie Mitchell
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.
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.
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
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.
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 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 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.
I want to
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
detect when there is unusual activity with my card
I can be aware of what transactions are happening on my card
text message alert
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
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
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.
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.
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.