Empathy Kid is an educational app designed for kids aged 3 to 10 to learn about empathy. The target aim of this app is to create a platform mainly focused on empathy that can easily be accessed and impactful in transforming the lives of kids who use it to improve their empathic knowledge, and for parents and educators who want to mold the future leaders of tomorrow into better humans.

Project overview

My Role

UX Designer/UX Researcher/UI Designer

Tools

Figma, Google Docs, Sheets, Slides, Jamboard, Forms and Zoom.

Timeline

12 weeks

Responsibilities

User and Secondary Research, Created User Journey Maps and Site Map, Competitive Audit Analysis, Ideation processes, Sketched Paper and Digital Wireframes, Designed Mockups, Developed Lo-fi and Hi-fi prototypes, Usability Testing, Affinity Diagram, Insights Analysis and Synthesis, Design Iteration.

The Target Challenge

This project was derived from a personal challenge of observing my 7-year-old eldest child’s aggression towards her siblings, despite my efforts in modelling empathy and correcting her when she faltered. This challenge led me to explore more solutions, thus transforming the project into a social need, as the broader community can also benefit from it.

The Goal

The project’s goal is to create an app that young kids will find useful and impactful for learning about empathy. If successfully achieved, it will help shape them into better humans and contribute to making the world a better place.

Project Inspiration - IYA

Project Inspiration - IYA

Understanding The User

User Research : Summary

I sent out a digital survey to parents, preschool and elementary school teachers, and caregivers to gather insights into their experiences and challenges of teaching children about empathy, as well as their preferred devices. I also included a secondary research where I reviewed some articles, studies, researches and expert sources in child psychology and education to gain insights into young children’s use of educational apps, the prevalent devices they use, and the behavioral outcomes of children taught empathy. I also examined the results of a research article that utilized the Empathy Questionnaire for Children and Adolescents (EmQue-CA), which was completed by 1,250 children and adolescents.

While going into the research, I assumed that smartphones would be the most commonly used device by children, but to my surprise, it turned out not to be the case.

According to the result below from Pew Research Center

Pew Research Center - Result of Children's engagement with certain types of digital devices varies widely by age.

The most common device parents say their young child engages with is a television, with 88% of parents saying their child ever uses or interacts with a TV. That was a shocker!

Survey results expressed that majority haven’t used an app to teach kids about empathy.

Survey result

For more insights on the survey, please click on this link –

How parents/teachers/caretakers help kids to learn about empathy.

However, in terms of the educational impact of learning apps on young kids, based on previous research from a Child Psychologist –

Research suggests that children can learn from apps yet it is less clear whether they can actually transfer this learning to the real world.

– Goodwin, Dr. Cara D., PhD. “Can Young Children Actually Learn From Educational Apps?” Parenting Translator, July 12, 2023. https://parentingtranslator.substack.com/p/can-young-children-actually-learn.

In another article from the Washington Post, a Towson University Lecturer and Author provides insights on teaching kids a social skill like empathy –

Experts insist that empathy is hardwired in humans, and that, even if we’re taught to suppress or repress it, empathy can be learned.

– Reiner, Andrew “We teach our son to be empathetic. Are we just setting him up for heartbreak?” Washington Post, February 28, 2022. https://www.washingtonpost.com/parenting/2022/02/28/teaching-empathy-children/.

Personas

Problem Statement

Dara is a mother and a preschool teacher who needs an educational children’s website without adverts for her students because she wants them to be able to learn without distraction.

Persona 1 - Dara Williams
Persona 2 - Arun Darsh
Problem Statement

Arun is a father, full-time employee and a widower who needs a mobile app for kids that focuses only on empathy because he wants his son to learn how to relate well with people.

User Journey Map

Dara’s journey map facilitated additional insights and the discovery of opportunities, helping identify areas that require improvement in her user experience.

User Journey Map - Dara Williams

Arun’s pain points were clearly articulated in his user journey tasks, enabling me to develop an empathetic understanding of his challenges and identify areas for improvement.

User Journey Map - Arun Darsh

Competitive Audit

I compared the user experience and features of four direct competitors’ mobile apps and responsive websites, along with one indirect competitor. I then analyzed and summarized my findings in a report.

