MasterCard

AI Card Management App

Ying Han #AI-powered #IntegratedCardManagement

#Personalized #VoiceCommands #DataPrivacySecurity

Introduction
MasterCard is an AI-powered card management app
designed to simplify the way users handle various cards,
from payment to loyalty programs. Features integrated
management, allowing users to centralize their cards in
one app for ease of access and control. Utilizes AI for
automatic card sorting, labeling, and provides
personalized suggestions based on users' consumption
patterns. Offers intelligent reminders and voice command
functionalities to enhance user experience and efficiency.
Prioritizes data privacy and security with strong
encryption and authentication measures.

1
Background

✻ The current market is saturated with card management

apps like Apple Wallet, Google Pay, and Stocard, etc.
They offer limited functionalities focusing mainly on
payment and storage.

✻ Users frequently need to navigate multiple apps to

manage their cards, leading to a complicated and time-
consuming process.

✻ There is a growing demand for a more integrated,

intelligent solution that can offer a unified platform for
managing various types of cards.

✻ MasterCard is developed to address these challenges

by leveraging AI to provide a more streamlined,
personalized, and secure card management experience.

Competitor
Card Storage:

Stocard All apps allow users to store various types of cards, including credit,
debit, loyalty, and event tickets, digitally on their smartphones
Google Payment Functionality:

Pay Apple Wallet, Google Pay, and Alipay offer contactless payment
13.0% functionality, allowing users to make payments using stored cards
23.0% Other
Cross-Platform Availability:

9.0% While Apple Wallet is exclusive to iOS devices, Google Pay and
Stocard are available for both iOS and Android devices, providing
cross-platform accessibility to users
Additional Features:

Stocard and Google Pay offer additional features such as personalized

offers and digital receipts to enhance the user experience
25.0% 30.0% Financial Services:

Alipay stands out as a comprehensive mobile payment platform that

provides a wide range of financial services beyond card storage,
Apple including personal finance management.
Wallet Alipay

User usage ratio

3
Survey
Problems encountered when using cards in daily life

There are so many cards that management is difficult and some cards are forgotten.

50%
Common problems users encounter in card management

There are too many cards and management is

Managing multiple credit card bills and repayment dates can become confusing,
leading to late payments and additional fees.
difficult. Some cards are forgotten, causing the cards
to expire
55%

Late payment and incurring additional fees

Miss out on opportunities to accumulate reward points or enjoy benefits using your
card. Missed opportunities to accumulate reward points
40% or enjoy benefits using your card.

Lost or stolen cards lead to financial losses and security issues.

15%

4
Survey & Insight
What a AI card management app should have

Integrated Management 12（60%）

Intelligent reminders 15（75%）

Automatic card sorting and labeling 7（35%）

Personalized suggestions 6（30%）

Voice recognition and voice commands 5（25%）

Virtual assistant integration
Data privacy and security
Intelligent reminders and comprehensive management are
5（25%） the most popular features in AI card management
applications, with intelligent reminders being the
10（50%）
top priority feature, accounting for 75%. Data
privacy and security are also the top concerns for
50% of respondents.

5
 Interviews
"I prefer using my card for most
purchases, finding it more convenient
than carrying cash."

"I prioritize secure online shopping, avoiding

sharing card details via email or text. I also monitor
Heather
my account statements regularly for any signs of
Age:31
fraud."
Graphic Designer

"I use reward tracking and bill payment

reminders. Additional security measures like
biometric authentication would provide further
reassurance."

“A big problem I have is forgetting

to use the card when there is a "I often forget which card I'm using for
deal or discount.” different transactions, especially when
managing multiple cards."

Sarah
“I would love to be reminded when Wei Zhao

Age:35
I need to use them. It would be Age:29

Retail Manager
better if it could give me tips on Student

saving money.” “It would be great if there was an

app that could auto sort my cards
and remind me when bills are due.”

Research summary

Problems Needs

Large Number of Cards Multi-card integrated management

Bill and Repayment management Intelligent reminder

Missed Rewards and Offers Automatic card sorting

Lost Cards and Security Issues Personalized recommendations

Powerful security features

7
Persona
Bio
Jesse is a doctor. Currently working in a hospital and earning a
considerable income. He is usually very busy and tired from work.
Frustration is common when it comes to card management.

Frustrations
Work is busy and there is not enough time to
manage each card, resulting in late bills or delayed
payments
Facing complex financial situations, including high
student loan debt, health insurance, and tax issues.
Goals
Make sure to pay your credit card bills on time to
build and maintain a good credit history
Manage all debts and make sure they are paid on
time

