UX Final Project: 知性 (Zhi Xing) App | Yang Gao

Name

知性 Zhi Xing (Know about sex)

Description

知性 (Zhi Xing) is a sex education IOS App for Chinese children who under 18 years old and their parents.

It shows different contents to the users based on their age.

 

Motivation
Ideation

In 2007, a Taiwan female writer Lin Yihan committed suicide after publishing her novel Fang Siqi’s first love paradise, an autobiographical novel about her life. She was sexual assaulted by her literature teacher since she was 13 years old. In the same year, the red yellow blue kindergarten incident also caught many attention.

People has found out that lack of sex education has caused lots of health issues and social problems in China. Sex accompany a person from birth to death. Many people in China think that sex only belongs to heathy adults, sex only equals to sexual behavior. However, sex not only contains biological sex, but also contains phycological and sociological sex. The skin touch feeling the infant has, children’s understanding about gender, youth falling love, adults getting married…all belong to sex.

So I think a sex education App will be a very good product to help parents understand sex education knowledge and education method, and an interesting and effective way for children to know about sex.

“Sex education from family and school is very important. If the educators do not teach them sexual knowledge at the appropriate time, they will also get it from other ways, which are usually not good.”——Lu Xun

Brainstorm Poster

Brainstorming Poster

During the class, I made a brainstorming poster. The main idea is to provide different forms of contents including online courses, interactive stories, cartoon, online community, some offline activities. Various content will make the learning process more interesting and the children will not feel that they are ‘taking a course’. The main goal is to make this app fun and easy accepted.

User Research, Personas, and Scenarios
Online survey

The survey content:

I divided the survey into 3 parts:

  1. Basic Information
  2. How do they implement sex education and the difficulties of it
  3. What kind of content do they prefer.

From the Questionnaire I found hat:

  • Sexual curiosity is a normal feature of childhood.
  • The parents pay much attention to children’s self-protection and privacy protect but do not teach their kids sexual knowledge voluntarily.
  • They do not reject sex education and know the importance of it, but they do not know how to teach them correctly.
  • Most parents learn how to educate child by reading articles like WeChat Official Account and enjoy parent-children learn sexual knowledge.
Interview:

The interview part gave me lots of inspiration and courage.

 

 

 

 

After the online survey, I interviewed some parents and get many ideas about making the App.

“I think prepositive sex education is necessary. I gave my son the sex education when he was very young, like 2-3 years old in a non-metaphor way. So when he gets older, he knows about sex, and will not try to find everywhere about sex education, because he knows it when he was very young.”

——Psychology major, mom, teenage son

“If there’s some parent-kid interactive play/offline classroom, I would like to go there first by myself to filter the activities.”

——Mom, 6 year-old daughter

“When I was pregnant with the younger brother, I tell my young daughter everything about pregnancy and having a baby. She thinks it is magical and I think showing her in the most direct way is very good sex education.”

——Mom, 5 year-old daughter, 1 month son

“I will give my young daughter sex education in a metaphor way, like dad planted a seed in mom’s body, etc.”

—— Mom, 4 year-old son, 10 year-old daughter

From the interview part, I realized that the sex education app is very necessity for children and their parents. Besides, the safety of this App also need to be promised.

Personas and Scenarios

I then built the personas based on the interview and online survey.

1⃣  The first one is a mom for a teenage boy.

When children reach teenage age, they usually do not tend to ask their parents question instead of finding the answer themselves. And this is the time that they’re the most interesting the topic of sex. However, nowadays, there barely have appropriate sex education online, how can they find the right way? Many teenage boys and girls always watch porns, see yellow website, read porn literature to get sex education.

This mother is a counselor in college and she knows the importance of prepositive education. She gave her son sex education when he was like 2-3 years old, and when her son grows up, he knows about sex and do not that curious about it and knows where to find the appropriate knowledge.

2⃣  

3⃣

Story Board

I think about three short stories related to this App. I marked field of shooting scale and description of each shot under the picture👇

User Flow

I created the user flow using draw.io website, basically, the user need to import their age to go to the specific section. And people can always go to the page for people under their age (i.e. 6-12 years old children can go tot eh 3-6 years old children section)

Wireframe

I made the wireframe using Balsamiq software.

Main Log in Page

Choose your Identity

