Problem
Kids increasingly need mental wellness support, especially in the context of global pandemic and national protests.
96% of teachers and 99% of administrators agree that their students increasingly need more social and emotional support - this has become the No.1 concern among K–12 educators.* Amid the ongoing pandemic and with racial justice issues in the spotlight, it bolsters the need to ensure social-emotional learning (SEL) as part of students' everyday learning.
*From 5th Annual Educator Confidence Report, a survey of more than 1,000 educators.
Solution
So we designed Eddie to help 9-11-year-old kids learn self-awareness and self-management with bite-sized everyday SEL prompts/activities. Ultimately, help them take the initiative to manage their emotions in a healthier way and be happier in their lives.

Type: web-based app, iPadOS app
Outcome
Hi-fi prototype testings* showed positive results. 94% of the kids want to use the product on a daily bases. 100% of the kids were able to understand and follow the instructions on screen. 87% of the kids who tried the games/activities anticipated that keep practicing on Eddie help them better manage their emotions.
*Based on testings with 31 8-11-year-old kids from 28 families.
View Prototype
Overview

Help 9-11-year-old kids learn self-awareness and self-management, not just for now but for the rest of their lives.

Team

Sabrina Lyu (Design Lead)
Han Xue (Research Lead)
Dakota Dong (Development Lead)
Ember Liu (Product Manager)
Neil Thawani (Project Coordinator)

Timeline

Jan - Aug 2020

Tools

Figma
Zeplin
ProtoPie
React

Role: Design Lead  (* All design artifacts in this project are created by me.)

Timeline: Jan - Aug 2020    Tools: Figma, Zeplin, ProtoPie, React

This is my master's capstone project with Houghton Mifflin Harcourt (HMH).  We worked with HMH to integrate a digital Social and emotional learning (SEL) intervention into K-12 schools. The scope of this project is 3rd-5th grade.

Our team included an engineer, a research + content lead, a product manager, and a project coordinator. As the Design Lead of this project, I was mentored by a Design Director at HMH, and I reported directly to the VP of Learning Science, and the Product Manager of HMH K-12 science products.

Results

94%

87%

100%

"I want it"

"It helps me"

"I understand it"

Based on testings with 31 8-11-year-old kids from 28 families, 94% of the kids want to use the product on a daily bases.

87% of the kids who tried the games/activities on Eddie platform anticipated that keep practicing on Eddie help them better manage their emotions.

100% of the kids were able to understand and follow the instructions on screen.

The Process

I was knee deep with the team throughout the 7 months from defining the problems to working with the developer to polish to the final product.

I worked with the Research + Content Lead on Research Consolidation and I delivered Personas, Journey Maps, and Work Models.

I led the ideation, wireframing, and lo-fi to hi-fi prototyping. We did five rounds of user testings with 30+ kids. For each round of user testing, I defined the goal, wrote the protocol, led interview sessions, consolidated the findings, and iterated on designs.

I worked together with the frontend engineer to ensure high-quality implementation.

An overview of our 7-month project timeline.

Research

1. Understanding the current practice and pain points

Most schools rely on teachers' subjective observations to identify students' social and emotional needs. There's a lack of data-driven SEL solution and benchmark.

During the research phase, I worked closely with the research + content lead. While she primarily focused on literature review, competitive analysis, interviews, and data collection,I led the process of synthesizing data and creating personas and models.

As the project started broadly with a broad scope of SEL, we started our research from the literature review (SEL Standards),competitive analysis,Subject Matter Expert Interviews (current frameworks and methods), administrator, teacher, parent, and student interviews (pain points).

Stakeholder Mapping

HMH SEL Logic Framework

Insights from Literature Review and Interviews

SEL intervention should be...

Summarized through the secondary research and primary research, the best practice of Social-Emotional Learning intervention follows these three key points.

Competency-based approach

Students'
autonomy

A focus on growth

