emot case study book

Amy Chiang 03703530Academy of Art University Web Design & New Media

Final Review 2015. 04. 28 1st Submission

EmotThe best app for kids to learn emotions

Table of Contents

Technical Process55

Introduction01 AutobiographyResumeElevator PitchThesis Abstract

Proof of Concept07 Concept VideoStoryboards

Strategic Process14 Competitors Analysis & MatrixInspiration Target Audience

Visual Process27 Visual InspirationMood boardsDesign guidelinesProgression

UX Process39 Target AudiencePersonasInformation ArchitectureUser Testing

Next & Conclusion59 Next StepConclusionDirected Study Highlight

Click on the section you want to read!


IntroductionAutobiography / Resume / Elevator Pitch / Thesis Abstract

My name is Yu-Hsin Chiang. The pronunciation is similar to “you shing John”. For the convenience of introducing myself and buying coffee, people call me Amy too. I was born and raised in Taiwan, which is a small island with the best health insurance and the lowest birth rate in the world. I am the youngest kid in my family. The key person who inspired my passion toward design is my sister who studied visual communication design. She showed me many professional examples and explained why they were good to me. It was the beginning of the story, and it definitely changed my life.

Because of her inspiration, I chose Visual design as my major in my college I also had an interest in color, typography, grid, and layout. My interest of design turned from curious to enthusiast and my passion got stronger too. However, the second turning point came in my life. A movie about rainforest resource depletion spurred me to learn Web design and I decided to devote myself to a new digital world.

AutobiographyMy favorite difference between web and visual design is user orientation. The thing I create has a high possibility to be used by other people, so I have to think carefully. I have to think how to make my works understandable, not just the content, but also every bottom, color, navigation, sign and color. My works will really interact with people, not just in a one-way direction.

To think and to make something from the users’ perspective is really interesting thing for me because I can learn a lot from their opinion. Just like actors, they can experience other people’s life by acting because they behave and speak in that character. In the future, I will still stick with design, but I will definitely focus more on how to make my works functional but still friendly for my audience.

2

I am an innovative UI/UX designer, graphic designer and illustrator with an eye for detail. Not only am I fluent in responsive Web and app design, but I also specialize in design strategy and the user-centered design process. As a brainstormer and prototype maker, I am always looking forward to working with people with a wide range of backgrounds.

Summary Work Experience

Education

Skills

Awards

Sep 2014 - Jan 2015

Yeti LLC, San Francisco, CA Design Intern

• Collaborated with designer team, product managers, and software developers to design outstanding app/website for clients

• Assisted design team in information architecture process, user experience strategy, analyzing the needs of target audience

• Generated wireframes and prototypes• Assisted in creating product design elements such as icons and illustrations• Joined Yeti’s council meetings

Aug 2014 - Jan 2015

Chinatown Community Children’s Center, San Francisco, CAWeb Designer

• Helped CCCC redesign their current website and develop a new design strategy including information hierarchy, sitemap, and website interface

• Programmed CCCC’s website with hand-written HTML/CSS, Bootstrap grid template, JavaScript and Facebook API

• Communicated and discussed the content with board members and educators

Feb 2012 - Aug 2012

Self-Employed, Taipei, TaiwanGraphic Designer

• Designed logos and menus for small businesses

2011 - 2012

Hong Dai Co., Ltd, Taipei, TaiwanDesign Assistant

• Assisted designer in collecting graphic materials and cooperated with designer to make brochures, logo and advertisement

Master of Arts in Web Design & New Media (Sep 2012 - Present) Academy of Art University, San Francisco, USA

Bachelor of Design in Visual Design (Sep 2008 - Jun 2011)National Kaohsiung Normal University, Kaohsiung, Taiwan

Wireframes, prototyping, user personas, sitemaps, task flows, storyboards, visual mockups, usability testing, style guide, visual design, web and app interface design, low to high fidelity prototype, iconographic, illustration

HTML, CSS, jQuery, PhoneGap, Bootstrap, Wordpress

Pen & paper, Adobe Illustrator, Adobe Photoshop, Adobe InDesign, Adobe After Effects, Omnigraffle, UXPin, Sketch, Coda, CodeKit, InVision, Five-second Test

