Frustration_Process book

HYOJIN LEE | COMD 410 | Spring Process Book | 15. April. 2020

A language application that is a social and educational tool for English language learners

Grad project_Frustration HYOJIN LEE | 1

Table of contents

1.0 BACKGROUND RESEARCH

1.1 The Background 1.2 Survey 1.3 The Problem Space 1.4 Opportunity 2.0 DESIGN PLAN

2.1 Gantt Chart 2.2 User Scenario: Persona 2.3 References 2.4 Design Concept

03 04 09 10 11 13 14 15 16 18

3 .0 DESIGN: Deliverables

20

3.1 Logo 3.2 Poster 3.3 Animation 3.4 App

21 24 26 31

4.0 REFLECTION

40

Grad project_Frustration HYOJIN LEE | 2

1.0 BACKGROUND RESEARCH 1.1 The Background 1.2 Survey 1.3 The Problem Space 1.4 Opportunity

Grad project_Frustration HYOJIN LEE | 3

BACKGROUND RESEARCH 1.1 Background

English is the global language which dominates the capitalist, international societies in the world. Although people are not forced to learn the language, in order for many individuals to find good employment, they desire to master it. So, as a communication designer, I want to draw attention to this paradox in contemporary capitalist society, and present a possible solution that is accessible for English language learners-- especially Korean people in English speaking countries.

This is because Korean people who grew up in Korea have little to no experience conversing or communicating with English speakers from Western countries. Most Korean people struggle talking to English speakers, even though they studied English during their elementary and secondary education.

Grad project_Frustration HYOJIN LEE | 4

BACKGROUND RESEARCH 1.2 Survey I

SM0708

20

6h ours ago

10

During the first term, I researched the differences between Korean and English, and why Korean people struggle speaking English when they learn it. And, I conducted a survey to understand their lived experiences. While some of the responses were sad, I also gathered funny and relatable episodes through the survey.

Grad project_Frustration HYOJIN LEE | 5

BACKGROUND RESEARCH_ Episodes I gathered through research 1) The barista never understands me when I try to order

7) In Korean, “skinship” describes the physical affection

a french vanilla latte, so now I read the number on

between two lovers/romantic partners. But people in

the menu instead.

Western countries do not understand me when I say it.

2) One day, I used a facial mask to take care of my pores. But my friend thought I said I used a facial mask to take care

8) I sang “hot n*gga” in front of African American people, and I forgot to bleep out the n word.

of the poor.

9) When I saw my friend who I haven’t seen in a while, 3) I feel confused about the pronunciation difference between “cuisine” and “cushion.”

4) When I go out to eat, I have a hard time saying “burger” so I haven’t had a burger since I left Korea.

5) In one of my English classes, the teacher asked me if I had an English name. I said “not yet.” He misheard and now

I meant to say, “Long time, no see!” Instead, I said “Long time, long see.”

10) I have a hard time pronouncing “lover” and “rubber” because they end up sounding the same.

11) I think I am saying “snack,” but others think I am saying “snake.” I do not mean to say that I want to eat snakes.

he thinks my English name is Nadia.

12) I ordered a medium Sprite, but they gave me medium fries.

6) I mean to say kitchen, but I always end up saying chicken because they look and sound so similar to me.

13) When I went to McDonalds, I ordered ice cream. The cashier was close to give me iced tea instead.

Grad project_Frustration HYOJIN LEE | 6

BACKGROUND RESEARCH 1.2 Survey II_ Differences between Korean & English Difference in Language Root

Korean • The Ural- Altaic Language Family.

English • The Indo-European Language Group.

• Different spelling and different sound correspondences.

Phonetics

• In spite of each character having a different spelling, each Korean letter corresponds to a sound unit (phoneme), while letters in English can be pronounced in several different ways depending on the word.

• No silent letters.

• Korean has one liquid sound /ㅁ/ for

In Consonants

the English /L/ and /R/.

• 14 Consonants:ㄱ, ㄴ, ㄷ, ㄹ, ㅁ, ㅂ, ㅅ, ㅇ, ㅈ, ㅊ, ㅋ, ㅌ, ㅍ, ㅎ