Name: Jesse
Don't know how to manage it Keep card information and financial data secure to
prevent identity theft and fraud
Physicians have higher incomes and financial
Occupation: Doctor resources, making them easy targets for identity
theft and financial fraud.
Regularly review card activity to ensure there are no
errors or unauthorized transactions.

Persona
Bio
Kara is a housewife with two children. She is responsible for
the family's daily chores, taking her sister to and from school,
and taking care of her younger brother at home. In addition,
he is responsible for the financial management of the family.

Frustrations
There are too many cards at home and it is
inconvenient to manage. Frequently forgetting
to make payments or activate replacement
cards
Deadlines for certain card benefits are often
missed.
Name: Kara
Close or cancel cards that are rarely used or don’t
Goals
Set up automatic payments and reminders to
avoid missed payments and late fee
Smart reminder card benefit expiration date or
time when replacement card needs to be
activated
benefit from through smart analytics

Occupation: Housewife Based on the card's annual fee and benefits, the
best payment suggestions can be given.

User Journey Map

Stages of
Awareness Search Download Use Review
journey

User goals Need better card Find card management Manage cards efficiently.
S hare feedback on app
Install CardMaster app experience.
management. solutions

Downloading app from app A dding cards to the app,

Reflect on card-related riting reviews, rating the
Activities challenges.
Researching online, seeking
store. setting reminders, checking W

app.
recommendations. rewards.

Emotions

Pain points Difficulty keeping track of Overwhelmed by options, Concerns about app Forgetting to use cards for Dealing with unresolved
multiple cards. unsure where to start. reliability and security. deals, missing bill payments. issues or bugs in the app.

roviding constructive
P
Discovering CardMaster
Opportunities Discovering solutions to
through online searches or
Easy access to download tilizing features like
U

reminders to improve card

feedback to improve the
improve card management. and installation process. app's functionality.
recommendations. management habits.

10
How Might We...?

？
How might we use AI technology to realize intelligent
identification and entry of card information, and
categorize and manage it to improve users' card
management efficiency?

11
How Might We...?

？
How might we integrate real-time updates and
reminders to provide users with timely card status
information?

12
How Might We...?

？
How might we use AI technology to analyze user data
and provide users with a more personalized card
management experience that meets users needs and
preferences?

13
Task Flow 1

Jesse adding a new card and setting repayment date with voice command.

Say “Hey, Cardy”,

Voice command Card recognition
Homepage Add new card Scan new card
activates voice
recognition

Completed: receive a Voice command Set repayment Auto-fill

Confirmation
confirmation message recognition date information

14
Task Flow 2
Kara wants to set up notifications for a credit card to receive real-time card status and alerts.

Agree to AI Disagree
Settings page Notification Select a card Notification recommending additional
preferences notification settings?

Agree

Completed: receive a Confirmation Manual

confirmation message adjustment

15
Task Flow 3
After Jesse receives the credit score notification, he reviews the results and makes adjustments.

Receive Navigate to the View credit score Review AI

notification notifications section and reports recommendations

Completed: receive a
Make adjustments
confirmation message

16
Testing

Add buttons and adjust them below

the card to make the layout look
more reasonable.

Before After

17
Testing

Adjust the description text under the

option to Icon. When you click the Icon,
the corresponding text description will
pop up above.

Before After

18
Testing
Added filter to message page. Users can
select the type of message content under
the filter to quickly find the message they
want to view among a large number of
messages.

Added a background color to the message

title to highlight the information content.
Change the selection to a delete button
and a detail button at the bottom of the
message to improve operability.

Before After
19
Testing

The Add Suggestion button is in the

lower right corner. This button is a
rational suggestion put forward by
AI based on the user's card usage,
making it convenient for users to
view the suggestions.

Before After

20
UI Kit
Typography
Font family: Nunito H1 - Nunito bold 30px

Aa Aa Aa

H2 - Nunito regular 24px

H3 - Nunito regular 18px

Body - Nunit regular 16px

Body - Nunit light 16px

light regular Bold

Colors
Main color Secondary colors

#27A4F2 #0365BA #D3ECF9 #F4FBFF

Accent color Neutral colors

#4CAF50 #F27405 #FF3B30 #424B5A #FFFFFF #D9D9D9

21
UI Kit
Icons Other
Placeholder Tab #1 Tab #2 Tab #3

Option
Option
Title
Option
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
Option
do eiusmod tempor incididunt ut labore et dolore magna
aliqua elit, sed do eiusmod tempor incididunt uelit, sed do
eiusmod tempor.

Popover Top
Posuere consectetur est at DELETE DETAIL
lob ortis. Aenean eu leo
quam. Pellentesque ornare

Buttons sem lacinia quamed.