SEL interventions should be competency-based. Focus on developing competencies by training teachers to model behavior intended to teach the Whole Child.

By enabling a sense of autonomy, students will be able to connect their experiences to lessons embedded within SEL curricula.

SEL interventions should take students’ developmental milestones and their context into account as they scale.

Pain Point

Lack of benchmark to assess students' SEL needs and learning outcome.

SEL experts and educators pointed out that students are more likely to be engaged with an intervention if it doesn't feel like an intervention - meaning, implicit lessons are more effective than explicit lessons when working to change students’ mindsets. Ideal SEL interventions should be both vertical and horizontal.

However, compared with other disciplines, there is a lack of data-driven solutions to assess students' SEL needs, competencies, and learning outcomes. Most of the schools rely on teachers' observations, which are subjective and inconsistent.

2. Understanding the users

Kids often aren’t aware an emotional problem exists and won’t initiate a conversation to get help.

After consolidate our findings from contextual research of understanding the SEL current practice and pain points, we continued on understanding our users. Through interviews, we identified 3 archetypes of students.

Personas
(Click to see the detailed personas)

Understand the Kids' Journey and Mental Model

To understand the kids’ mindsets and articulate what we learned during the interviews and surveys we conducted, we synthesized our research findings into the following models.

Students' Self-Awareness Journey -
how students seek help from a counselor to cope with emotional issues.

Day-in-The-life model,
a typical school day in student’s life.

Empathy Map
What does Christy think, feel, say and do?



We found that the most significant problem is, kids often aren’t aware a problem exists and won’t initiate a conversation to get help if they don’t think they have an issue. For example, a kid with a drunk dad might take it as normal - "This is just my life." Unawareness is preventing them from doing what they want in life - whether it be immediate or long-term.

In school days, the SEL intervention starts from teachers' observations. However, due the global pandemic, kids do not have school as a safe place anymore. That makes it even harder to identify kids' social and emotional problems.

Opportunities

Develop an Awareness

Actionable Strategies

Sense of Control

Kids often aren’t aware a problem exists and won’t initiate a conversation to get help.

Taking action requires energy and effort. We need to lower the barrier for making a positive change and making it easier emotionally to cope with that change.

Students in grades 3-5 want a sense of control but still rely on adults’ assurance. There is a sweet spot in balancing kids' autonomy and parents' permission/confirm.

Read More about the research
Ideation

We chose the "Guided Journal" + "Actionable Strategies" direction to satisfy both business goals and user needs.

Taking into account insights from our research, we generated 30+ storyboards and tested them with 11 kids from 7 families.

To evaluate the ideas, we listened to the kids' genuine reactions and thoughts, by probing them to envision themselves in these scenarios. Ideas are evaluated based on desirability, feasibility, and novelty.


Storyboards

Idea evaluation based on user needs and business goals

Evaluation base on desirability, feasibility, and novelty


Evaluation Matrics.

"Guided Journal" had the most potential to be integrated horizontally across core curricula and vertically through grades, and "Actionable Strategies" is most desired by the users.

Amongst the 30+ ideas, "Actionable Strategies" was most desired based on testings. However, "Guided Journal" idea got overwhelmed support from HMH leaders. Through workshop with HMH, I learned that the reason is, "Guided Journal" is scalable, and had the most potential to be integrated horizontally across core curricula (science, math, ELA, social studies) and vertically through grades. I combined these two ideas together - adopt the daily interventions idea from "Guided Journal" and keep in mind that kids want actionable strategies.

Design & Iterations

1. Overview

Translating the current SEL assessments into light-weighted, age-appropriate everyday prompts + activities.

Break down the available scientific-based questionnaires into light-weighted everyday prompts.

Current State

The available scientific-based questionnaires to identify and measure kids' social-emotional learning needs and outcome are long and tedious.

Preferred State

We took advantages of the scientific side of the questionnaires and presented them in a friendly and engaging conversation format.