Academy of Art UniversitySpring Show Selection 2014• App Concept Video• Group Project Proposal: Click Creative

[email protected] Washington St., Apt.6, San Francisco, CA 94108+1 415 340 9014

Amy Chiang

UX

Code

Tools

3

Elevator PitchIt’s a whole new generation of learning, but you would be surprised how few interactive tools there are for kids to learn emotions. Most educators and parents are still using still images like posters and flash cards to teach emotions, but we all agree that emotions have more than one expression, right? I am not saying that children should learn emotions from an app, but I believe that children can definitely learn more and explore more through current technology. Emot is a perfect tool for kids. It’s not only safe but also fun for both parents and their kids. It’s features are specifically for teaching and exploring facial and emotional expressions. My success is not when I see children managing their emotions well, but when I see them making funny faces when they are playing Emot app.

“Emot is an app for kids to learn emotions and facial expressions while having lots of fun.”

4

Thesis AbstractEmotion development is more important than we thought. Just like learning language, everything we learned in the early age affects our entire life. If people manage their emotions and express themselves well in their early life, their confidence is higher and their personality is more positive too. That is just like one of my favorite quote from Joel Osteen, “Choosing to be positive and having a grateful attitude is going to determine how you’re going to live your life.” Age around 3 to 6 is a crucial period for learning emotions and expressions. I want to make a game for kids to learn how to deal with emotions. I want to make a game for them to learn emotions.

5

Statement of InterestDuring my year teaching experience of art, I was not only teaching those young little kids but also taught by them. I explored more about different needs for different ages. I observed from three different angles, teacher, parents and kids. As a teacher, the subject you teach is always less important than kids themselves. I had to consider the safety of the environment, parents’ education style, communication among kids and different personality of kids. The most challenging thing was to engage with every kid and deal with his or her uniqueness. Not just for me, but also for parents too. Parents sometimes had difficulties dealing with kids because they were also learning what their kids were thinking. The last angle is from kids. Kids in the age around 3 to 6 always try to show or share their behavior, movement, drawing and the works they have done to their family members. They want full attention of the people they love, and it can cause some behavior problems if they get too much or too less attention.

Now I am in the MFA of Web Design & New Media. I would like to compile my teaching experience before, design & illustration skill and my coding skills to create something fun, meaningful and educational for both kids and parents.

6


Proof of Concept

Proof of Concept Video

PLAY

The best app for kids to learn emotions

8

https://vimeo.com/126084511

Proof of Concept Walk-through Video

PLAY

9

https://vimeo.com/125659897

I designed three emotions game in my app to demonstrate three different type of feelings. Shy represents as neutral emotion. There are many situation kids feel shy, so this interactive game is designed for teaching and encouraging kids to share their feelings. nunc id risus elementum scelerisque non F

First part of every game is always animated vocabulary with corresponding emotion expression.

Second part is vocabulary learning. I provided both synonyms and simple definition for broadening their knowledge. For younger preschoolers, they can simply listen to the audio and watch the animations.

The text on the top is always a hint for the game. Kids can tap on the card to encourage the character to share his feeling.After this game, kids have to click on “Next“ to next page.

Next page is camera page. Children will see a picture base on previous story. It’s like “playing a role” game. Use your imagination and put in your own expression for this character.

Proof of Concept

I feel shy.

10

Sad is the negative emotion learning game in this app. Feeling sad is normal, there are many bad feelings in life. However, how to make yourself recover and feel better is an essential skill. I make the story very close to kids’ life experience, so children can imagine the situation easily.


The girl felt sad because she just dropped her ice cream. How can you make her feel better?This is a game designed for cultivating kids’ empathy. After this game, kids have to click on “Next“ to next page.



Proof of Concept

I feel sad.

11

Happy is the positive emotion learning game in this app. Many kids learn their first emotion word from happy, so they are fairly familiar with this word. For the interactive game, I want to emphasize the importance of sharing, and spread more happiness to people around them.mentum tempor. trices,