Placeholder Placeholder
Error info

Placeholder
BUTTON BUTTON DELETE DETAIL

Disabled Default (save/ add)

OFF ON

22
High Fidelity Mockup
Task flow1: Jesse adding a new card and setting repayment date with voice command
6:20 6:20 6:20
Hi, I’m here. What can I do for you today？
6:20 6:20 6:20 6:20 6:20

Debit card Credit card Membership Chat Scan Card Info Chat Card Info Card Info
card
Card 1234 4567 7890 1234
Hi, Cardy number Hi, Cardy

Hi, I’m here. What can I do for you today？ Name American National Bank of Texas Hi, I’m here. What can I do for you today？

Validity
I want to add a bank card. period 02 / 15 / 2026 I want to add a bank card.

Please choose how to add the card. Please choose how to add the card. Card You h123 Card
Hi, Cardy 6
CVV 123 number ave4su45cce
67ssfully added
7890 123 4 t he
debit card: ANBTX 1234 4567 number 1234 4567 7890 1234

Automatic repayment settings 7890 1234 and set the repayment

Name date tAmerican
o the 15tNational
h of eacBhank ofth.
mon Texas Name American National Bank of Texas
Type Scan Quota settings Type
Type Scan
Scan
Please the card in this area. Validity Validity
period 02 / 15 / 2026 period 02 / 15 / 2026
Consumption pattern Now Confirm
Set up automatic repayment on the 15th of CVV 123 CVV 123
+add Password settings every month for this bank card.

Transaction limit
Automatic repayment settings Automatic repayment settings

Save Quota settings Quota settings

3 3 3 3 3 3
Consumption pattern Consumption pattern
3
Password settings
Transaction limit

23
High Fidelity Mockup
Task flow2: Kara wants to set up notifications for a credit card to receive real-time card status and alerts.

6:20 6:20 6:20 6:20 6:20

Settings Notification
Notification
Notification

Debit card Credit card Membership

card
Settings Settings Settings
Security Settings Membership
Debit card Credit card card
Payment Settings

Notification Settings
Privacy Settings
Receive Transaction Receive Transaction
Language Settings Notifications Notifications
Receive Account Balance Receive Account Balance
Help and Support Alerts
Alerts

Receive Card Expiration Receive Card Expiration

About the App Reminders Reminders
Receive Personalized Push Receive Personalized Push
Notifications Notifications
Push
+add Notification
NotificationMethod
Method Push
Notifications Notification Method Notifications
log out Notification Frequency Instant Notification Frequency Instant
Notifications
Notifications

3 3 3 3
Save
Suggestion

24
High Fidelity Mockup
Task flow3: After Jesse receives the credit score message, he reviews the report and makes adjustments.

6:20 6:20 6:20 6:20 6:20

Auto repayment

Notification Notification Notification Notification

settings
Quick payment Oct, 27 Quick payment Oct, 27
Repayment Bank of
deduction account
deduction
America(...2764)
$39.98 Repayment $39.98
Transaction Time: 11/27/23, 1:50 p Transaction Time: 11/27/23, 1:50 p
Transaction Type：Quick payment deductio Repayment Transaction Type：Quick payment deductio
Monthly
Trading account: American National Bank of frequency Trading account: American National Bank of
Texas(...1234 Texas(...1234
Amount of the transaction:$39.9 Repayment Amount of the transaction:$39.9
15th of every month
Remark: Buy groceries date Remark: Buy groceries
You have set up automatic repayment for
Contract validity XX credit card payment method. Avoid
Report period
Long-lasting
late payments to improve your credit
Delete Detail score. Delete Detail
MasterCard Now
Bank of America credit card’s credit
score updates Credit score updates Oct, 28 Suggestion Credit score updates Oct, 28
notification Save Confirm notification

AI has detected that your Bank of American AI has detected that your Bank of American
credit card's credit score was lowered due to credit card's credit score was lowered due to
overdue repayment last month. overdue repayment last month.

Delete Detail Delete Detail

3 3 3 3 3

25
Prototype
Adding a new card and Set up notifications Reviews the reports and
setting repayment date makes adjustments.

Link to Prototype1 Link to Prototype2 Link to Prototype3

26
Conclusion

During this project, I learned the importance of

integrating artificial intelligence technology to enhance

the user experience of card management applications.

As a UI/UX designer, I will focus on ongoing user

research and testing to refine the application's

functionality and interface. Additionally, I prioritize

accessibility and inclusivity in design, ensuring the app

MasterCard meets the needs of a variety of users. If given the

opportunity I will work closely with developers to

explore opportunities to leverage emerging technologies

and improve application performance and functionality.

27