• In English three consecutive consonants often come in the initial position.

Ex) Plight

• 21 Consonants: B, C, D, F, G, H, J, K, L, M, L, P, Q, R, S, T, V, W, Y, Z

• No pronunciation for /ↄ/.

In Vowels

In Stress

• Full, strong stress for vowel sounds.

• 5 Vowels: A, E, I, O, U

• A syllable-timed language.

• A stress-timed language.

• Each syllable is given the same emphasis

• The language follows a rhythmic

• 6 Vowels: ㅏ,ㅓ, ㅗ, ㅜ, ㅡ, ㅣ

in a word, and every word is pronounced

structure, stressing and unstressing

with the same prominence in a sentence.

certain words in sentences.

Grad project_Frustration HYOJIN LEE | 7

BACKGROUND RESEARCH 1.2 Survey II_ Differences between Korean & English

Difference in

Korean • The basic pattern of a Korean sentence is SOV (subject-object-verb).

• Although Korean has case-marking morphemes to designate the cases of

English • The word order is SVO (subject-verbobject).

• Sentence fragments do not have independent clauses or missing words.

the nouns and shows a more flexible Syntax

word order, the predicate always comes at the end of a sentence.

• Fragments generally have regular structures (not errors) with minimal extensions to make processing the standard language in casual

• Problem: To make an English sentence,

conversation easier and quicker.

Koreans have to make a conscious effort to change the word order from Korean to English.

Culture

• Problem: Non-fluent speakers can be somewhat confused about the meaning.

• Difficulty in understanding and using individual words, idioms, expressions, allusions and historical contexts.

*Cho, B. E. (2004). Issues concerning Korean learners of English: English education in Korea and some common difficulties of Korean students. The East Asian Learner, 1(2), 31-36.

Grad project_Frustration HYOJIN LEE | 8

BACKGROUND RESEARCH 1.2 Survey III_Summary Based on the research and survey findings, I found that there are five main differences between these two languages: consonants, vowels, stress placement, sentence structure, and culture.

As I mentioned earlier, I conducted a survey to gather anecdotal experiences, and to find out which words are difficult for English language learners to say. From this survey, I found that certain Korean alphabets are equivalent to certain English letters. For example, “ㄹ,” a Korean consonant, has two English equivalents, “R” and “L.” This example demonstrates that Korean speakers struggle to distinguish between the two equivalent English consonants or vowels. The word latte is one example of “ㄹ.” The word latte stresses many Korean speakers out when they are learning English. Because Korean only has one equivalent consonant for the “L” and “R” sound, they struggle with speaking words which include the confusing consonant or vowel equivalents.

So, these situations make Korean people avoid speaking in front of English speakers. As I mentioned before, this is because Korean people who grew up in Korea have little to less experience speaking with English speakers even though they studied English for many years. Also, the big gap between practical and academic learning is a point of frustration because these English language learners dedicate many resources to mastering English but still face obstacles.

Grad project_Frustration HYOJIN LEE | 9

BACKGROUND RESEARCH 1.3 Problem Space

Problem 1 Korean nationals are

not exposed or interacting with native

English speakers.

Problem 2 While many Koreans have

studied English all their lives, they still

struggle when in situations with English speakers.

Problem 3 The resulting anxiety and lack of confidence from problems 1 and 2 are difficult obstacles to overcome despite more time and resources dedicated to English.

Grad project_Frustration HYOJIN LEE | 10

BACKGROUND RESEARCH 1.4 Opportunity

How can I reduce the gap and help them?

Therefore, because of the problems and the frustrating moments between practical and academic learning, I continued asking myself, “How can I reduce the gap and help them?� Then, when I considered the important relationship between socialization and learning, I thought that an app which offers users anonymity, collectively shared experiences and empathy would be a good tool for them.

This is the foundation of my project.

The frustration app has two sections: one for users, and another for designers. Users can upload their experiences on the app, while the designers can choose a popular anecdote. Thereafter, designers can produce a video that presents the chosen experience relayed by a user. This interactive feature emphasizes the struggles and challenges that users face, while inviting empathy from English speakers in the app. In addition, users can recommend and share these produced videos and communicate with each other on the app, like YouTube.