Tailor the language to the kids’ level of understanding.

While referring to SEL standards (CASEL Framework and Illinois state social and emotional standards), we tweak the language to make sure that 8-11-year-old kids will understand every sentence on the screen clearly. In our hi-fi user testings, 100% of the kids understood the language on screens.

Everyday, starting from as simple as "how are you feeling today", kids will be guided through a 2-5min reflection + activity.
Then, they might also check their progress and/or set a goal.

User flow

Information Architecture

2. Critical Design Decisions

Through co-design sessions, I learned that kids expected this product to be a buddy to learn SEL along with.

Starting out from the initial concept, the first step I took was to understand the role of this product. I chose to conduct co-design sessions to understand what the kids expect the product to be in their daily life.

Our participants' designs


Before testing, I made the following assumptions: teacher, friend, game, information source, robot/agent. During the co-design session, I kept the question to be open-ended and prompted the kids to think about "what will help you in the long run" and "what kind of product/design would you most likely to interact with". Among the 8 kids we tested, 7 of them successfully finished the design and 4 of them designed a buddy/friend/company that interact with them in a conversation-like format.

Kids want to feel that they are being heard, and expect the voice and tone to be encouraging, supportive, and calming.

I then tested the voice and tone of the learning buddy with the intention to understand what kind of feeling that the product creates is most desirable and would contribute most to the trust-building and  user-disclosure. We tested both the on-screen text and the read-out voice.

Findings:

1. Kids want to feel that they are being heard.
2. Kids need specific instructions and will be overwhelmed by too many choices on screen.
3. Kids generally are more likely to open up if the buddy expresses that "I'm here to help" or "I would able to help you if you share more".
4. The language being used should carefully avoid judging.

Help the kids to track their competencies as they grow.

While students' agency is an essential component in our product, we want to let the kids understand their strengths and weaknesses and take initiatives to choose what they want to practice.

What is the best way to visualize the progress tracking dashboard and prompt the kids to set a goal for themselves?


Explorations

Design Decision

Through user testings, I learned that
(1) Users think numbers (bar chart) are clearer to understand their current strengths and weaknesses to determine which area they want to work on, but they also like the metaphor because it's more fun.
(2) Users want to get detailed information about the meaning of the competency/goal, track their learning history, and get practical tips/tools to improve.

Therefore, I decided to use the bar chart as an overview and follow by running track visualizations to show detailed information.

Primary information:
■ Current competence level (to help the user determine which area he/she need to set a goal for)
■ Current goal and the progress for this goal (if the user already set a goal)
■ Entry point to set a goal

Secondary information:
■ Learning history/past badges
■ Explanation about sub-competencies
■ Entry point for tips/tools
Solution

Help 8-11-year-old kids gain self-awareness and emotion management skills through small bites of everyday SEL prompts and activities.

With the goal of developing awareness, giving kids sense-of-control and keeping learning fun in mind, we built Eddie to engage 8-11-year-old kids with small bites of everyday SEL prompts and activities, and tracks their SEL competencies as they grow.

By the end of this project, we developed the frontend and a minimal backend of this product and handed over the code and hi-fi prototype testing results to HMH.

Learning with a buddy
Eddie has a series of buddies that kids can choose from, as their learning company.

By default, each character is tied to a series of voice-out lines which speaks to the kids as they complete prompts and activities in the app. We found from research that kids are more willing to open up to their buddies and connect with them like friends.
Learning through playing/activities
Social and Emotional Learning is a long-term thing. To motivate the kids to practice on a daily base, we chunked the SEL instructions into small bites and introduced gamification.

We replaced the traditional questionnaire-like assessments by friendly prompts and activities. It not only engages kids but also allow for scaling by building a data-trackable solution for schools as most schools do not adopt quantitative methods in assessing SEL.

"I would use this every day if it had those games."
-- Boy, 3rd grade
Set a goal and win your badges!
We give kids the right amount of agency by letting them set goals for themselves. As kids achieve their goals, they earn badges!