Competitive Audit_1
Competitive Audit_2
Competitive Audit_3

IDEATION

For the Ideation process, I rephrased assumptions and obstacles that could affect the project goal from being  achieved into How Might We questions –

  • HMW design the app to be useful and impactful in learning about empathy for the target audience?
  • HMW get parents, educators and caretakers to be interested in the app?
  • HMW prevent the app from being a futuristic failure?
  • HMW make the app good enough to be recommended to friends?

After the HMWs exercise, I rapidly sketched out some ideas I derived while identifying the gaps from the competitive audit. My main focus was on creating free and uninterrupted access to the learning content, a dedicated educational app on empathy, and integrated language selection and accessibility features.

Crazy Eights
Home Screen Wireframes

Starting the design

Digital wireframes

After ideating and sketching out potential solutions on paper, I created digital wireframes for each screen that is involved in the main user flow. The main user flow consists of selecting an empathy category and engaging in learning about empathy within the chosen categories.

Digital wireframe_Empathy Categories Screen

Low-fidelity prototype

Certainly, to view the app from the perspective of my target audience, I created the lo-fi prototype in preparation for the usability testing.

Link to low-fidelity prototype – Empathy Kid

Usability Study : Parameters

Study Type :

Moderated usability study (Online)

Location :

Canada, remote

Participants :

7 participants

Length :

10-20 minutes

Groupped Affinity Diagram of the Lo-Fi Empathy Kid Usability Testing

For the full Affinity Diagram, kindly click here

Usability Study : Findings

Unrealistic App Start-up

Users required a more realistic emulation of a newly installed mobile app at launch.

Not impactful enough

Users need additional information to achieve meaningful learning about empathy.

Clear Navigation

Users found the navigation of the empathy category page to be easy to understand.

Refining the design

Mockups

Based on the insights from the usability study, I modified the splash screen interaction from “tap” to “after delay” ”navigate to” to provide a more realistic emulation of a newly installed mobile app upon launch. This change is primarily a refinement of the prototype interaction rather than a design improvement.

Before and After Mockups of Empathy Kid App

Further design modifications included the addition of more empathy category flows to facilitate meaningful learning about empathy for the target users. After all, the project’s primary goal is to create an app that young kids will find valuable and impactful for learning about empathy, making this my top-priority insight.

Before and After Mockups of Empathy Kid Mobile App

More Empathy Kid Mockups

Empathy Kid Mobile App Mockups

High-fidelity prototype

The high-fidelity prototype followed the same user flow as the low fidelity prototype, including design changes and prototype interaction modification made after the usability study.

Link to high-fidelity prototype – Empathy Kid

Accessibility considerations

The use of header hierarchy and alt text for images to ensure compatibility with screen reader technologies, making the content accessible for users who rely on them.

Used adequate color contrast between fonts and the background color

The speed, timing and animation style of the motion applied on the modals were carefully considered.

Responsive Design

Sitemap

With the dedicated mobile app design completed although still under iteration, I commenced work on the responsive web design. I utilized the sitemap to guide the information architecture of each screen’s design to ensure a cohesive and consistent experience across various devices.

Site Map of Empathy Kid website

Responsive designs

The designs for screen size variation included mobile, tablet, and desktop. I optimized the designs to fit specific user needs of each device and screen size.

Mobile website
Mobile website version of Empathy Kid
Tablet website
Tablet website version of Empathy Kid
Desktop website
Desktop website version of Empathy Kid

Going Forward

What I learned

The biggest mistake I made was at the beginning of my project. I did not involve the main target audience (kids between the ages of 3 to 10) when carrying out the foundational research. Although the usability study made up for it because I involved them, I could already see my error when the study began. These corrections are going to be made in the next design iteration of the project.

Impact

The participants in the usability study expressed that Empathy Kid has the potential to become a successful digital educational app, if it is developed to cater to the needs of the target audience. These needs were identified through the findings of the study.

Next Steps

Conduct more user research sessions to allow me to uncover unresolved user needs and accessibility issues.

Conduct additional usability testing to determine if the challenges the users experienced in previous studies have been successfully resolved.

Populate more educational resources for the target audience to learn more about empathy.