Grad project_Frustration HYOJIN LEE | 11

Functions of the “Frustration” app for English language learners

Communication

• Upload their experiences on

Taking Action

• Check pronunciation.

the app.

with others.

• This interactive feature emphasizes the struggles and

• User engagement such as • Share moments of frustration

Emotional Support

challenges that users face, while

the ability to recommend and

inviting empathy among English

share videos and communicate

speakers in the app.

with each other, like Youtube.

• Designers can produce a video that presents the chosen experience relayed by a user.

Grad project_Frustration HYOJIN LEE | 12

2.0 DESIGN PLAN

2.1 Gantt Chart

2.2 User Scenario: Persona

2.3 References

2.4 Design Concept

Grad project_Frustration HYOJIN LEE | 13

DESIGN PLAN 2.1 Gantt Chart_ Spring Semester Schedule Dec.

Jan.

Feb.

Mar.

Apr.

Research

May. 6

Survey Design

Refine Design

6

Logo

26

Mobile App

26

Poster

26

Videos - App - Animation

User Testing

19

2

Mobile App Poster

Mockups

6

Mobile App Poster Videos - App - Animation Grad project_Frustration HYOJIN LEE | 14

DESIGN PLAN 2.2 User Scenario: Persona

• Persona: A Korean traveller • Age: 20 years old • Job: A Korean Official Three days after becoming a Korean official, a woman travelled around Canada.

One day during her trip, she went to McDonalds and confidently walked up to the cashier to order ice cream. However, the cashier could not understand her order.

After a few seconds, the cashier asked, “You want iced tea, right?”

At that point, the woman did not and could not order ice cream because of her Korean pronunciation of “ice cream.” This situation from the pronunciation barrier is the frustrating moment. With the Frustration app, she could have shared her experience and practiced the exact pronunciation of the word “ice cream.”

Grad project_Frustration HYOJIN LEE | 15

DESIGN PLAN 2. 2 Reference I HelloTalk

HelloTalk is an app that a language learner cannot

do without. It provides text and voice message functions, so the users can exercise the app’s built-in dictionary and translation services that help with automatic corrections.

In addition, the users themselves can provide help to other users from fellow learners and native speakers alike.

Strengths

• Users can learn by online chat.

• Search for language exchange partners by native language, city, distance, and more.

Opportunity • Focused on what users want to use it for.

• Text focused rather than speaking focused.

Weakness

• Text heavy.

• Chat focused rather than learning focused.

Threat • User can’t practice speaking.

Grad project_Frustration HYOJIN LEE | 16

DESIGN PLAN 2. 2 Reference II Cake

The “Cake” app helps people improve their English.

It is completely free and ad-free. Also, users can check their pronunciation with the “Cake” app’s AI speech recognition.

The user simply records their message and get immediate feedback. Also, the app allows a user to practice sounding like a native speaker while learning real English expressions curated from YouTube (updated daily).

Strengths

Weakness

• Users can improve their English without cost.

• Fun, exciting, and updated daily with short clips.

• Many resources can overwhelm users.

• There is a repeat after native speakers section G Allows

• Focuses on learning English without acknowledging the gaps between English and other languages like Korean.

users to repeat levels.

• Ad-free.

Opportunity

Threat • Because the application is strictly language, it does not

• Adding a section to introduce Korean culture.

spend enough time on the cultural knowledge that can not only make language learning easier but connect people and languages in a more meaningful way.

Grad project_Frustration HYOJIN LEE | 17

DESIGN PLAN 2. 3 Design Concept I_Four Key Words

Social

Shared

Empathy

Fun

30%

30%

30%

10%

My graphics are reflective of a video game style because I wanted to make learning English more interactive and entertaining. Learning and speaking English is like navigating a video game at times, and I wanted to make the design lighthearted to remind people that while it might be frustrating, it can also provide a good laugh as well.

Grad project_Frustration HYOJIN LEE | 18

DESIGN Deliverables 2. 3 Design Concept II_ Graphic style: Pixel Art

