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!
EmotThe best app for kids to learn emotions
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
EmotThe best app for kids to learn emotions
Proof of Concept
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.
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 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.
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.
First part of every game is always animated vocabulary with corresponding emotion expression.
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,
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.
“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.
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.
First part of every game is always animated vocabulary with corresponding emotion expression.
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
EmotThe best app for kids to learn emotions
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
EmotThe best app for kids to learn emotions
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
EmotThe best app for kids to learn emotions
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
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
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
Final Design Guidelines
39
Left: 3%
Right: 3%
Top: 3%
Top: 31%
85 px
Final Design Guidelines
40
EmotThe best app for kids to learn emotions
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
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
Results of User Testing
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
Results of User Testing
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
Results of User Testing
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
Results of User Testing
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
Results of User Testing
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
EmotThe best app for kids to learn emotions
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
EmotThe best app for kids to learn emotions
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
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