Pretection MFA Graphic Design Thesis Xuan (Joanna) Zhou
Pretection MFA Graphic Design Thesis Xuan (Joanna) Zhou
Pretection Written and designed by Xuan (Joanna) Zhou
Master of Fine Arts Graphic Design School
Academy of Art University Instructors
Phil Hamlett, Carolina De Bartolo, Bob Slote, Jeremy Stout, Course
MFA Gtaduate Thesis Date
Spring 2016 Copyright 2016 Xuan (Joanna) Zhou. All Rights Reserved. No portion of this publication may be reproduced, stored in a retrieval system,
or transmitted in any from as well as by any
means electronic, mechanical photocopying, recording, or otherwise without permission of the copy right holder.
Table of Contents Problem & Research
○ Background · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 007 ○ Problem · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 008
○ Research · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 012
Concept Development
○ Group Event · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 024 ○ Quotes · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·· · · · · 026 ○ Insights · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 028
○ Target Audience · · · · · · · · · · · · · · · · · · · · · · · · · · 032 ○ Materials Matrix · · · · · · · · · · · · · · · · · · · · · · · · · · 034
Brand Identity
○ Signature · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 038
○ Illustration Style · · · · · · · · · · · · · · · · · · · · · · · · · · 046 ○ Typography · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 048 ○ Colors · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 050
Deliverable Development
○ App · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 054 ○ Usertesting · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 068 ○ Website · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · 070
Deliverables
· · · · · · · · · · · · · · · · · · · · · · · · · · · 086
003
Do some research to understand the topic
Problem & Research
DESIGNER_XUAN (JOANNA) ZHOU
006
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 1_PROBLEM & RESEARCH
Background Just like most people in China, I used cash to make payments, no matter having dinner in restaurants or shopping in markets. I did not have a lot of experience
in managing or protecting my payment cards. However, American people are used
to purchasing by payment cards instead of cash. So, I changed my payment habits. Usually, I keep four payment cards in my pocket and use them almost everyday and everywhere, but did not monitor or secure them at all. Until one day, I was
shocked by the Target breach and recalled that a lot of friends told me that the experienced fraud in America. After that, I conducted an informal survey of my
friends and classmates, and surprised that more than 35% of people experienced fraud. Also, I continued to hear a lot of fraud news, and I realized that securing payments is a serious problem.
007
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Problem "The true identity theft is not financial. It's not in cyberspace. It's spiritual. It's been taken."
Identity theft
Identity theft is a term used to refer to all types of crime in which someone
wrongfully obtains and uses another person’s personal data in some way that involves fraud or deception. Identity theft effects reach far beyond financial issues, and also cause serious impact of background check and emotion.
Credit card and debit card fraud
Credit card (or debit card) fraud is a form of identity theft that involves an
unauthorized taking of another’s credit card information for the purpose of charging purchases to the account or removing funds from it. Credit card
and debit card fraud resulted in losses billion dollars in every year. It is always a threat, both on the Internet and out in the real world.
008
CHAPTER 1_PROBLEM & RESEARCH
009
DESIGNER_XUAN (JOANNA) ZHOU
010
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 1_PROBLEM & RESEARCH
011
DESIGNER_XUAN (JOANNA) ZHOU
012
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 1_PROBLEM & RESEARCH
Research In order to identify a specific problem, I did a lot of research. I dived deep into
articles, videos and papers, looking for facts, thoughts and quotes to present how
people thought about my topic. Tracing any connections or overlap to my concept helps me be specific and detailed in my analysis.
013
DESIGNER_XUAN (JOANNA) ZHOU
014
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 1_PROBLEM & RESEARCH
015
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Fact 1
Card fraud rates by country: UAE China India United States Mexico Australia South Africa Brazil United Kingdom Singapore France Russia Indonesia Canada Italy Poland New Zealand Germany The Netherlands Sweden
016
Rates of fraud vary across countries, but in the United States is the fourth highest rate among the 17 countries. 41% of cardholders have experienced card fraud. Only Mexico, China and India had greater rates of fraud.
CHAPTER 1_PROBLEM & RESEARCH
Fact 2
93 994 995 996 997 998 999 000 001 002 003 004 005 006 007 008 009 010 011 012 013 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2 2
19
2 4 6
Loss in billions
0
8 10 12 14
Every year credit card and debit card fraud results in losses of billion of dollars.
017
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Fact 3
Half of Americans have experienced some form of bank card fraud. Among them, one in five fraud complaints came from victims aged 20–29.
018
CHAPTER 1_PROBLEM & RESEARCH
Fact 4
Percentage of Consumers Who Are "Very Concerned" About Fraud Types in different countries: Brazil
100
80
Canada
60
United States
40
Mexico
20
0 ch
ta
Da
ea br
t
en
Id
ity
ef
th
t
d
d
eck
Ch
au fr
On
li
ne
d
au fr
rd
d
e Pr
i pa
ca
d
d
au fr
d ar
tc
D
i eb
au fr
d ar
au fr
tc
i ed Cr
In the U.S., despite high rates of fraud, consumers express less concern; this
is likely because U.S. consumers are protected by federal legislation and payment
network policies that require financial institutions to reimburse them when they are victimized by electronic fraud.
019
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Fact 5
100
80
60
40
20
0 Debit signature
Checks
Debit PIN
Credit cards
Consumers who experienced fraud losses reported signature
Prepaid cards
debit as
having the highest dollar losses, followed by PIN debit and checks.
020
CHAPTER 1_PROBLEM & RESEARCH
Fact 6
100
80
60
40
20
0 Very happy
Somewhat at happy
Somewhat unhappy
Very unhappy
In the U.S. where fraud rates are the highest, most consumers who experience fraud are satisfied with their financial institution after the experience. Others sometimes change providers as a result.
021
Let's go out to hear other people's voices.
Concept Development
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Group Event
One-in-five fraud complaints come from victims in aged 20-29 years old. Because college students just begin to open a bank account individually. They do not have
enough experience in managing or protecting their payment cards or personal data. Also, young people are the most frequent and active users of social media and
smartphones—technologies that have made it easier for identity thieves to obtain personal information they can use to open fraudulent bank accounts or credit
cards. In addition, young people usually have good working credit scores, but they don’t check their credit score or monitor financial accounts usually, which means identity thief or fraudster can be easily used to secure new credit.
024
CHAPTER 2_CONCEPT DEVELOPMENT
025
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Quotes “I just check online activity; I do not check statements and I do not let banks send them to me. I go green.”—Wilson “I feel English bank cards are safer than American bank cards.”—Ming Li “When you often go to a big store like Target or Safeway, your bank card information is already there; if some hackers invade their computer system, your bank information is exposed easily. That is one thing that bothers me because that happened to me twice.”—Annie Yu “If I have a problem with my bank account or I lose my bank cards, I will check my balance also. Finding out if anyone stole anything that is the earliest thing I would do.”—Colleen Mckee
026
CHAPTER 2_CONCEPT DEVELOPMENT
“I just throw my receipts away after I purchase every time because I do not think someone would care how much bread I bought in Safeway or how much milk I bought in a month.”—Yuchao Zhang “Bank card technology is already dead. It is too old. The only thing you need to do is make your bank information connect to your phone or personal device.”—Beibei An “I like keeping receipts to check my personal spending.”—Ivy Jiang “If I do not swipe my card at least 3 to 5 times a month, I have to pay extra money to bank.”—Katie “I think this is a job of a bank. They should protect their customers’ privacy.”—Bin Wang
027
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Insights Banks are companies that trusted the most by people, but actually they do not care about customers’ personal data.
There are a lot of high-profile data thefts at banks, but people still trust bankers with their data because banks free their customers of all liability and keep their money
without prejudice. However, it is just a smart marketing. When people’s bank account really have troubles, banks never tell customers about risks on their personal data.
Banks never admit their systems are easily penetrated, which causes people to trust them blindly and lack enough defensive awareness.
$300 million were stolen from 100 banks in 30 countries in 2013. However, no bank has come forward acknowledging the theft. Banks do not want to admit that they
have weaker system, and they are afraid of losing trust in their clients, but they never think about hiding facts about theft encroaches upon the consumer right to know.
Marketing tools of banks promote the development of bank card fraud. In order to get more clients, banks provide a lot of different rewards to attract
people’s attention. However, having more cards means people have to work harder to manage them. Also, using multiple cards in many different places increases the chance of bank card fraud and revealing personal information.
American people get used to bank card fraud.
One out of every 5 debit card holders in the U.S. has experienced fraud on their
cards, and 5 percent of Americans reported having been victimized at least twice.
However, just few people made long-term changes as a result of experiencing fraud. 89 percent were back to using their debit cards within six months of the incident.
QR codes pose hidden danger to users’ personal data.
The nature of marketing itself means that the codes can crop up in unexpected
places—particularly in guerrilla campaigns, or in grey or illegal markets. QR codes
can carry thousands characters of data. The provenance of the code is completely unknown; it could direct a user to download malware, or visit an infected website, or subscribe people to unwanted services.
028
CHAPTER 2_CONCEPT DEVELOPMENT
One third of identity thefts committed by victims’ family members or their friends.
Because they are close to you, they are easy to get your personal data; also they
are people who you trust a lot, and you do not suspect them. It results that friendly fraud is to blame in many identity theft cases, especially child identity theft. Also,
27 percent of respondents reported knowing the individual responsible for the crime.
Child identity fraud is more difficult to detect and resolve than adult identity fraud.
Child identity fraud is a particularly damaging crime that can go undetected for
many years, only to be discovered when the victim applies for a student loan or
credit card. Also, Consistent with industry experience, and with the experience of
adult identity fraud victims, the study shows that Social Security numbers are the most commonly used piece of information by identity thieves targeting children.
Everyone knows that Social Security number is a secret. However, it is possible to be stolen, and if you are a victim, you will be “nobody�.
Thieves use your Social Security number for a variety of purposes, which increases the difficulty of realizing your identity has been stolen. However, you cannot get a new number simply because your card has been lost or stolen. A person must
actively be using your number for you to request a new one. If you have exhausted all options to prevent illegal use of your number and someone is still using it, you can request a new Social Security number.
Only 9 percent identity theft victims know a little about the offender. The most common way that victims discovered the identity theft was when a financial institution contacted them about suspicious activity on an account.
However, think about more life-altering effects, such as, criminal repercussions, and the emotional toll identity theft can take on one's life, not to mention any problems they have not even thought of.
The technology that exists in cards out there is 20th century technology and we have got 21st century hackers.
Not only hackers are on to the clever password tricks, they have got more advanced hardware and software. Also, the newer chip-and-PIN technology simply raises the
costs for them to fabricate these cards, it is not that they cannot break the system.
029
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
People do not know how to distinguish bank card fraud and identity theft. When they have identity theft, they even do not know where should be contacted.
Thieves use your identity for many different reasons. Once they have your personal information, they can drain your bank account, open new utility accounts, get
medical treatment on your health insurance, find a job, or get a driver’s license under your name. Thus, for different reasons of identity theft, people should contact different departments.
The most dangerous way to monitor your bank account is using your smartphone.
Using mobile financial services may be at risk for liability for unauthorized charges
or unfair billing, as well as the increased collection, use, and sharing of consumers'
personal and financial data. Also, mobile payments involve not just banks, merchants and card networks, but also software and hardware makers, phone carriers, app developers and loyalty program administrators.
Near field communication (NFC) promotes technological development, but it ignores security of personal data. Using NFC is too convenient to make a payment, which just needs a simple touch.
However, mobile phone hacking is now rampant and attackers are coming out with
newer methods to gain unauthorized access into users' personal, social security and financial data stored therein. NFC makes the entire system vulnerable and insecure.
Mobile card readers are the newest skimmers.
Mobile card readers can read a cloned card and send the data off for authorization.
Cardholder data on the magstripe is not encrypted. It’s virtually identical to the data printed or embossed on the card. It can be easily copied from one card to another. Skimming and data breaches simply cannot be prevented. When cloned cards are used to commit fraud, we all suffer.
030
CHAPTER 2_CONCEPT DEVELOPMENT
The government asserts chip cards are more secure, but they still cannot help people avoid identity and bank card fraud.
The malware that attacks a retail store is looking for account information inside Point of Sale devices' memories. This data would have been compromised regardless of whether or not it came from PIN cards because it was not taken directly off
the cards themselves. So, no matter what kind of bank cards you have, and how innovative the new technology is, they cannot ensure your account safety.
Changing passwords frequently does little to improve security but much to increase everyone's frustration.
Frequently changing passwords are easy passwords, likes something along the
lines, incrementing each time with equally bad passwords. Or, if hackers get your bank account login, they will not wait for you to change your password, but will
transfer the money out of your account right away, so changing passwords regularly is not very worthwhile.
Data broker knows you better than you.
Data brokers that keep files on consumers are labeling people by their ethnic
backgrounds, income, and even by their hobbies, politics and health status. You may not know them, but data brokers know you. Also, sometimes they hack for personal identifying information and sell directly to fraudsters.
Apple Pay will be a popular target for hackers.
Apple Pay is connected to iTunes accounts and Apple ID password is enough to
"recreate" a lost iPhone, populated with data from your iCloud backup, which means Apple account has vulnerabilities. The most worrisome point of vulnerability in an Apple Pay transaction, but, is the NFC transmission itself. It sends and receives information which can be intercepted.
031
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Target Audience College students, aged 16–24
One in five fraud complaints come from victims in aged 20–29 years old because
college students are just beginning to open a bank account individually. They do not have enough experience in managing or protecting their payment cards or personal
data. Also, young people are the most frequent and active users of social media and smartphones—technologies that have made it easier for identity thieves to obtain personal information they can use to open fraudulent bank accounts or credit
cards. In addition, young people usually have good working credit scores, but they don’t check their credit score or monitor financial accounts usually, which means identity thief or fraudster can be easily used to secure new credit.
Peter Age: 18
Gender: Male Income: $0
Bank cards: None
Method of banking: None
○ He is a new college student.
○ So far, he has not had a bank account, even a child saving account.
○ He plans to open a debit card, when he goes to college next month.
032
CHAPTER 2_CONCEPT DEVELOPMENT
Linda
Dave
Gender: Female
Gender: Male
Age: 21
Income: $2000 (part-time job) Bank cards: 2 Debit cards
3 Credit cards
Method of banking: Banking app
Age: 19
Income: $1500 (part-time job) Bank cards: 2 Debit cards
2 Credit cards
Method of banking: Online banking
○ She never check her bank statements.
○ He had a credit card fraud once.
○ She likes shopping online by using her credit card.
○ He open a lot of bank accounts at multiple banks.
○ She does not concern with her debit and credit card.
○ He likes using his credit card in everywhere.
033
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Materials Matrix Topic Area
Deliverable
Website
Bank accounts and identity security
Outcome
Improve awareness around bank account and identity safety and help users develop their management skills
Introduce general information about bank card fraud and identity theft.
Audience
College students, aged 16–24
Show different types of fraud and
Functionality
the damage it can cause to help students understand the importance of good habits.
Distribution
Each level introduces one type of frauds, and uses a
real case study video of bank card fraud and identity
theft to leave students a deep impression of the damage of fraud.
034
CHAPTER 2_CONCEPT DEVELOPMENT
Website
App
Teach students how easy it is to protect their payments
Collect fraud information from students and summa-
Illustrate how to protect students’ payments step by step
Encourage students to gain more knowledge about protecting their payments
rize the data to remind them to stay away from danger Spread useful safety tips for students to prevent fraud
Provide emergency measures and all
banks' emergency calls to help victims retrieve the loss
Alert students to high risks of fraud
around them depends on their location Students not only can read safety tips, but also can
The app provides a space for students to share their
the knowledge more easily.
messages to alert more people to stay safe when they
interact with the quiz game, which helps them review
fraud experiences. At the same time, it organizes fraud make payments. The QR code of this app will be shown on the website.
035
Strengthen the brand and build value
Brand Identity
DESIGNER_XUAN (JOANNA) ZHOU
038
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 3_BRAND IDENTIT Y
Signature Horizontal Version
Vertical Version
039
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Symbol Mark
The logotype is designed to fit the brand aesthetic. It is inspired by the numbers on
bank checks. The letters are formed by several circles and squares, which make the signature work cohesively.
040
CHAPTER 3_BRAND IDENTIT Y
Logotype All dimensions are based off of “Y”
Y
∕Y
12
∕Y
38
∕Y
38
∕Y
38
∕Y
38
∕Y
38
∕Y
12
∕Y
12
∕Y
12
Y
Y
The logotype is designed to fit the brand aesthetic. It is inspired by the numbers on
bank checks. The letters are formed by several circles and squares, which make the signature work cohesively.
041
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Clear Space ∕X
12
31 ∕ 2 X
∕X
34
73 ∕ 4 X
∕X
12
31 ∕ 2 X
41 ∕ 4 X X
∕X
34
∕X
∕X
12
All dimensions are based off of “X”
12
White space is an integral part of the brand look. It is important to retain a designed clear space around the signature to keep clean and uncluttered. Graphics, type,
photographs, and illustrations should not enter the clear space area. The minimum clear area is shown above.
042
CHAPTER 3_BRAND IDENTIT Y
Color
UNCOATED 5455C Cool Gray 9U
UNCOATED 5455C
CMYK 43 35 35 1
CMYK 7 3 2 0
RGB 153 153 153
RGB 234 238 242
043
DESIGNER_XUAN (JOANNA) ZHOU
044
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 3_BRAND IDENTIT Y
045
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Illustration Style Primary
○ Thick Outline ○ Full Color
○ Slash Line
ATM
Secondary
○ Thin Outline
Primary
○ Highlight color ○ Gray Shadow
The secondary illustration style is used in icons. Tertiary
○ No Outline ○ Full Color
$$
Tertiary
Secondary
Secondary
046
CHAPTER 3_BRAND IDENTIT Y
Infographics
○ Thick Outline
○ Thin Lines for details ○ Tertiary Illustration
047
DESIGNER_XUAN (JOANNA) ZHOU
Typography Header
Justus Pro
○ Medium 47pt ○ Leading 55pt
○ Tracking 10pt Title
Aktiv Grotesk Trial ○ Roman 48pt
○ Leading 61pt
○ Tracking 10pt
MFA GRAPHIC DESIGN THESIS_PRETECTION
Aa
○ Tracking 10pt Annotation
Aktiv Grotesk Trial ○ Roman 31pt
○ Leading 42pt
○ Tracking 10pt
A B C D E FG H IJKLM NO PQ RST U V W X Y Z a b c d e fgh i j k l m n op q rs tu v w x y z 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & *,.:;? ” Regual
A BCDE FGHI J K L M NO PQ RST UV W X Y Z a b cd efg hijk lmno p q rst uv w x y z 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & *, . : ; ?” Medium
a bcd efg h ijklm n o pq rs tuv w x y z 0 1 2 3 4 5 6 7 8 9 ! @# $ % ^ & *,.:;?”
Aktiv Grotesk Trial ○ Leading 48pt
Light
AB CD E FG H IJKL M NOPQ RST UV W X Y Z
Text
○ Roman 40pt
Aktiv Grotesk Trial
Aa
Justus Pro Regular A BC DE F GH I JK L MNOPQ R ST UVW X Y Z a b cde f g h ijkl mno p q r stuv w xyz 0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * , . : ; ?” Bold ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789!@#$%^&*,.:;?”
048
CHAPTER 3_BRAND IDENTIT Y
Header Title
Text Annotation
Text
049
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Colors Background
UNCOATED 2905U
UNCOATED 297U
UNCOATED 3252U
UNCOATED 3255U
CMYK 47 6 9 0
CMYK 48 7 14 0
CMYK 48 2 18 0
CMYK 5 26 25 0
RGB 128 197 221
RGB 127 195 211
RGB 96 122 153
RGB 96 122 153
Primary
The primary color palette is widely used in illustrations.
UNCOATED 7709C
UNCOATED 7690C
UNCOATED 7458C
UNCOATED 5455C
CMYK 49 64 45 29
CMYK 76 45 24 2
CMYK 41 11 9 0
CMYK 7 3 2 0
RGB 61 76 94
RGB 71 123 158
RGB 145 194 216
RGB 234 238 242
Secondary
The secondary color palette may be used to highlight information in graphics and texts.
UNCOATED 338C
UNCOATED 7416U
UNCOATED 7403C
UNCOATED Cool Gray 9U
CMYK 45 0 34 0
CMYK 11 62 42 0
CMYK 0 12 53 0
CMYK 43 35 35 1
RGB 141 207 184
050
RGB 220 124 124
RGB 255 222 141
RGB 153 153 153
CHAPTER 3_BRAND IDENTIT Y
Background Secondary Primary Primary
Primary Secondary
Secondary
Primary
051
Create new designs to affect the world
Deliverable Development
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
App The Pretection app is mainly used for protecting college students’ payments. It not only teaches students how to secure their payments, but also alerts them to stay away from dangers. The app is designed by a lot of illustrations with simple language for easy use.
There are five sections to perform different functions:
○ Safety tips: It is used as a learning tool to help students comprehend what are benefits and risks of securing payments.
○ Challenge: The rewarding challenge is used to test students' knowledge and encourage them to gain more related knowledge.
○ Fraud map: It is to remind students where may be harmful for making payments. ○ Report: It provides a space for students to share their fraud experiences.
○ Emergency: It provides emergency measures and all banks' emergency calls to help victims retrieve the loss.
054
CHAPTER 4_DELIVERABLE DEVELOPMENT
055
DESIGNER_XUAN (JOANNA) ZHOU
056
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
057
DESIGNER_XUAN (JOANNA) ZHOU
058
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
059
DESIGNER_XUAN (JOANNA) ZHOU
Draft 1
○ The idea came from a safe and was shown with a hand drawn design style. The reason I chose to use this design solution was because the topic is too serious to be accepted by students. I wanted to illustrate the contents in an interesting way. ○ Besides teaching college students how to protect their payments, the rewarding challenge section can encourage them to learn more related knowledge.
Comments
○ The design style looked like a sketch, and did not create any feelings related to the topic. ○ The typeface did not make sense.
○ Do not use a typeface to mimic handwriting.
060
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
Draft 2
○ Changed design style: The illustration was more formal, and the colors were brighter. ○ Used some diagonal lines to add some vitality to the heavy and serious topic.
○ Separated the topic into several categories and used icons to represent each category.
Comments
○ The Icons in the navigation were difficult for users to recognize. ○ The diagonal lines were not necessary because they did not tell anything. ○ The illustration style was too boring.
○ The numbers overlapped on the texts, which reduced recognition.
061
DESIGNER_XUAN (JOANNA) ZHOU
Draft 3
○ Added a character to guide people to learn the knowledge, which also brought personality to the app. ○ Changed the background color to bring some feelings of freshness and stability.
○ Promoted the illustration style, which was more interesting and clearer to understand. ○ Changed the way of presenting questions, which added interaction for users.
Comments
○ The character was too childish, and the visualization was not clear. ○ The white text with bright background needed more contrast.
○ All the images and icons were in the same level. ○ The app should add more details.
062
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
Draft 4
○ Changed the character
○ Added more details into illustrations, and separated the messages in different levels. ○ Changed the type color.
○ Replaced the bright background color with a little dark gradient color, which made people feel safe and trust the app more.
Comments
○ The character still felt a little childish, and was not in a same look with the other illustrations. ○ The illustration styles on the two screens were not the same.
○ There were too many trivial elements, such as blue lines outside of the white circle, in the illustration.
063
DESIGNER_XUAN (JOANNA) ZHOU
Draft 5
○ Removed the character, and changed the homepage to a formal layout.
○ Separated the topic into several categories easier for users to reach. ○ Used different background colors to divide different sections.
○ Added report section: users can send their official email about fraud to the app for reminding other people to avoid the risk of fraud; also they can get some help from other people to resolve problems.
Comments
○ Homepage design was too boring.
○ The categories were not clear enough to express the whole topic.
064
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
Draft 6
○ Changed the loading page:
show the categories on the loading page
to let users get the idea quickly and easily. ○ Added an introduction page before the detailed instruction page.
○ Changed the menu design to show sections clearly and improve interaction.
○ Added a new function called Fraud Map,
which was designed to alert users to stay away from dangers.
Comments
○ There was too much information on the
loading page. It should be simple and clear. The two texts represented the same idea.
○ The background color was a little dark.
Compared with the color of the text, it should have more contrast.
○ The setting section was not as important as other sections, so it can be hidden in the hamburger menu.
○ Since the map did not include street names,
users found it difficult to figure out the location, so google maps may be easier to use.
065
DESIGNER_XUAN (JOANNA) ZHOU
Draft 7
○ Changed the fraud map design:
changed to use Google map which has street names on it, and is familiar to people.
○ Changed the loading page:
kept it clean and simple, and used city image, which is the main illustration that is used for
the website, to make all deliverables connect to each other.
○ Changed the interaction in safety tips section:
instead of swiping from one screen to another screen, it displays all steps in one screen, so
users can scroll for reading; instead of showing
all the contents immediately, now it just shows illustration with simple title, and users can tap the key to read detailed contents.
○ Changed the challenge section:
after answering each question, the correct
answer appears automatically, and users can read to review the info or swipe to go to next
question; changed the congratulation screen to use companions’ image and language to make it realistic.
○ Changed to use banks’ actual logos. ○ Changed report section:
instead of using official email to show the
experience of fraud, it changed to a more conversational way, which let’s people
speak their story just like the Nextdoor app; added a key for showing official document, which can help people compare stories about fraud incidents.
066
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
067
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Usertesting Prototype
The final design of the Pretection app was created in Adobe Illustrator and then
uploaded the design files in InVision to add gestures and transitions to transform my static screens into clickable, interactive prototype. InVision link: https://invis.io/3N60SRK9U
Observation
○ Walk through the task independently ○ Easy to use without confusion
○ Identify interface that is effective ○ Express surprise or delight
Participants
○ 4 testers from AAU
○ Own a smart phone
○ Use apps on their smart phones ○ Have payment cards
○ Manage bank accounts by themselves
068
CHAPTER 4_DELIVERABLE DEVELOPMENT
“I like it. The Fraud Map is kind of crazy. It looks clear and seems like it’d be easy to use.”
“It’s simple and very nicely designed. I consider what happens to my money so I will totally download it. It’s helpful.”
“It’s cool. It can help a lot of students know how to avoid fraud. And the map is smart. I like it.”
“The language is easy to understand. The icons are pretty and they are really helpful for getting the point.”
069
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Website The Pretection website is mainly used for preventing card fraud and identity theft;
it also promotes the app to educate people to protect their payments. The website uses locations and schedules to represent different common types of fraud in our daily lives, which is easier for users to understand and learn. There are four sections to perform different functions:
○ Learning: Show different types of fraud and explain the damage they cause ○ Solution: Deliver solutions about how to protect payments step by step ○ Sharing: Provide a place to share your thoughts
○ Test: Set some questions to review the focal points of preventing fraud
070
CHAPTER 4_DELIVERABLE DEVELOPMENT
071
DESIGNER_XUAN (JOANNA) ZHOU
072
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
073
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Draft 1 ○ Tried to create an online class website. I
looked at several online class website layouts
AAU Name Semester Logout
Pretection
Home
Modules
Assignments
Calendar
and created this formal and simple wireframe.
○ For this class, it had 15 modules total, and
each module represented one common type of fraud; also, each module included a video to explain how the fraud happens.
Comments
○ There was no design on it. The grid was changed between these screens.
Course Description
Course Outcomes
○ The way of presenting the website did not look exciting for users.
Copyright
AAU Name Semester Logout
Pretection
Home
Modules
Assignments
Calendar
Module 1
Module 2
Module 3
AAU Name Semester Logout
Module 4
Pretection
Home
Module 1
Module 5
Module 6
Module 7
Assignment
Module 8 Subject Message
Module 9
074 Copyright
Modules
Assignments
Calendar
CHAPTER 4_DELIVERABLE DEVELOPMENT
Draft 2
○ Added an animation on the loading page to show how these types of fraud relate to our real lives.
○ Used same design style to tell the fraud story, and explain how it happens.
○ Added a blog page to post some news related to my topic.
Comments
○ The loading animation did not clearly tell users the purpose of the website.
○ The design of the second page was too boring.
Unbelievable true stories of identity theft
○ The blog page was not necessary in this website; it can be a Twitter link.
In an 8 month period back in 2009 Lara Love and David Jackson stole the identities of 30 neighbors. They swiped their neighbors' mail, gift cards that were lying around and eventually credit cards. To make matters worse, they used their neighbors' unsecured Wi-Fi to go online and set up fake accounts to make their fraudulent online purchases.
$
You tend to think of identity thieves as being hackers in other countries or slick con men, but studies show that's not the case. In 30 percent of identity theft cases, the culprit is likely to be a family member or relative. You also have an 18 percent chance it's a friend, neighbor or someone else with access to your house.
Even after the neighbors noticed and the pair were caught, the judge released them on their own recognizance - and they went right back to stealing stuff. Eventually, they were given a year in jail, treatment for drug addiction and five years of supervised probation.
Financial problems from identity theft seem to be the most devastating, and toughest problems to overcome, but think about the more life-altering effects, such as, criminal repercussions, and the emotional toll identity theft can take on one's life, not to mention problems you haven't even thought of.
Now, I am not saying you need to distrust your neighbors, but there are some steps you should take right away.
• Reduce your junk mail with a service like PaperKarma
• Keep any cash or cash-equivalent cards safely out of sight when people are around • Do not use public Wi-Fi or devices to login your accounts
• Reduce your mails with banking service like account statements • Secure your Wi-Fi against intruders
Download our free mobile app Link to invision
© 2015 Pretection
Identity theft targets college students, younger users Future Posts February 25, 2014
By: Andrew Hudson
Identity theft targets college students, younger users
iPhone ATM PIN code hack HOW TO PREVENT
Recent Posts 5 ways to fall victim to credit card fraud
Dangers of Mobile Banking
Identity theft and financial fraud has grown more advanced in recent years, and the latest trend could see college students become the primary target.
Follow Us
Read More
iPhone ATM PIN code hack—HOW TO PREVENT Aug 28, 2014
By: Mark Rober
This is a new way for bad guys to steal your ATM pin code using an iPhone without you noticing at all BUT there is a really simple way to prevent it from happening. Read More
Download our free mobile app Link to invision
© 2015 Pretection
075
DESIGNER_XUAN (JOANNA) ZHOU
Draft 3
○ Changed the layout:
the sections moved horizontally, like turning
pages, in order to make interaction between the objects more interesting.
○ Changed the purpose for the website: it was mainly for collecting fraud stories from users and summarizing them to remind more people to avoid risks of fraud.
Comments
○ The website had different style of interaction from my app.
○ The design style of the website did not show much connection with my app.
○ My main purpose of this topic is to educate people how to protect their payments, but the website did not support the concept.
076
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
Draft 4
○ Added education section to the website. ○ Created several homepage options by using the existent illustration style.
Comments
○ I hope the homepage can be designed into a more interesting way.
○ Maybe create an animation to show a city that people really live in.
077
DESIGNER_XUAN (JOANNA) ZHOU
Draft 5
○ Created a city illustration on the homepage. ○ Changed the secondary page design:
created an image to present a problem for
both report section and education section;
the highlight pieces in the image are clickable.
Comments
○ The design was more creative than before. ○ Considered making an animation on the homepage to add more interaction.
○ For user experience, people more like
reporting or discussing on their phones than on computers, so maybe move report section to the app.
078
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
Draft 6
○ Created an animation on the homepage. ○ For the solution page, changed images of actual operation screens to button icons.
079
DESIGNER_XUAN (JOANNA) ZHOU
080
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
GASOLINE GASOLINE
87
87 89
89 93
93
081
DESIGNER_XUAN (JOANNA) ZHOU
MFA GRAPHIC DESIGN THESIS_PRETECTION
Hous ouse Pizza House
ARK ARKET SUPERMARKET
Hotel
ATM
Garden Square Shopping Centre
Hotel Hotel
082
CHAPTER 4_DELIVERABLE DEVELOPMENT
SAFETY BANK
P
Pizza House Pizza House
Bar ar TAXI
Modern Bar
LIBRARY LIBRARY
083
DESIGNER_XUAN (JOANNA) ZHOU
Draft 7
○ Created some illustrations to represent
different types of fraud, and listed them by
time, which connects more to people’s real life. ○ Added one page for promoting my app, and user can download the app through the link.
○ For the solution page, added some images of actual operation screens to help users easily understand how to solve problems.
084
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 4_DELIVERABLE DEVELOPMENT
085
Connect all the powerful work together
Deliverables
DESIGNER_XUAN (JOANNA) ZHOU
088
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
089
DESIGNER_XUAN (JOANNA) ZHOU
090
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
091
DESIGNER_XUAN (JOANNA) ZHOU
092
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
093
DESIGNER_XUAN (JOANNA) ZHOU
094
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
095
DESIGNER_XUAN (JOANNA) ZHOU
096
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
097
DESIGNER_XUAN (JOANNA) ZHOU
098
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
099
DESIGNER_XUAN (JOANNA) ZHOU
102
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
103
DESIGNER_XUAN (JOANNA) ZHOU
104
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
105
DESIGNER_XUAN (JOANNA) ZHOU
106
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
107
DESIGNER_XUAN (JOANNA) ZHOU
108
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
109
DESIGNER_XUAN (JOANNA) ZHOU
110
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
111
DESIGNER_XUAN (JOANNA) ZHOU
112
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
113
DESIGNER_XUAN (JOANNA) ZHOU
114
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
115
DESIGNER_XUAN (JOANNA) ZHOU
116
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
117
DESIGNER_XUAN (JOANNA) ZHOU
118
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
119
DESIGNER_XUAN (JOANNA) ZHOU
120
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
121
DESIGNER_XUAN (JOANNA) ZHOU
122
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
123
DESIGNER_XUAN (JOANNA) ZHOU
124
MFA GRAPHIC DESIGN THESIS_PRETECTION
CHAPTER 5_DELIVERABLES
125
126
Thank You I would like to express my special appreciation and thanks to my brilliant instructors who have helped me get to where I am today. Thank you for your constant guidance and encouragement during my studies: Phil Hamlett, Mary Scott, Hunter Wimmer,
Jeremy Stout, Carolina De Bartolo, Bob Slote, Sandra Isla, Anne Kitzmiller, Stanley
Zienka, David Hake, Nita Ybarra, Michael Kilgore, Nadine Brown, Changying Zheng, Colleen McKee, Daniel Lang.
I would also like to thank my family and friends. Thank you for supporting me and
accompanying me through these fantastic years: Mom, Dad, grandparents, cousins, Li Li, Fin Wang, Hugo Ugaz, Adriana Toledo, Kailin Wang, Yu Rong, Andrea Novo,
Yanfat Yeung, Alberto Carvajal, Amal Alnaniah, Vincent Tam, Ming Liu, Tao Ren, Yan Lin, Yue Yu, Ming Li, Yufeng Xin.
127
Colophon Designer
Xuan (Joanna) Zhou Photography
Xuan (Joanna) Zhou Illustration
Xuan (Joanna) Zhou Contact 415.412.8427 jzhougraphic@gmail.com www.jzhougraphic.com Pretection website www.pretection.us Pretection app
128