There are two reasons why I chose pixel art as my main graphic style: my cultural background and the symbol of community. Pixel means the smallest discrete component of an image or picture on a CRT screen. Based on this definition, a pixel stands for a person and pixels symbolize a group or a community. Upon close inspection of an image with pixels, each pixel is close together. As they are connected, the pixels form a drawing or illustration. This connection symbolizes that a person is included in a nation, which forms a cultural identity. And while growing up and maturing, a person meets and experiences different cultures. Through this process, a person builds up one’s own identity culturally or socially as a human being. So, all individuals have a different and diverse lifestyle, like a famous artist’s masterpiece. So, that’s why I chose pixel art as the graphic style for this project.

Grad project_Frustration HYOJIN LEE | 19

3.0 DESIGN Deliverables 3.1 Logo

3.2 Poster

3.3 Animation

3.4 App: Architecture Map

Grad project_Frustration HYOJIN LEE | 20

DESIGN Deliverables 3. 1 Logo I

f

More symbolic

Simplified&

& Simplified

More focused on rectangles

Draft 1

Draft 2

Final

The visual system of my design is based on the basic grid of the Korean alphabet in which a letter is placed in each square. The vertical and horizontal rectangular bars and small circle beside it represents Korean philosophy. I used these two elements to create all the writing in the app and used pixel art as an inspiration as well.

Korean Basic Writing Grid

By combining these components, I designed a logo for my app. The logo overlays the Korean alphabet “ㅍ” on the English consonant “P” and “F” since these letters are pronounced similarly among all the alphabet equivalents.

Grad project_Frustration HYOJIN LEE | 21

DESIGN Deliverables 3. 1 Logo II_ Color Scheme: 32-Color Pixel Art

#fe3b1e

#08a29a

#000000

#ffffff

RGB(99.6%, 23.1%, 11.8%)

RGB(3.2%, 63.6%, 60.5%)

RGB(0.0%)

RGB(100.0%)

Orangey red

Blue/Green

Black

White

Main

From Pixel art 32-color palette, I chose the colours reddish-orange for enthusiasm as the main colour and mysterious Emelard greenish-blue as a point colour. Also, the combination of these complementary colours is to highlight the differences in the two cultures. Additionally, the colour combination is playful but strong, which shows that despite the difficulties of learning English, it is also a fun challenge. In terms of vivid colours, some people say that this colour pairing between reddish-orange and greenishblue can tire out a user’s eyes. So, I decided to use a white background.

Grad project_Frustration HYOJIN LEE | 22

DESIGN Deliverables 3. 1 Logo III_ Typeface

Electronic Highway Sign

BODY Futura My graphics are reflective of pixel art, which is the part of a video game style.

This is because I wanted to make learning English more interactive and entertaining. I selected “Electronic highway sign” as the main font.

But I received some feedback for the graphic style. If all of the elements of the app and the poster have an 8-bit art style, the user will find it hard to read. So, I decided to use a geometric sans-serif typeface like “Futura” for the body.

Grad project_Frustration HYOJIN LEE | 23

DESIGN Deliverables 3. 2 Poster I

More focused on pixel art style

Draft 1 Draft 2 I use some Korean letters that have English consonant equivalents to overlay and visualize the conflicting moment between mother-tongue and second language while acquiring a new language.

Grad project_Frustration HYOJIN LEE | 24

DESIGN Deliverables 3. 2 Poster II

The posters are to promote the app titled “Frustration.” It includes a short description about the app: This app is an interactive space in which Korean people can learn North American English, and share frustrating moments from daily life anonymously.

The first poster shows a visual representation of the Korean-English consonant equivalents. Because some consonants have more than one equivalent, the blue-and-black overlay effect of the letters illustrate the confusion and frustrations these individuals feel.

The second poster presents the “Best Monthly Episode” feature in the app.

Depending on the key word chosen for that month, designers in the app produce an 8-bit video to help illustrate a user’s anecdotal experience, which they wrote about and posted.

The third poster shows the creative details and select features of the app. For example, the 8-bit icons which imitate a video-game effect, user experiences, and the practice section.

Grad project_Frustration HYOJIN LEE | 25

Size

45 by 83 inch