Parent Log in

Children Log in

For 3-6 year-old-kids:

For 6-12 year-old-kids:

For 12-18 year-old-kids:

For Parents:

Usability Test

I showed the wireframe to many people to test and got some very useful feedback:

  1. Sign out button/private code to open it. Given the situation in China, currently, people may see sex education as a relative private thing, especially for young children like 12-18 years old.
  2. Give people more topic choices on the education part/courses. “I would like to be more efficient when I want to watch a course, even tough it is short”.
  3. Really like the community Idea, especially as parents, sometimes listening to other people’s advice and see other people have similar story will be very helpful.
  4. DIY section is very good. “My daughter is a big fan of DIY, this way will make the learning process very interesting and I’ll say, efficient and direct”
  5. Give the user a ‘return’ button.
  6. One suggestion: make the App cute so that children will like it more.
  7. “What kind of game is in the game section? It is not very clear in the wireframe. “
Design

Based on people’s feedback , I designed the final look of the App in Sketch. To better developed the APP, I focus on the section of 3-6 year old children.

Icon
Mock Up

Here’s the interface of the APP:

Log In Page

Children Log in

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Game Section

Cartoon Section

DIY Section

About Me Section

Prototype

Here’s a short prototype video:

Poster

APP Poster

Future Development

From the presentation, I got many valuable feedback from the professor and classmates:

  1. For one group, I need to make more personas. Different parents have different educational ways for the children and different children and different personalities. The parent and children I listed were a kind of parent, but there are also other typical types of people.
  2. For the visual design, try to match the style with together.
  3. For the App, the icon seems isolated with the content, try to pick an identity color.
  4. The DIY section is a little bit confused without explanation, try to change it to DIY Purchase/Shopping, etc.

I would absolutely love to further develop the APP. This topic is lack in China and I feel we need to fill the blank. This APP might not gonna change the situation in China completely, but I’m sure it will make some differences to children and parents.

Reference
  • Pinterest. com
  • Behance.com
  • Dribbble.com
  • 《近年来中国学前儿童性教育研究状况评析》
  • 《小学生性教育研究的回顾与探讨》
  • 《医学生对艾滋病及性教育的认知调查研究》
  • 《有效预防性侵害离不开性教育》
  • 《家庭性教育是预防儿童性侵害的重要防线》
  • 《美国的性教育模式及其启示》
  • 《在绘本故事中渗透幼儿性教育》
  • 《中美小学性教育比较研究》
  • 《学校性教育政策的国际间比较》
  • 《温州市大学生性教育、性观念及性行为状况调查》
  • 《微信公众平台对大学生性知识传播的影响》
  • 《四种性教育方式在生物教学中的运用分析》
  • 《3-6岁幼儿的家庭“性启蒙”教育》

 

Special Thanks to

Professor Azure Tianran Qian

 

 