“Share strawberries and happines with your friends“ Strawberries used as a metaphor for the happiness, so children can actually share “happiness“ to others in this game.After this game, kids have to click on “Next“ to next page.



Proof of Concept

I feel happy.

12

Click on the gear icon on the left-top corner, and you will see a big pop-up show up.

What’s this?! This is the parental conctrol function.Answer a math question to access to next page. I explained the design purpose on the bottom, so parents won’t get panic too much when they see it.

After parents passed the little quiz, they will see this interface. On the page, users can learn more information about this app, share this app to social media, change the setting or report a bug. On the right column, users can scroll down to see more info.

Proof of Concept

Parental Control

13


Competitors Analysis & Matrix / Inspiration / Target Audience

Strategic Process

Unique PositioningStatementWe all know that learning emotions is one of the most important skills

for kids, so I made this interactive game to cultivate kids’ empathy and

explore their own facial expressions. By taking photos with different

background themes, children learn how to put themselves in other

people’s shoes. All the games designed for this app are 100% safe for

kids. Compared with most of the emotion learning apps in the market,

Emot shows more balance between entertaining and educational

purpose.

Topic category: educational

15

Competitors

Based on the audio on the page, kids tape on the picture with the corresponding answer. After users tape on the picture, the app will respond the answer is correct or not, so users can learn different emotions through this game. Users can personalize the content by adding their own photo on the setting page. App Interface is pretty simple and straightforward.

• Easy to play• Users can customize content• Clean design• Sound• Free

• No animation• Limited interactions• Visual interface need improving• Low entertianing level

Touch and Learn Emotions

Pros

Platform

Cons

By Innovative Mobile Apps

16

Competitors

This game obviously has nice illustrations and interactive animation, but users can’t really recognize emotions through the animal’s face. Users can drag the objects under the screen to the animal, and the animal will have different reactions on different objects. It is a highly entertaining game for kids, but the education function is relatively weak.

Avokiddo EmotionBy AVOKIDDO

• Cute illustrations• Vivid colors• Playful games• Lots interactions• Music and sound are funny

• Can’t recognize facial expressional well• Can’t learn emotion related words• More like an entertaining function app

Pros

Platform

Cons

17

Competitors

This app has a younger target audience. All the interactions in this app are tape. Each monster in the page shows different emotions, and their facial expression changes to a smile if users tape it. The interesting part of this game is the secret camera. The secret camera takes a photo of users without them knowing, and only people who can pass the kids protection function can share or edit the photos. All the animation and interface are well done.

Make me SmileBy Third Bird Party!

• Cute animations and sound• Good interface design• Interaction is simple (only tape)• Secret camera function• Children protected function

• Can’t learn the word for the emotion• Limited interaction• All animations has the same reaction

Pros

Platform

Cons

18

Competitors

The function and purpose of this app is very simple. Users can learn the vocabulary of their feelings through this game. Users have to drag the letters to the correct position and it will show a simple animation like spinning or moving cartoon character. The interface and illustrations in this app need improving, but users can still really learn something from the app.

First Words FeelingsBy Learning Touch LLC

• Clear concept• Bright colors• Users can learn vocabulary• Sound

• Poor animations• Limited interactions• Visual design need improving• Relatively expensive ($1.99)

Pros

Platform

Cons

19

Competitors’ Matrix ChartFully supported Partially supported No support

Interactive

Cute illustrations

Camera function

Music & Sound

Kid protection

Learning words

Learning emotions

Customization

Animations

Friendly interface

Platform iPhone & iPad iPhone & iPad iPad iPhone & iPad iPad

20

Competitors’ Analysis

• Interaction• Cute illustrations• Sound & Music• Animations• Intuitive Interface Design

Camera interactionsIn order to encourage kids to explore their own face and emotion, the camera interaction function allows kids to make faces and have more fun.

Children protectionOnly people who pass the children protection can share the information to social media such as facebook or email.

Interactive AnimationsThrough the interactions like sharing and giving, the sense of sympathy could be cultivated.

What is the uniqueness?

and......

Interactive

Cute illustrations

Camera function

Music & Sound

Kid protection

Learning words

Learning emotions