Printing type Inkjet Printing for RGB colours Program used Adobe illustration

The first poster

The second poster

The third poster Grad project_Frustration HYOJIN LEE | 26

DESIGN Deliverables 3. 3 Animation I

https://drive.google.com/file/d/1iDkvYas_uGMNMvgy82vixv95gjnEWHH7/view?usp=sharing Size

1920 x 1080 (1080p) / 29.97 fps

Program used Adobe Photoshop

Designers can produce a video that presents the chosen experience relayed

Adobe Illustrator

by a user every month. And this animation allows the app user to recognize

Adobe After effects

the situation and empathize with them.

Adobe Premiere Pro Grad project_Frustration HYOJIN LEE | 27

DESIGN Deliverables 3. 3 Animation II_Intro video

Korean alphabets, “ㅂ” and “ㅍ” are categorized in the same group based on the Korean phonemic principle. This introduction video demonstrates how to write the Korean alphabets, “ㅂ” and “ㅍ” and the English alphabets, “P” and “F.”

Grad project_Frustration HYOJIN LEE | 28

DESIGN Deliverables 3. 3 Animation III_Transit video

When learning a new language, a person can feel like one is entering a tunnel with a little flutter. A new story begins when being able to completely match their mother tongue to a new language.

Grad project_Frustration HYOJIN LEE | 29

DESIGN Deliverables 3. 3 Animation IV_ The Process of Making an Animation

1. Draw a picture or take

4. Use the rectangle grid tool

a screenshot from a video

and the live paint bucket

online that has a desired

tool.

scene background.

2. Paste the screenshot into

5. After making several pixel

Photoshop, and use the

art pieces, open them on

mosaic effect to pixelate

Adobe effects to make

the image.

several videos, while adjusting some effects.

3. After pixelating the image, open the image in Adobe Illustrator to create a pixel art. Then, refine some factors like the tone, or a key characteristic of

Then, open the art pieces in Premiere Pro to connect them all together.

Finally, add some effects and sounds.

the figures.

Grad project_Frustration HYOJIN LEE | 30

DESIGN Deliverables 3.4 App I_ Mock-up

https://drive.google.com/file/d/1vz7ZE4rtwml-zZhiLYsMAsN3J77uCCCY/view?usp=sharing

Size

Iphone6

Program used Adobe XD Adobe Illustrator Adobe Premiere Pro

The app has four menu sections: Home, Explore, Chat, Profile. With these fuctions, the app helps users socialize actively and promote learning pronunciation of some English words that are hard to speak.

Grad project_Frustration HYOJIN LEE | 31

DESIGN Deliverables 3.4 App II_ Make a mock-up of the app

https://docs.google.com/ forms/d/1qX2IFOW1fKFtvgiXCmDVBmXF3fkQItNPgHI8GX5bPs/prefill

1. Conduct a survey to gather other’s personal stories via Google Forms.

2. Sketch the architecture map and pixel

3. Make a Mock-up of the app on Adobe Xd.

icons for the app on Adobe Illustrator and get feedback from the printed sketch.

Grad project_Frustration HYOJIN LEE | 32

DESIGN Deliverables 3.4 App III_ Architecture Map: Loading section

The first scene has the logo.

Upon loading the app, users will see the main logo and the word frustration.

Then, when they click the screen to enter the app, users will see a new page with a few words like pork, fork and vanilla. The words run in different directions to showcase this frustration and struggle. It represents the interaction of language for a foreigner learning English.

Grad project_Frustration HYOJIN LEE | 33

DESIGN Deliverables 3.4 App III_ Architecture Map: Main social section

Once the main page loads, users will see the different sections. In the “Today” section, users will see a thumbnail to a video, which promotes the month’s featured anecdote produced as an 8-bit video. As users scroll down, they will see a subsection titled “New Experiences’’ which provides other users’ experiences in which they struggled to be understood by fluent English speakers. Users can like these anecdotal experiences by clicking the heart button. When users scroll down further, another subsection titled “Popular Experiences.” Here, they can see the most popular anecdotes shared by others on the app.

