Em App and Responsive Website
Em provides a safe space for children to learn about and express their emotions.
Project Overview
The problem:
Even before the pandemic, anxiety, and depression were becoming more common among children. Despite these increases in need, the use of mental health care among children did not increase, and there are little to no direct resources for children to learn about emotions and how to respond to them positively.
The product:
Em App provides resources and support for users to learn about emotions and empathy. The app is designed for children 12 years of age and under.
My role:
UX designer leading the app and responsive website design from conception to delivery.
Project duration
4 weeks.
Responsibilities:
Conducting interviews/usability studies, paper/digital wireframing, low and high-fidelity prototyping, accounting for accessibility, and iterating on designs.
The goal:
Design an app and responsive website for children to understand and learn how to respond to their emotions positively and have empathy for others.
Research
User interviews
I interviewed my target audience (children aged 12 and under), parents of the target audience, and adults who work with children. The feedback received through research helped me understand their needs and what they want to see developed in the app.​
User findings
-
100% of the interviewed target audience want to understand themselves better and build good relationships with the people around them.
-
100% of the interviewed adults agree that if they had the chance to learn about emotions and meditation when they were young, it would greatly benefit their current mental health.
-
80% of the target audience who haven't experienced meditation before are interested to try.
-
80% of the target audience want to connect with other peers who feel like them.
-
Both groups of interviewees agree that journaling helps with expressing emotions.
Personas
User journey map
I created a user journey map to help identify possible pain points and improvement opportunities.
Starting the Design
Affinity map and Sitemap
I used affinity mapping to find which app features were most requested among the target audience.
Paper wireframes
I sketched out paper wireframes for each screen keeping the user pain points in mind. I came up with the idea to have a friendly avatar to guide the user throughout the app.
Digital wireframes
By creating digital wireframes, I was able to see how information would fit on the screens and create smooth transitions between each features.
View Em low-fi prototype
Usability study findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. This low-fidelity prototype was used in an unmoderated usability study with five participants.
I chose to conduct unmoderated usability study because I find it similar to real-life situations where people download apps and explore the features without assistance. It helps me gain insight on what features need to be made clearer or easier.
​
The second unmoderated usability study was tested with a high-fidelity prototype.​
​
Here are the main findings uncovered by the usability studies:
Round 1 findings
-
The users who have experience with meditation expressed they enjoy using guided meditations.
-
Users who have not meditated before wanted instructions on how to meditate.
Round 2 findings
-
Redesign the homepage so all the features fit above the fold.
-
The users would like to see the emojis in color, similar to Pixar's Inside Out.
-
Simplify the UI. The background gradient is too heavy and can take the user's attention away from the content.
-
Reorganize the content. Prioritize important information and make it concise.
-
Add a password lock for the journal feature.
Refining the Design
Round 1 findings
Round 2 findings – Same project, new look!
Other design considerations
Style Sheet
Screen size variations
I included considerations for additional screen sizes in my mockups. I felt it was important to optimize the browsing experience for a range of device sizes, such as desktop and tablet so users have the smoothest experience possible.
Accessibility considerations
1. Headings
I used headings with different sized texts for hierarchy.
2. Audio assistance
Audio assistance benefits both visually impaired users and young children who are learning how to read.
3. WebAIM
Text and button colors pass WebAIM standards.
Validation
I conducted validation testing of the mobile prototype with 5 users. The redesign increased the satisfaction rate by 80%. Below is a summary of the findings:
​
5/5 Find the app easy to navigate
5/5 Are satisfied with the app features, and find the information to be helpful
4/5 Would use Em when in need of emotional guidance/support
​
One participant shared:
"I like how easy it is to find information, it would be a nice app to have, and the colors are very playful."
The users' parents were very excited with the concept of Em, one shared:
“It's never too early to teach children about emotions and empathy. I also like the language used in Em, it doesn't label any emotion as positive or negative.”
Going Forward
What I learned
Conducting user research with different groups and testing through all stages were extremely helpful to improve the app. Interviewing the target audience helped me understand what the current need is. While getting feedback from a professional UX mentor helped with keeping Em's design up to industry standard.
Next step
One of the interviewees asked me if there will be a version for teenagers. Which showed me the potential for future projects. I would be interested to interview teenagers and learn what kind of support they would like to see in an app.