Tablet App

Wren - An Emotional Regulation App for Kids

Wren is a mental health tablet application for kids which teaches emotional regulation skills.

Date

1/27/2022

Website

Live Link

Overview

The Project

According to Edweek.org, between March and October of 2020, Mental Health emergency visits increased 24 percent for children ages 5 to 11.

In order to address this issue, I designed a mental health application that teaches coping skills and positive reactive strategies for various emotions, targeting children as young as 2.

My Role

UX/UI Designer, Content Creator, UX Writer, UX Researcher, Information Architect, Visual Designer

Tools Used

Figma, Adobe Photoshop, Canva, Miro, GoogleForms & Zoom

The Problem

There are mental health products developed for children which allow them to sift through emotions and see different coping skills for each one. However this type of product only exists in print media, requiring parent involvement for children who can't read independently, and preventing customization of coping skills provided.

Target Audience

The target audience for this project is children ages 3-13, their parents, and anyone in need of a delightful way to cope with difficult emotions.

No items found.

The Solution

Wren is a tablet application for children that teaches age appropriate coping skills for various emotions. It provides children will the tools to independently regulate difficult emotional states.

Research & Analysis

Competitive Analysis

Using the SWOT method, I analyzed the strengths, weaknesses, opportunities, and threats of three products; Mood Flip Book; My Moods, My Choices; and Thought Spot. The purpose of this was to learn from others' mistakes, discover what features users find most important, and find where this new app will fit into the market.

The key takeaways from my competitive analysis were...

  • Too many emotions unnecessarily increases the cognitive load of the users
  • Users want to see all emotions at once, so they don't have to explore to find the one they're looking for
  • Users appreciate a large variety of coping skills and dislike redundant skills.

User Interviews & Survey

I created a survey using Google Forms which screened respondents on the criteria of "parent of child(ren) between the ages 2-10". I collected 72 survey responses and completed interviews with 7 of these parents.. The surveys primarily gave me insight into the tablet use, reading level, and emotional regulation abilities of children, while the interviews focused on what the parents wanted the app to provide their children, and what their current emotional reactions look like.

In response to how their children react when angry, sad, or frustrated, parents mentioned their children...

  • Crying
  • Screaming
  • Hurting Others
  • Engaging in Self Injurious Behaviors
  • Negative Self Talk
  • Breaking/Throwing Things
  • Gorging on Junk Food

Personas

The first persona I created was one of a parent. I based Felicia off of my 4 interviews with parents. After Felicia, I created 3 personas of children based upon the behaviors, frustrations, and needs presented in the results of my survey.

Ideation & Implementation

User Stories

For Parents

  • As a parent user, I want the ability to edit the coping skills shown to my child so that I can get rid of ones that don't work for them, and add ones we know work.
  • As a parent user, I want to have access to my child's emotional trends so that I can have better insight into my child's emotional responses to experiences.
  • As a parent user, I want my kids to have separate accounts so that I can get separate information for each child's emotional trends.

For Children

  • As a child user, I want my most frequent coping skills highlighted so that I don't have to look through them all each time.
  • As a child user, I want coping skills that can be used outside of the app so that I can utilize them anywhere
  • As a child user, I want to be able to be read to so that I can use the app independently.

User Flows

I created 4 user flows to satisfy the 6 user stories. For the parental side of things, I created an onboarding flow which addresses the screen reader function, access to emotional trends through email, and avatar selection which allows multiple children to use the app with separate profiles. Next I created a user flow for customizing coping skills.

Parental Flows: Onboarding & Customizing Coping Skills

For the kids side of the app, I created a favorites flow in which user could access their favorite coping skills easily, and a coping skill flow which leads the users to a coping skill through the associated emotion page.

Kid Flows: Favorites & Coping Skill

Site Map

Utilizing the structures of these flows and the necessary additional pages to make these flows work, I created this site map.

Sketches

The first 4 sketches were ideating home the home page and how to display the hero image, text, and emotions. The last 2 sketches were ideations of emotion page layouts displaying the header, text, image, and coping skills.

Wireframes

Here is the onboarding page layout. Throughout the iterative process it did not change much.