Customization

Animations

Friendly interface

Platform iPhone & iPad iPhone & iPad iPad iPhone & iPad iPad

21

Content Research

Why it’s important for kids to learn emotions?

• Sturdy foundation for future social development• Extension of empathy• Resolve conflicts without physical aggression• Increases self-awareness and self-esteem• Emotionally mature children perform better in school

Prime time to learn emotions

• Start to climb, grasp• High curiosity

• Two basic emotions: happy & unhappy

• Crying, laughing and body language

• More emotions

• More self-aware

• Improved verbal ability

• Lack of vocabulary

• Emotional Awareness

• School & Peers

• Independence

• Confidence and Insecurity

First 3 months 3 months & up 3 years old 6 years old

22

Content Research

• Emotional and Facial Expressions concept• Explain the feeling by using words children can easily understand.• Role Play Game: practice how to show their feelings• Feelings words

How teacher teach emotions nowadays?

What do they teach?

Some common words teachers teachBrave, Cheerful, Bored, Confused, Surprised, Curious Proud, Disappointed, Frustrated, Embarrassed, Silly, Excited, Uncomfortable, Fantastic, Worried, Friendly, Stubborn, Generous, Shy, Ignored, Satisfied, Impatient, Safe, Important, Relieved, Interested, Peaceful, Jealous, Overwhelmed, Lonely, Loving, Confused, Tense, Angry, Calm

Most of the teachers in the classroom are still using traditional paper tools such as posters, flash cards, illustration drawings. Images on the right side demonstrate a good overview of typical emotion education.

I noticed many tools are not interactive which is weird for me, because human’s expressions should be dynamic. Also, many tools requires a lot of preparation time for teachers, but look easy to be broken by kids.

URL: http://csefel.vanderbilt.edu/documents/teaching_emotions.pdf

23

Content Research

Why it’s important for kids to learn emotions?

• Sturdy foundation for future social development• Extension of empathy• Resolve conflicts without physical aggression• Increases self-awareness and self-esteem• Emotionally mature children perform better in school

Survey from the parents who have at least one kid under age 6.

80%parents think emotion learning is important for kids.

90%parents who have tablets say their children use the devices or have their own.

70%parents believe kids can learn something by playing games.

Resource: The Center on the Social and Emotional Foundations for Early LearningURL: http://csefel.vanderbilt.edu/

24

Inspirational App

The Look at Me Project is a samsung platform app for helping Autism kids and their families. This project aims to improve an individual’s ability to make eye contact. The kids stay motivated and highly concentrated by using the camera function. This interface is very simple and the purpose of this app is meaningful too. Emot app shared quite a similar camera page interface, so I was surprised by the reason behind the design.

Samsung LOOK AT MEBy SAMSUNG LOOK AT ME

Samsung Galaxy S3/S4/S5Samsung Galaxy Note 2/Note 3/Note 4Samsung Galaxy Zoom/Zoom2Samsung Galaxy Tab S

Platform

25

Inspirational App

This app uses users’ photos to tell the story that everyone is unique and special. After I played this game, I was surprised by their cute interactions and animations.

Wee You – ThingsBy Wee Society LLC

Platform

26


Visual Inspiration / Mood boards / Branding / Design guidelines

Visual Process

Inspiration for Visual Design

Sesame StreetReasons:• Long history on children education• Variety kinds of learning applications for kids• Popular among kids and adults• Clear visual and identity design• Award-winning and trustworthy brand• Provides lots of online resources for families, designers and

developers • Lovely characters learn with children

28

Inspiration for Visual Design

Reasons:• Super simple but cute• Convey a clear idea with image• Vivid color• A lot of funny characters• Chlldren can draw every character easily• I love it!

Mr. Men

29

Mood Boards

30

LogoFinal Logo

R=125 G=88 B=134

C=58 M=75 Y=22 K=4

#7D5686

R=243 G=200 B=56

C=5 M=19 Y=90 K=0

#F3C836

R=238 G=120 B=70

C=2 M=65 Y=80 K=0

#ED7745

R=75 G=187 B=203

C=64 M=4 Y=19 K=0