After setting a goal, Eddie issues prompts to students related to the competency the student selected.
Design System

A design system aligns with HMH's branding.

Category color schemes

I created six categories for the six competencies we targeted. 
Each category has its own color scheme used throughout the platform to make it easier for users to locate where they are.

"I like it's color-coded." -- Boy, 5 grade.

Grid System

Eddie is primarily a web-based app and an iPadOS app. According to our research, most kids will use iPad (60%) or personal laptop to use our app.
 The responsive design focuses primarily on these two types of devices. Additionally, we also needed to make sure that Eddie works well on smaller screens like a Chromebook.

Spacing and Baseline System

Measuring Success

To measure if this platform will help kids in improving SEL skills, we tested our hi-fi prototype with the kids. The following data is from user testings with 31 8-11-year-old kids.

94%

87%

100%

"I want it"

"It helps me"

"I understand it"

Based on testings with 31 8-11-year-old kids from 28 families, 94% of the kids want to use the product on a daily bases.

87% of the kids who tried the games/activities on Eddie platform anticipated that keep practicing on Eddie help them better manage their emotions.

100% of the kids were able to understand and follow the instructions on screen.

Team

Sabrina Lyu (Design Lead)
Han Xue (Research Lead)
Dakota Dong (Development Lead)
Ember Liu (Product Manager)
Neil Thawani (Project Coordinator)

Timeline

Jan - Aug 2020

Tools

Figma
Zeplin
ProtoPie
React

Next Steps

I proposed the following metrics to measure the success after being launched.

SEL assessments

What would you do if...?

Parent/teacher's observation

Ask the kids to do pre- and post-assessments on SEL competencies before and after using Eddie for a period of time to measure if their competency have improved.

The assessments will be focusing on identifying emotions, expressing emotions using accurate words, self-efficacy, impulse control, and stress management.

(1) Ask the kids specific questions (e.g."what would you do if you feel nervous?") before and after using Eddie for a period of time and measure if they internalized the skills they learned from Eddie (e.g. "I will take a deep breath").

(2) Track how often do the kids initiate an activity by clicking "toolbox" in Eddie.

Rely on the kid's responsible adult to

(1) track how often does the kid initiate a conversation for help when negative emotion occurred level, and

(2) measure if the kid were able to respond to the emotional issue with positive and health attitude.

Reflections

Designing for kids, and more importantly, learning from kids.

This is the first time I designed for children. I spent time to understand kids’ mental models by being ego-less and listening to them sincerely. I learned and always be mindful that their cognitive ability is still developing, and their reading and reasoning abilities are weaker than those of adults. A design can be successfully used and understood by an adult doesn't mean it works the same for a kid. I'd say this project was more like "designing with kids" rather than "designing for kids".

Team

Sabrina Lyu (Design Lead)
Han Xue (Research Lead)
Dakota Dong (Development Lead)
Ember Liu (Product Manager)
Neil Thawani (Project Coordinator)

Timeline

Jan - Aug 2020

Tools

Figma
Zeplin
ProtoPie
React

Personal Accomplishments

Team

Sabrina Lyu (Design Lead)
Han Xue (Research Lead)
Dakota Dong (Development Lead)
Ember Liu (Product Manager)
Neil Thawani (Project Coordinator)

Timeline

Jan - Aug 2020

Tools

Figma
Zeplin
ProtoPie
React

Design Lead

Cross Function

Product Iterations

As the design lead, I reported directly to the VP and Product Manager from HMH, and defined the product strategy from a user-centered perspective.

Working in a 5-person close-knotted team, my role was beyond a designer. I influenced the project management by suggesting to follow the agile development and setting up daily standup routine - which proved to be very efficient.

I led and organized user testing sessions and integrated research findings into design. I improved the user experience significantly by iterating the designs based on quantitative and qualitative data.