This was the original wireframe for the profile selection page.

The original idea for the homepage was that it would display eggs in a nest, each egg representing an emotion. This layout changed quite a bit throughout the rest of the process.

After selecting an emotion from the home page, the child would be shown 6 coping skills, each with a page of their own.
View Low Fidelity Prototype
No items found.

Creating & Collecting Materials

For the integrity of the project, I wanted to use coping skills that were provided or approved by professionals.

I consulted with Therapist and LPC, Daniel Rovak, and Board Certified Behavior Analyst Meghan Jean who each provided coping skill suggestions and/or approved coping skills I provided.

From there, I collected graphics from Canva to represent each coping skill, eventually changing the colors of the images to fit with the color palette of the app (see Branding).

I reached out to graphic designer Caitlin Janiszewski who created the star of the show, the face of the app, Wren. Additionally, she created the nest featured on the onboarding page.

Wren

Using Figma and Adobe Photoshop, I created a collection of illustrations that were used across the app. Each emotion page features it's own unique cactus across a desert landscape.

Lastly, I created the egg icons which would represent each emotion.

From left to right: Angry, Insecure, Stressed, Frustrated, Sleepy, Sad, Worried, Bored

Branding

Accessibility

Designing accessibly does not require visual sacrifice, just empathy and creativity.

Before wireframing for this app, I decided...

  • Only tap actions required for the user flows children would use (mobility)
  • Screen reader access for those unable to read or visually impaired (cognitive & visual)
  • Lots of visual information that would allow for easier understanding (cognitive)
  • A minimum of 44px click space (mobility)

After implementing Branding, I needed to take further action in ensuring accessibility, specifically regarding color contrast. Throughout most of the app, the text color was an off-white, on top of one of these colors, or vise versa. When checking with a color contrast tool, I discovered that all of these contrast ratios were severely below the acceptable threshold. The first 2 hardly passed, applicable to only WCAG AA for large or bolded text.

In order to resolve this, I utilized the darkest color in my palette, on the lightest color in my palette. This solution passed accessibility contrast standards through WCAG AAA.

Usability Testing

Parents

I conducted usability testing with 2 parents on zoom, instructing them to complete 2 user flows while narrating their experiences in real time. This was to gain insight on the onboarding flow and the customizing coping skills flow.

Both parents completed both flows with ease, however it was brought to my attention that an oversight had been made.

There was no "add" button to finalize the customizing coping skills flow, and no way to choose which emotion page this skill would go on.

Kids

With the assistance of and permission from their parents, I conducted usability testing on 4 children within the age range of my targeted audience.

The two younger children, both 6 years old, used their parents for reading assistance twice (which was allowed due to the screen reader feature which could not be prototyped), but found the images incredibly helpful in pointing them in the right direction as well.

They completed both user flows (accessing a coping skill page through the favorites menu & accessing a coping skill from an emotion page) successfully, and provided fun feedback.

Insight 1: It would be helpful and "way more cool" if the favorites menu also featured icons of the skills.

Insight 2: The yellow is startling "like WOAH" and a more subtle color should be used on the settings menu background.

High Fidelity Prototype

View Prototype

My other works

Market Resource Partners

Designing the first enterprise sized Account Based Marketing software, serving internal and external users.

Mobile App

Transforming Transportation - On My Way

On My Way was my FIRST mobile app design concept which provides access to bus arrival times and bus stop locations.

Accessibility Audit

Better Accessibility for BetterHelp

BetterHelp has changed the healthcare industry by making mental healthcare accessible. This is an audit of the digital accessibility of their website.

Web Design

Artist Ecommerce - The Blind Painter

A local artist needed a place to showcase his work and his unique story.

View All Works
Mobile App

Transforming Transportation - On My Way

On My Way was my FIRST mobile app design concept which provides access to bus arrival times and bus stop locations.

View All Work
Web Design

Artist Ecommerce - The Blind Painter

A local artist needed a place to showcase his work and his unique story.

View All Work
Accessibility Audit

Better Accessibility for BetterHelp

BetterHelp has changed the healthcare industry by making mental healthcare accessible. This is an audit of the digital accessibility of their website.

View All Work