#4ABBCB

31

Emot

Branding


The best app for kids to learn emotions

32

Branding R=125 G=88 B=134

C=58 M=75 Y=22 K=4

#7D5686

R=243 G=200 B=56

C=5 M=19 Y=90 K=0

#F3C836

R=62 G=136 B=162

C=77 M=35 Y=27 K=1

#3E88A2

R=238 G=120 B=70

C=2 M=65 Y=80 K=0

#ED7745

R=70 G=91 B=100

C=75 M=54 Y=48 K=24

#465B64

R=75 G=187 B=203

C=64 M=4 Y=19 K=0

#4ABBCB

ABCDEFGHIJKLMNOPQRSTUVWXYZ

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz




ITC AVANT GARD GOTHIC

CUBANO

33

Sketches & Mind-maps

34

Sketches & Mind-maps

35

Character Design

Peter Beta Amy Mike Tommy LILY

36

Version 1 Version 2 Version 3

37

Top: 3%

Top: 30%

Left: 3%

40 px 40 px

Final Design Guidelines

38

Width: 50%

500 px


39

Left: 3%

Right: 3%

Top: 3%

Top: 31%

85 px


40


Target Audience/ Personas / Information Architecture / User Testing

UX Process

Target Audience

The Secondary Target Audience

The Primary Target Audience

Toddlers & Preschool kids

Parents and Educators

• 3 to 6 years old: the best age to explore their emotions.• Learn through playing and exploring.• All income level families: Emot is a free app for people to

download.

• Age: Unlimited.• People who need a proper resource for teaching or educating

topics related to emotions• Simply give a nice app for kids to have fun.

42

Personas

BiographyMark is a little boy who is always curious about everything. He wants to explore different things in his life, and shares with his mom and dad. In school, he can play with others kids, but he sometimes feels bored in the home because his mom is busy. Mom sometimes give a ipad to him for playing games and learning. His mom is really careful about the choices of games, so he can only play the games with child friendly or child protection function.

“I want to play more games!”

Age4 years and 6 months

Mark, M

OccupationSon

LocationSan Francisco

ActivitiesMark play with other kids in the art talent class. He is highly creative about everything around him. He likes to share what he did or created with his parents.

Social InteractionTwice in a week, Mark went to talent school with mom, and he played with friends with similar age.

IncomeParents’ income total is around $50k

DevicesMark doesn’t own any gadgets, but his mom sometimes lets him play some games through an iPad and a smart phone.

MotivationHe wants to play more game, but mom is pretty picky about what kind of games he is playing.

43

Personas

BiographyRebecca loves her kids a lot, but she can’t stay with her children all the time because she has to separate her time on working too. She also noticed that the five years old kid became more emotional because of a newborn sibling. She is worrying about her 5 years old introvert kid might feel uncomfortable when she is taking care of the newborn baby. She hopes her son can express his feeling more.

Age30 years old

Occupation1 years and 5 years old kids’ mother/ Project manager in game company.

LocationSan Francisco

ActivitiesRebecca and her husband are both full time workers. In order to balance their works and family time, they spend most of their leisure time with their kids. Rebecca and her husband like art and design, so they go to museums sometimes.

Social InteractionAfter she had the babies, her social life became less than before. Most time she spend time with family, and once in a while she hangs out with her friends from college before. Rebecca and her husband now still maintain the habit that watch movie together for taking a break from overwhelming life.

Income$110K

DevicesiPhone, Nexas7, iPad air, Laptops

Motivation Rebecca’s 5 year-old kid was used to using smart phone and high tech products. She thinks it is better to find some nice resources for him to play with. Rebecca has high expectation about games because she works in a game company.

“I hope I can find a nice game which can encourage my daughter to be more comfortable to express herself.”

Rebecca, C

44

Personas“I expect an efficient tool for me to teach emotions and expressions. Easy, simple and fun would be perfect for my students!”

Biography: College, he devoted himself to teaching. After 12 years teaching, he decided to get a master’s degree of psychology for enhancing his skill. He is a open minded teacher who is willing to use the latest technique or resource for his students.

Age37 years old

