Feeling Zoo App and Responsive Website Design
Feeling Zoo is a fictional platform designed by developmental psychologists to teach children about emotions and empathy. Their main product is an app that is easy to navigate for kids, while they also have a website that parents can use to monitor their child’s progress and to read about the app. Their main audience is children whose parents don’t have time to participate in beneficial co-viewing activities to teach their children.
Project duration:
January 2022
<a href="https://www.freepik.com/psd/phone">Phone psd created by rezaazmy - www.freepik.com</a>
Project Overview
The Problem:
While co-viewing media is an extremely beneficial process for children to learn about emotions and the consequences of certain actions, most parents do not have time to participate in co-viewing.
The Goal:
Create an app that can substitute for a parent during the consumption of media so that children enjoy content that is fun and entertaining while also reassuring their parents that they are learning lessons about their emotions.
My role was the UX designer designing an app and website for Feeling Zoo from conception to delivery. My responsibilities included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.
User Research
My research involved conducting interviews and creating personas for groups that may be interested in using the Feeling Zoo app. Two major user groups were identified: caretakers of young children who didn’t want them to fall behind in their emotional development and those young children themselves.
These interviews revealed that both entertainment and education were important to these users, as children did not want to interact with a boring site and parents wanted to make sure their children were learning.
Personas
Problem statement:
Ben is a young child with busy parents
who needs access to interesting educational content
because he wants to have fun while learning.
Problem statement:
Alina is a busy mother
who needs trustworthy educational content for her child
because she doesn’t have time to select and watch appropriate content with her.
.jpg)
Ideation
A Crazy Eights exercise was done to ideate different ways that users might be able to interact with different parts of the app.
Digital Wireframes
To accommodate for young users, large options that didn’t require scrolling or reading were presented at the tops of pages.
Categories for parents to find certain content
Large options for easy clicking
List of lessons hidden until clicked to prevent clutter
Categories for parents to choose relevant lessons
Since users wanted to be sure the app was educational, a dedicated lessons page that children could navigate with an adult was added.
Low-Fidelity Prototype
The low-fidelity prototype mapped out the process of navigating each section of the app. This prototype was used in a usability study.
App prototype: https://xd.adobe.com/view/c8eb1187-7b13-46af-bea8-e0a68bfdb4dc-9db8/?fullscreen
Usability Studies
I conducted a usability study on the low-fidelity prototype. The results of this study were used to inform the design of the high-fidelity prototype.
Parameters:
1
Homepage Difficulty
The homepage had too many functions for a younger child to navigate.
21
No Self-Reflection
Users wanted to see an option for children to reflect on their own feelings as an extension of the other functions of the app.
3
Not Interesting
Several users wanted to see the use of characters in the app to draw children’s attention.
Refining the Design
Before usability study
After usability study
Users thought that a homepage with several functions was too complicated for a child to navigate, so the homepage was simplified.
Before usability study
After usability study
Users wanted to see a function of the app that would allow children to acknowledge their own feelings.
Final Mockups for User Flow
High-Fidelity Prototype
The high-fidelity prototype incorporates feedback from user testing and has a more complete user flow.
App prototype: https://xd.adobe.com/view/b92f7172-6c64-4289-8515-278538820247-ec7c/?fullscreen
Mobile website prototype: https://xd.adobe.com/view/c7c57712-a508-4a29-8f5f-ee96149e43f3-9296/?fullscreen
Tablet website prototype: https://xd.adobe.com/view/7931d940-dcfd-4fdd-8987-ebcc87d32929-2c62/?fullscreen
Desktop website prototype: https://xd.adobe.com/view/a61b3019-a3d3-499c-a7d6-3fe54e5a3dbb-f348/?fullscreen
Accessibility Considerations
1
Text is large so that it can be read easily even on colored backgrounds.
21
All text in the app would default to being read aloud to accommodate for young users who cannot read.
3
Headers were used for screen reader accessibility.
Responsive Design
The sitemap was designed to include the same elements that were important in the app as well as additional information for caretakers who want to determine if the app is reliable.
Responsive designs for the website version of Feeling Zoo were created, adding content as necessary to accommodate for the different screen sizes.
<a href='https://www.freepik.com/psd/mockup'>Mockup psd created by syifa5610 - www.freepik.com</a>
Takeaways
Impact
This app creates a dedicated place where children can consume educational content and learn about their feelings without an adult having to be present for the co-viewing experience.
One quote from the usability study:
“This is a really underexplored field. I think an app like this would be amazing for so many parents.”
What I learned
I learned about the different uses for an app and a responsive website. Although initially I thought both would have the same function, it turned out that because more adults use the web version than kids, it made more sense to include relevant information for adults there instead of just lessons for children.
Next Steps
1. Run another usability study on the high-fidelity prototype to confirm whether users like design choices.
2. Conduct further user research to be sure the app contains all necessary functions for users.