UX Design |Usability Test| Se)( App (Forum)

Usability Test:

For this week’s assignment, I first did the usability test based on my wireframe and got many feedbacks.

Most users gave feedback on the login page takes long time but after I explained the reason (I want to have different content face different user), they understood, but I think there must be some good way to fix this problem, but I’m not very sure right now.

User 1:

Change the parent-kid part to a specific age range will be better.

Give a back button.

Give people a hit where they can click.

Give people a hit that they can scroll.

Sign out button/private code to open it.

User 2:

Can add a “quiz” section for the user to get a little gift.

Give people more topic choices on the education part/courses.

Really like the community idea.

User 3:

DIY section is very good.

Should give users a hit that they can go to any section that is under their age.

Will younger children are curious if they can not go to another section?

UX Design | User Research + Personas | Se)( App (Forum)

Design Idea

After research, I found it is important for the users to choose their age range in order to unlock the content that fits their age range. I listed the user in 2 different parts, children under 18 years old and parents. Parents have access to every part of the app. For the children part, I divided the content into 3 different parts: preschool (3-6 years old), primary school age (6-12), adolescence (12-18 years old). According to the research and interview, different age of children have different ways of accepting knowledge.

User Research

Survey:

 

 Interview:

 

 

 

“I will give my young daughter sex education in a metaphor way, like dad planted a seed in mom’s body, etc.”

“If there’s some parent-kid interactive play/offline classroom, I would like to go there first by myself to filter the activities.”

“The age classification is very essential.”

“I think prepositive sex education is necessary. I gave my son the sex education when he was very young, like 2-3 years old in a non-metaphor way. So when he gets older, he knows about sex, and will not try to find everywhere about sex education, because he knows it when he was very young.”

“I bought many comic books for my young daughter and son.”

“When I was pregnant with the younger brother, I tell my young daughter everything about pregnancy and having a baby. She thinks it is magical and I think showing her in the most direct way is very good sex education.”

“The idea is very meaningful because as a mother myself, I couldn’t find appropriate textbooks on the market for parents to give right sex education for the kids.”

 

Persona:

UX Design | Idea Board + Storyboard | Se)( App (Forum)

Class: User Experience Design

Creator: Yang Gao

Project Name: Se)( App (Forum)

Project Idea Board: 

The lack of sex education in China has led to many serious health issues and social problems. So for my UX Design project, I want to create a sex education app (forum) for children, teenagers and their parents in China. The goal of this app is fun, interactive and easy accepted, given people’s acceptability of sex education. Also, I don’t want the users to feel that they are taking a course using this app (forum), but  ‘learning’ while play.

When login into this app, the user can choose their age range and the app will generate the appropriate content. The content is divided in few parts for users to get the information, like comic books, animation/cartoon, interactive games(in terms of what kind of games, I’ll take Swift Playgrounds App, a game that you can learn coding while adjust/play the character, as a reference), interactive stories, speeches (TED, TEDx…), TV shows, volunteer community, etc.

Storyboard:

 

Animation | Final Project | Gao Yang

 

Title

A story of a blind cat

 

Screenshot

FullSizeRender 10

 

Link

 

A 1-2 sentence short description of your project

The animation is a story of a blind cat. It starts from summer when the little cat was born and cannot see. But it can see clearly in the end in spring.

 

 Credit to any collaborators and/or media sources

1.http://freemusicarchive.org/music/Tim_Evans/Live_at_WFMU_on_Burn_It_Down_with_Nate_K_1222017/Tim_Evans_1_Lights_That_Glow

  1. https://www.freesound.org/people/daandraait/sounds/249716/
  2. https://www.freesound.org/people/sagetyrtle/sounds/62488/
  3. https://www.freesound.org/people/Counter-gamer/sounds/213889/
  4. https://www.freesound.org/people/3bagbrew/sounds/95614/
  5. https://www.freesound.org/people/ShadyDave/sounds/262259/
  6. https://www.freesound.org/people/Corsica_S/sounds/178154/
  7. https://www.freesound.org/people/amholma/sounds/372181/
  8. https://www.youtube.com/watch?v=M_HTkxaTEO8
  9. https://www.youtube.com/watch?v=9o9Prx-V9s0
Link to your project development site/blog/moodboard

https://gy0225.tumblr.com/

(You can go to the process category to see how I made this animation. The ‘All about the cat’, ‘Spring’, ‘Summer’, ‘Autumn’ and ‘Winter’ categories are the material I found before starting the animation. )

A paragraph describing the development of your concept/story/idea

At first, I want to make an animation that is cute and I want my main character to be a cat. And then I enrich my story by enriching many plots—the cat was blind at the beginning, the cat can see in the end, etc. Also, I chose Adobe Illustrator and Adobe After Effect to make the animation since illustrator can make the style like an illustration. Wanting to indicate the time goes by, so I chose four seasons to make that happen—summer, autumn, winter and spring. Since in spring there’re a lot of flowers have come to bloom, which I can use to be the background of spring. The different things that happen to the cat can cause many interesting reactions.

A paragraph describing the materials/techniques/technology you used

I used AI and AE to make my animation. I used AI to draw the basic character. As my animation is cute style, so I draw everything very cute in AI. After that, I use AE to animate the character. AE is really powerful, even though I have used it for almost half semester, I still feel that I cannot get 10% of it. After Animation class, I still want to explain more in AE. In addition, AE can also draw some simple shape, so if the image is not that difficult, sometimes I chose to draw it in AE. Most drawings are by mouse and some of them are by sketchbook.

A paragraph describing what you learned from the process and how this could influence future work or projects (related to animation and/or other art/tech/design).

I am so glad that I take animation this semester with a fantastic professor. Animation really opens up a new door for me. I will keep explore After Effects for sure. And during this animation, I also want to learn something about design and how to harmonize color. I realize it is so nice to see comfortable drawings. In addition, I am also happy to study with lots of talent classmates, I can learn a lot of things from them.

Assistive Technology | Week 3 | Final Project | Gao Yang

For our final project, we are going to design a prototype base on the case study. I chose one of the case study👇
“73 year old man who has severe neuropathy and can’t feel his hands, feet, fingers or toes, just got into Words with Friends. He cannot simultaneously click and drag the mouse. He has to use one hand to hold down the button and the other hand to roll the track ball, to get the tile to move on the screen, which is very difficult.  This is his current mouse: https://www.amazon.com/Kensington-Expert-Wireless-Trackball-K72359WW/dp/B01936N73I/ref=sr_1_12?ie=UTF8&qid=1493239278&sr=8-12&keywords=computer+ball+mouse

 

Why I choose this one

Professor played a piece of video of this man and I saw clearly how inconvenient for him to use the mouse, so I want to design something that is more convenient and useful.

The tool we used

Makey Makey

The Process:

We decided to useMakey Makey to create a new mouse for him.

First of all, we studied howMakey Makey works. We search online for tutorials ofMakey Makey and found that it is easy to convert the mouse on the mac toMakey Makey mouse.

We watched the video again and again and got some important information:

  1. Even though the man cannot move his fingers and toes, he can move his arm and elbow like normal people, which we think can be used to interact withMakey Makey.
  2. The man was playing games. Analyzing some games, we found that some games need ‘left’, ‘right’, ‘up’, ‘down’ arrow keys, like 2048; some games need to move the mouse to different positions, like winmine.

So we had an idea that we want to make a big keyboard so that the old man can touch each key easily.

👇This is the outlook of our keyboard, each arrow key is very big so it is easy for the man to touch them by his elbow. The distance between each key is also big enough so that when he touch one key, he will not touch the other keys by mistake.

IMG_9413

(From Left to Right: Left Click, Left arrow, Up arrow, Down arrow, Right arrow, Right Click)

👇This is a bracelet the man can wear so that he can have access to the Makey Makey.

IMG_2546

👇Here’s how we connect the wires to the Makey Makey. This version of wire connection is for mouse moving computer games. If you want to play direction keys computer games, you can just simply move the wire to the arrow key.

IMG_9321

🔳We also change the speed of the mouse and keys on Mac, so that if the user moves his elbows a little bit slow, it doesn’t matter.

 

👇Here’s a video of how we use the Makey Makey. For better presentation, we change the size of the mouse.

 

Things we need to improve

1⃣️According to the user experience, we will improve the keyboard’s outlook. We want to satisfy two things: The user will not touch the keys by mistake and the keyboard is not that big so that he will not be tiring.

2⃣️ We also want to redesign the bracelet so that it can be light and comfortable for users to wear.

Conclusion

Doing a case study by ourselves is quite different from watching others’ achievement in the assistive technology area. We began to see and figure out what the user exactly need and what is the best user experience for them. Not only the comfort of the product, but also its appearance, price (even though we did not think about this aspect, but this should be considered in the future), etc. I am really happy to learn assistive technology and excited to see that we can actually solve a problem.

Assistive Technology | Week 3 | Response | Gao Yang

How to Make a Switch Adapted Toy

In this video, the girl made a big switch for the toy so that it can be pushed easily. After watching this video, I feel this is we can do to make some changes. Assistive technology is not something that is very far away from us but includes many types of stuff. The toy in the video can be used for children who cannot see.

For our case study, I think we can also find some inspiration in the video. The products we make do not need to be very fancy but can be easy and useful and focus on one aspect to make changes.

Identity meets ability

What I most interested in this chapter is Graham Pullin points out that nowadays, the boundaries between mainstream design and design for disability, universal design and design for disability are blurring, and I believe it will disappear in the end. Like the TED talk, we watched last time–Aimee Mullins treated her artificial limb as decoration, as a part of her body, like high heels to other women. In addition, she is so happy and proud that she can change her height and treasures her artificial limbs so much.

Disable people may think disability is a part of their identity because they are proud and do not want to hide who they are. They may also think disability is not a part of their identity because they think they have no differences with others. No matter which situation, the main concepts are the same. Disability is not something that they want to hide from others, but a common things that everyone can understand.

Since they have this kind of thoughts, the designers also want to design things that can satisfy both universal design and design for special needs. For example, they can design a game without looking for both visually impaired people and children whose parents want them not to play games on buses. The boundaries are blurring but we will sharpen the focus to pick a clever point to design.

Feeling meets testing

This article, the author points that the basic requirement to design. You must experience it before you design it, in which way you can confirm others to admit your design. It reminds me of the field trip to Cerecare Wellness Center, after experience their daily life, I have a sense of what they face everyday. It also provide a method to me for the following design: experience it first, then design it, otherwise you do not have the convincing product. Can you believe one can design a product for visually impaired people just by imaging how is their daily life? Definitely not. Experience is the voice.

Assistive Technology | Week 2 | Response | Gao Yang

New York Has a Great Subway, if You’re Not in a Wheelchair

In this article, Sasha Blair-Goldensohn, who is a disability advocate and lifelong New Yorker, found that there are many problems with New York’s subway. Sasha uses wheelchair himself and found that New York’s subway is not friendly with people with wheelchair. He points that ‘fewer than one in four stations can be used by people in wheelchairs when elevators are working — and they frequently are not’. He also pointed out that he started to realize this since his accident, so we can also infer that actually most of the people do not realize the needs of people with wheelchair. In addition, even if they notice that, they probably won’t take many actions. On the one hand, it is troublesome to make changes; on the other hand, it costs a lot if they make changes. However, for wheelchair users, parents with strollers, workers with handcarts and travelers with luggage, the small changes can make their life much easier.

Before Sasha got an accident, he does not realize the problem either, when he knew how wheelchairs users like, he began to realize so many conveniences the city gives him. It is common that we do not realize the problem, but after he raises it, we should begin to consider it seriously and think about making changes.

Are Colleges Doing Enough to Make Online Videos Accessible for the Blind?

At first, Tanya Roscorla asks the reader to ‘watch’ the video without seeing for one minute. I did it and only can get the background music. However, it is not a music appreciation class, when you open your eyes and have a look, you will find out that there are a lot of information in this video. However, like many other online courses, the videos contain more visual information than audio. I can understand that. Actually, visual information can catch people’s attention. If there are too many audio information, people may get bored of it, which is understandable. However, what if the audience is blind? A member of the project of the project team holds the view that they want to make sure every user has the same experience, which is more important. So we need to think about all the possibilities and solve them. For example, for blind people, we will add more description voice, for deaf people, we will add subtitle and sign, etc. Everyone has the same opportunity to get access of online recourses, we need to work on it to reduce the unfairness as much as possible.

Becky, Barbie’s friend who uses a wheelchair, was discontinued.

Actually, this is the article I love the most. Julia Franz uses an easily understood example to explain the situation of the environment and people with wheelchair. Barbie’s target costumers are young girls, what does it mean if discontinue Becky—a girl with a wheelchair? What will cause if they find out that instead of changing the environment, they get rid of Becky?

This is a bad example for young girls—only because Becky cannot fit the house, so we abandon her. Becky may be ignored by them in the end, however, that is also the attitude that they probably have to other people with disabilities. They will not pay much attention to them and forget them in the end.

However, think about that, what will happen if the young girls know that in order to have Becky, they change the Dream House, or they build a Becky-friendly house? They will suddenly have an awareness that, people with disabilities is the same as other like Becky is the same as Barbie. They will also get to know and learn what is a Becky-friendly house look like, what requirements need to be paid attention. For the target costumers who have the same situation with Becky, they will still be happy to see this kind of toys. Since they will know that What Barbie has, Becky has the same rights to have it.

In the God We Trust: A Brief Historical Review of Rehabilitation Practices

In this chapter, Marcia J.Scherer mainly talks about the rehabilitation Practices, which are a kind of assistive technology. I found that the development of technology has a strong connection with the history. For example, when there comes the WW1, many people may get hurts, so at that time people may have a big desire for assistive technology.

I also quite interested in person-focused efforts. Different disable people have different situations, disabilities, and causes. So for assistive technology, the designers need to know the specific need of each person, then he or she can design the most user-friendly product.