Peter N

OccupationSpecial Education Teacher

LocationLos Angeles, CA

Activities:He is studying for his master’s degree of psychology now, so he has to go graduate school twice a week. He loves reading, writing, movies and soccer. For exercise, he goes to the gym twice a week.

Social Interaction: Peter always shares his teaching experiences online with other special education teachers. Discussion with others helps him to get more teaching resources and refreshes his passion on teaching.

Income$50K

DevicesiPad 3, Windows system computer, iPhone 4

MotivationPeter wants to teach emotions to his students interestingly, not just reading books or texts. He expects a resource that can make some interaction and very simple to use.

45

Sitemap

0.0

1.0 2.0 3.0

0.1 0.2

Password Settings Page

1.1

1.2

1.3

1.4

2.1

2.2

2.3

2.4

3.1

3.2

3.3

3.4

Happy

Animation for happy

Vocabulary learning

Interactive game

Camera Page

Animation for shy

Vocabulary learning

Interactive game

Camera Page

Animation for sad

Vocabulary learning

Interactive game

Camera Page

Shy Sad

Home page / Menu

46

User Testing Challenges

Problems

Solutions

Results

Where & How to approach children?I don’t have any friends who has kids in San Francisco, so I had a hard time to find a kid. I tried to call many preschools and kindergartens for more possibilities, but they are strictly protecting their kids from strangers. I have no idea how to do my user testing.

I decided to volunteer at a non-profit organization in San Francisco called Chinatown Community Children’s Center. I went through some process like TB test and basic heal check for working there, and finally got closer to children and preschooler teachers.

1. Can preschoolers (3-5yr) use camera function?

• 4-6 years old children is proficient in using iPad and camera• 3-4 years old children might need a grown-ups quides them first

For retake photo and invert camera icons, some 3-4 yr kids might not understand how to

use. Depends on how early the kids start using gadgets.

• Example of a 2 years old user using iPad mini and take a pictue (Time: 3: 13)

2. Will they make their happy, mad, shy, sad faces?

• Yes, they do. They are so willing to make faces.• Example in the class (Time: 0:33)

47

https://www.youtube.com/watch?v=4yIXZgRHQs0

User Testing Process

Phrase TimeTarget Number of people Prototype Results

Survey Parents July, 2014 10 Tested throughGoogle Doc.

Interview Preschool teacher Aug 13, 2014 2 Tested through Invision App

Interview Parents Aug 13, 2014 1 Tested throughInvision App

Interview Preschoolers Aug 18, 2014 2 N/A

A/B Testing Preschoolers Aug 21, 2014 2-4 Two design style images

5 Sec Test

Reaction of Camera function

Random people online

Preschooler

Mar 31, 2015

Apr 05, 2015

20

1

Tested throughUsability Hub

Tested throughPhoneGap App

• Most parents think emotion learning is important

• They are willing to download&pay

• Concerned the content is too sparse• Maybe too difficult for 3 yr kids• Excited to see more interactive

teaching tools

• Very supportive about this idea• Excited about using camera function

to explore kids’ own expressions

• Discovered their visual perferences• They couldn’t focus too long• Interested in digital products

• Monster seems too vague for them• Human characters connect better

with their life experience

• People got distracted by too many colors and designs

• Camera function isn’t obvious enough

• Needed help at the first time• Correctly responded to the camera

function

48

Results of User Testing

shockedshocked

HappyJealous

Mad

Saddipressed

Before

After

1. Setting Icon: I changed the setting icon from hamburger to gear, because the gear icon conveys a clearer visual language of setting.

2. Menu/Home page layout: My previous layout is good and playful for seeing all the emotion learning games. However, it’s too hard to program. I decided to give up the fancy 3D home page design. The new design is mobile friendly, so users can easily swipe and see different options.

49


Before

After

In my previous design, you will see a greeting page (left design) after you select an emotion learning game. I didn’t animate the word itself. The latest design, as you can see on the top, every word is animated with the corresponding emotions, which leaves a strong impression on both expressions and words.

50


shockedshocked

HappyJealous

Mad

Saddipressed

Before

After

