Pre-tection process book

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