StretchMe

Product Design, Visual Design

Screen Shot 2017-10-27 at 5.16.48 PM.png

Thesis Project: StretchMe is an engaging mobile app for promoting a positive attitude towards body image for young girls ages 5 to 8 years old.

My Role

Product Designer,

Visual Designer

Date

Jan - Apr 2017

Advisor

Eric Benson, Racheal Riley, Chad Lane, Ranjitha Kumar

 

The Challenge

I chose topic in my thesis project about delivering sexuality education to young girls because of the lack of sex ed when I was young. I found it through research that even now in the U.S, girls as young as 5 already have concerns about their body. However, sex ed starts at primary school students. The challenge was how to teach sexuality knowledge to audience as young as 5 to 7 years old. I focused on one of the most important topics -- Body Image, and experimented ways to motivate young girls to learn and enhance their memory.

 

Research

Methods

Screen Shot 2017-10-29 at 2.07.42 AM.png

Literature Review

The first step was to learn what are appropriate contents to users. To simplify this extremely sophisticated problem, I borrowed approaches from experts in this (Body Image ed) field, so the challenge left to me was to transfer their solutions to a format that being fun and effectively deliver the content.

Take-aways:

  • Non-verble expression and cartoon characters who look like 5-8 years old kids are needed;
  • Emphasizing the importance of "inner beauty", such as personalities or hobbies, is an effective way to promote positive body image. 
 

Experiment Multiple Interactions with Paper 

With that right strategy — enhancing the importance of non-physicall aspects, such as skills or personalities, I studied how users the content could interact with my user. Before going to digital, I prepared illustrations on different paper games and researched them on girls ages 5 to 8 at school in Illinois (with IRB). I asked young girls to play with some variations (sorting cards, customizing characters with strips and color pencils, and choosing corresponding characters with stickers) as a way to express their opinions. 

Data collection in the form of an affinity diagram with grouped ideas.

 

Key Findings

Through the experiment and interview, I found out specific user interests in character's outlook, interaction model, and a little bit about learning approach and game model.

Screen Shot 2018-06-14 at 12.11.43 AM.png
 

Ideation

HMW & Affinity Diagram

I broke down the problem into a few How Might We (HMW) questions to brainstorm and generated ideas for each question. I made the questions address the goal of cultivating effective learning to young girls.

IMG_20180731_151045 copy.jpg

Storyboard

To figure out how I could apply those ideas to solve primary problems, I sketched out a few sets of problem scenario, and solutions.

StretchMe_storyboard.jpg
 

Workflow

I embedded the different approaches to the game as different sections. Every section focuses on one part of social, physical or hobby development, in order to build stronger confidence of inner-self. There were basically three parts: setup with avatar customization, game sections, and sticker rewards.

Screen Shot 2018-08-01 at 12.51.06 AM.png
 

Design Highlights

1. Onboarding with personalizations

After finding young girls are able to associate character with real people they know, I decide to onboard user with personalization, in order to help them transfer knowledge they learn in this game to their own life. This feature will provide user empathy and a feeling of self-control.

  • Customize avatars (body size, color, clothing...)
  • Preference of scenarios and activities
  • Pick their friends based on their preference
stretchMeOnboard.gif

2. Encourage learning with rewards

Stickers as rewards is a strategy to engage user because I found users in this age range specifically like stickers, decoration and physical touches.

  • A sticker collection that lists gained stickers
  • Get surprising rewards after each task
  • Drag stickers around to decorate avatars
stickerInteraction.gif

3. Learning through multiple engagement

Because the literature review showed that enhancing non-physical skills or personalities are important strategies, I let users to participate different activities to enhance learning through frequently making good choices. The activities are some of young girls' favorite ones during user interview. 

  • Interact with cartoon characters - move or select characters 
help&sharing.jpg
  • respond with real actions
dancing.jpg
  • Simulation of practicing skills  - virtually practice skills, including skills that they don't necessarily use in the real life
guitar.jpg

I want users to engage with different body image and know that they are all able to make accomplishments in different areas.

  • Stretch avatar's body to engage with multiple body sizes
stretch.jpg

4. Design as a way to collect data

I also designed this app itself as a way to measure how much it influences user's attitude towards body image. At the beginning, the customization of avatar collect their initial preference and each section user has freedom to reshape avatar's body size through stretching. In this process till the end, the app collects data of how their attitude has been changed.

 

Please play with my digital mockup here:

StretchMe Mockup

Storyline with another character:

storyline black.png
 

User Testing

Now I need to apply the design to my users to test the effectiveness of the experience. I used the methods of individual interview and observation. I asked them a few questions after they played the app game, in order to know the usability of the app design, the quality of the visual design and game interaction for this specific age group.

Results (pros and cons of the design)

Pro: 

They showed positive reflection to the game, based on their answers;

They were aware of the body changes in the game, and they felt comfortable with seeing their avatar changes.

The stickers kept them play the game consistently;

Con:

The scenarios for activities need to be better designed to help them understand the context.

They had a hard time figuring out where to click due to the fidelity of prototype;

It was hard to drag/stick due to the prototype’s technical problem.

The transitions between screens were not efficient (multiple places).

 

Outcome summary

After a one-month follow up study with a group of 20 young girls ages 5 to 8 years old, it's shown that the app prototype had positive impact to their reflection towards body image.

  • Girls who chose skinny avatars at the beginning were more comfortable with diverse body images at the end;
  • Young girls were able to associate body image and their learnings in the game to themselves;
  • Girls showed interests in varies activities in real life, and believed that people with different body image could do them;
  •  In a scale of 1 to 5, 25% girls presented improvement of satisfaction to their own body image 
 

Learnings (What I would do differently)

Ensure accessibility no matter who your user is

When I designed those interfaces, with heavy illustration, I only wanted to make them in a consistent yellowish color. So many of them contains yellow background and characters with yellowish skin color, which has low contrast and hard to distinguish. I didn't realize young users in this age might have vision problems and it should be considered.

Design and test more variations during ideation stage

I did brainstorming and generated a few interesting ideas during ideation. However, I used some of the ideas just because they seemed effective through my own evaluation. It's not a good process for making progress and improvement. I will keep generate more ideas and test with users to ensure quality in the future.

Make clear and effective success measurement at early stage

Since this is a complex problem to solve, my initial goal was just to keep user's interests. Although I got positive feedbacks from real users, it turned out that I wasn't sure how effective my design can be.  I will make sure that I make clear and effective metric in the future.

 

Citation:

A Program to Promote Positive Body Image: A 1-year Follow-Up Evaluation, Gail L, McVey. 2002

"There's Nobody Like My Body" A Body Image Program For Early Elementry Students to Prevent Eating Disorder Development, Kelly J Balk. 2012