On the right side of the top bar, a bell icon indicates notifications users may have, such as mentions from other people. A new post icon hovers above the green menu bar at the bottom of the app’s home page. Here, users can post their personal experiences to share with the community, which will show up in the “New Experiences” subsection. Also, they can attach a photo, and add the location of where this moment took place. Users can choose to pin a post they publish on their profile page.

Grad project_Frustration HYOJIN LEE | 34

DESIGN Deliverables 3.4 App III_ Architecture Map: My list

“My List” is the other section, which includes users’ activities, including videos they liked and comments they liked. Users have the option to narrow down their activities, clicking on “Likes” to view the posts they interacted with. Then, in “Bookmarks,” users can see the videos or posts they bookmarked. Users can also sort the content they see in this section. For example, if users wish to see posts from weeks ago, or content which are ongoing and active. Also, they can select the date range of their favourite content. Each item in the “My List” section has three buttons on the right side. This button offers users to remove an item from the list, or share it through email or social media platforms like Twitter.

Grad project_Frustration HYOJIN LEE | 35

DESIGN Deliverables 3.4 App III_ Architecture Map: Educational section

When users choose to watch the month’s featured episode, they will have the option, through the three dots at the right corner of the video, to turn on subtitles, autoplay, and keyword repetition.

As well, they can bookmark the video by selecting the three dots next to the key word of the particular video — for example, “latte.” When users scroll down, they can click on the sound button next to the keyword to listen to the English pronunciation. Then they can record their pronunciation as a means to practice by clicking the “start speaking” button. If they pronounce the word correctly, the app will register it and indicate their success. Below this speaking subsection, users will see a pronunciation guide for the keyword, which offers a visual guide of the mouth for specific instructions. Once they are finished with the video and pronunciation learning, users can exit out of the page by clicking the v-icon on the top left corner.

Grad project_Frustration HYOJIN LEE | 36

DESIGN Deliverables 3.4 App III_ Architecture Map: Explore

Users can search other words they wish to learn or read about by clicking the “Explore� page on the green menu at the bottom of the home page. Here, users can choose words the app recommends based on the algorithm, or they can manually search topics for new words. Upon finding their desired word, they can add it to their list by clicking on the three dots.

Grad project_Frustration HYOJIN LEE | 37

DESIGN Deliverables 3.4 App III_ Architecture Map: Chat

The app also features a chat section, which they can access in the green menu bar. Here, they can invite new users to chat by searching for their ID, name, or email. Users can also narrow down individuals they want to interact with by choosing the age range, gender, region, or city.

Users also have the option of leaving a chatroom with a user by clicking the “edit” button, and then, selecting “leave.” The chat feature also allows users to sort the conversations based on time, the unread status, or favourites.

Grad project_Frustration HYOJIN LEE | 38

DESIGN Deliverables 3.4 App III_ Architecture Map: Profile

The last section in the green menu bar is the user’s profile page. Here, users can customize their profiles, which shows their usernames, contact information and biographies. Users can also select their native language, their gender, birthday. Users can change the app settings, like notifications, privacy, chat settings, and recordings.

Grad project_Frustration HYOJIN LEE | 39

4.0 REFLECTION

Grad project_Frustration HYOJIN LEE | 40

REFLECTION Finishing the project...

As I was finishing the process book, I recalled the journey it took to get here including all the new programs and skills I worked on over the past year. When I first started this project, I dreamed of having an impressive graduation show. However, it is unfortunate that the exhibition is cancelled because of the pandemic. Although the graduation exhibition that I dreamed about and prepared for is not happening, I am happy to be finishing my project successfully. Throughout working on the project —I realized that multinational people, who have expressed interest in my project —could My sketch of the exhibition.

not pronounce certain words when learning English. I think that there are many reasons for this learning gap. But after people became interested in my project and listened to my description of it, they gave me positive responses.

I would like to say that this graduation project has accomplished its purpose.

This project started as a way to express my story but I am grateful that it became more than that.

Finally, without the help of my true friends, Nicole and Funan, who I met in Canada, I believe this work would not have been successful. Therefore, I am so thankful for their support and endless help.

Grad project_Frustration HYOJIN LEE | 41