1. Scroll down: Scroll down gesture was not familiar and obvious on this interface for some users, so I changed it to a button.

2. Password: Font size and overall content was too small and compressed on the top. New password code with simple counting formula adds more playful feeling.

3. Visual Hierarchy: New design with darker background really seperates the parental control content from other pages.

51


Before

After

1. Content simplification: I don’t want my little users get attracted by the setting page. This page should not look too fun and playful, so I redesign this page with more plain text and less color and images. I simplified the design from multiple tabs to one page design too. On the new interface, content looks cleaner, clearer and more manageable.

52


Before

After

1. Icons from hollow to solid: Solid icons is more clickable and visible after the user testing. Solid icons with vivid color pop out well on every page.

2. Take a picture process: I simplified the elements on the camera page. Many teachers and parents considered those functions too advanced for children.

3. From follow mine to make your own expressions: Children’s creativity is a gift. I changed my design from mimicing character’s face to creating their own faces.

53

Camera Page UI/UX Design V.1 Camera Page UI/UX Design V.2

Camera Page UI/UX Design V.3 Camera Page UI/UX Design V.4


54

UX Process - User Flow

Before

After

Home

Help Settings Music

Album Edit photos Videos Share

0.0

0.1 0.2 0.3

0.3.1 0.3.2 0.3.3 0.3.4

0.0 0.1 0.2

Password Settings PageHome page / Menu

Deleted

Parental Control function for grown-ups

55

UX Process - User Flow

1.0 1.1 1.2 1.3

Game Take a photo AnimationEmotion

0.0

1.0 1.1 1.2 1.3Animations with

emotion expressionsWords learning Interactive game

1.4

Camera pageEmotion

Home page / Menu

0.0

Home page / Menu

Before

After

Learning emotional expressions, words, definitions Focus on cultivating kids’ empathy

One interactive emotion learning flow for children

56


Technical Process

Technology Specification

Data Diagram

Project Form: iPad appProject Platform: iPad2, iPad Air, iPad miniFor the best performance, please consider using iPad mini with the latest IOS operating system.

Phonegap Developer App

IOS

• Illustration drawings• UI design• Visual Design

Adobe Illustrator

User Testing

• Interactive animations

• Camera function• Mobile app simulation• Integrate HTML/CSS/JavaScript to mobile app

• Share function ex. Facebook API• Basic Responsive Design• Basic page design

Adobe Edge Animate

HTML5/CSS/JavaScript

Phonegap/Cordova

58

Technology Used

Adobe Edge Animate CC 2014 app v.4.0.1By Adobe system Inc.https://creative.adobe.com/products/animate

Resources used with Edge Animate:

Purposes & Reasons:

JQuery 2.0.3http://jquery.com/

JQuery UI 1.10.4http://jqueryui.com/

JQuery Mobile 1.4.5http://jquerymobile.com/

JQuery UI Touch Punchhttp://touchpunch.furf.com/

Slick.jshttp://kenwheeler.github.io/slick/

Typekithttps://typekit.com/

• Interactive animation design• Programe all the interactions with HTML/CSS/JacaScript• Integrate with other Adobe applications such as Adobe Illustration and Adobe

Photoshop• Similiar function as Adobe Flash• It’s included in Adobe CC package• Learn one more useful and new application• Responsive for different width size

59

Technology Used

Apache Cordova

PhoneGap Developer App

Adobe PhoneGap Build

By Apache Software FoundationProduct page: URL: https://cordova.apache.org/

By Adobe System Inc.Product page: URL: http://app.phonegap.com/

By Adobe System Inc.Product page: URL: https://build.phonegap.com/

Resources used:

Lynda.comhttp://www.lynda.com/

Terminal (OS X)http://www.apple.com/osx/how-to-upgrade/

Xcodehttps://developer.apple.com/xcode/

Cordova Camera Pluginhttp://docs.phonegap.com/en/edge/cordova_camera_camera.md.html

iPad mini 2 Retinahttp://store.apple.com/us/buy-ipad/ipad-mini-2

60


Next & Conclusion

Next StepPublish the Emot App to the Apple store, so people can really download and play it at home.

62

Next StepConnect this learning experience to their real life and encourage them to interact with people.

Analysis and Conclusions

When I was a preschool teacher, I never thought that one day I could actually build something and help kids and their parents. Emot app is really my pride and passion. Emotional learning is never an easy task for anyone, especially children. I have seen some parents and teachers suffering from teaching emotions, so I really want to create a nice tool for them. However, just like I mentioned before in the elevator pitch: “My biggest success is not when I see children managing their emotions well, but when I see them making funny faces when they are playing Emot app.” For kids, learning through playing is always the best.

During the process, I learned every aspect of design and developing skills. When I came out with this idea, there were many challenges I didn’t think of, such as user testing. During my UX class, I tried to call teachers and kindergartens for approaching my young users. However, people are so exclusive about kids’ safety, which is totally reasonable. I ended up volunteering at a non-profit children center and finally had a chance to interact with real children. Technical challenges like using Phonegap, Xcode, Adobe Edge Animate are also tough but fun. I enjoyed making all the characters and animations on my app too. They have been my creations and friends during this process. I am so glad to share with people about my project.

Last but not least, I want to show my appreciation to my family, friends, and all the instructors at AAU. Looking back to the first year I entered AAU, I was just a graphic designer without any coding skills and knowledge. Emot application is not a real app in the apple store, but the process I have experienced has given me a solid foundation on building and designing web and mobile apps. The improvement in myself is really astonishing.

64

Portfolio

65

http://amychiangworks.com

Direct Study Journal Hightlights

2014 FALL 2015 SPRING2014 SUMMER

WNM_801_07MS: Group Directed StudyResponsive WebInstructor: Mitchell Hudson

WNM_801_OL3MS: Group Directed StudyVisual DesignInstructor: Jae Chul Bae

WNM_801_27MS: Group Directed StudyResponsive WebInstructor: Joshua South

WNM_801_06MS: Group Directed StudyUser ExperienceInstructor: Haydn Adams

• Camera function debugging• Three interactive emotion learning games producing• Parental Control & Setting page debugging• Audio HTML & JavaScript learning and debugging• jQuery touch and punch problems solving

• Logo and font face refinement• Color pallets, mood boards refinement• Characters design and visual style directions

making• Stories design for interactive games• UI elements explorationv

• Information hierarchy rebuild• User testing plan• User research• Competitors vs. Emot app comparison• Content for user testing

• Logo and font face refinement• Color pallets, mood boards refinement• Characters design and visual style directions

making• Stories design for interactive games• UI elements explorationv

66

Bibliography & Credits

Book Content

Touch and Learn Emotionshttps://itunes.apple.com/us/app/touch-and-learn-emotions/id451685022?mt=8

Avokiddo Emotionhttps://itunes.apple.com/us/app/avokiddo-emotions/id661758013?mt=8

Make me Smilehttps://itunes.apple.com/us/app/make-me-smile!/id509507539?mt=8

First Words Feelingshttps://itunes.apple.com/us/app/first-words-feelings/id489700475?mt=8

Noun Projecthttps://thenounproject.com/

Teaching tools imageshttps://www.pinterest.com/

Samsung LOOK AT MEhttp://pages.samsung.com/ca/lookatme/English/

Wee You – Thingshttps://itunes.apple.com/us/app/wee-you-things/id631615431?mt=8

Sesame Streethttp://www.sesamestreet.org/

Mr. MenGoogle images

Mood boardhttps://www.pinterest.com/

Persona imageshttp://compfight.com/

Background Music & Sound Effects

Audio Junglehttp://audiojungle.net/

FreeSFXhttp://www.freesfx.co.uk/

Freesoundhttps://www.freesound.org/

SoundBible.comhttp://soundbible.com/

Video Content

iPad imageInstantShift: http://www.instantshift.com/2014/02/21/free-ipad-mockup-psds/

Vidoe ClipVideohive: http://videohive.net/?osr=tn&_ga=1.27623612.188485827.1429670578

Photoshttp://compfight.com/Google Images

67

All copyrights belong to their respective owners. 2014

emot case study book

Documents