An innovative self-regulation app designed to empower students through guided meditation techniques while providing teachers with valuable insights, ensuring a holistic approach to well-being and classroom harmony.
Mindful Monsters
My Role:
Research, personas, sitemapping, sketching, wireframing, branding, visual design, illustrations, prototyping, user testing, iterations
Duration:
August 2023 - September 2023
4 weeks: 80 Hours
Project Background
Teachers have limited time, resources, and knowledge, to help students develop positive mental health practices.
The Why
An app that allows teachers to support positive mental health practices among students in the classroom.
Project Goal
Discovering
A competitive analysis was conducted to gain an understanding of what is currently available and any gaps that may exist.
I examined the following popular mental health apps: Headspace, Moshi Kids, Smiling Mind, and Mindful Powers
Competitive Analysis
Insights Gained
There is currently a gap in the market of apps specifically designed to support classroom teachers and students with mental health
Current mental health apps have limited free features for users
Many apps are not designed specifically for kids, meaning their designs are very text heavy
Calming colors and illustrations are common features
Interviews were conducted to obtain qualitative data about the target user’s experiences, pain points, and needs.
Elementary school teachers were recruited as participants for this study in order to understand what strategies teachers use to support mental health in the classroom, if teachers and students would benefit from an app to support mental health, and what expectations educators would have for a mental health app meant to be used in schools.
Interviews
5 female educators with varying years of teaching experience participated in the study
Strategies Used
Read alouds focused on mental health
Access to sensory tools in a calming space
Emotional Check-ins throughout the day
Guided brain breaks
Modeling self-regulation strategies
Effectiveness of Strategies
Teachers reported varied effectiveness when using these strategies due to…
Amount of time these strategies take when a student is feeling a heightened emotion
Individual student needs
Student participation
Benefits of an App
Reduce teacher burden (time)
Increase student independence
Allow for more student voice/choice
Teachers are not trained mental health professionals and feel ill-equipped to handle some situations
App Expectations
Emotion check-in for students to identify emotions
Guided, interactive self-regulation activities
Ability to view student activity
Kid-friendly visuals to support text
Kid-friendly navigation
After conducting user interviews, the following storyboard was created to further understand and represent the major pain points of potential users.
This storyboard highlights how the pressure of instructional time can make users feel like a failure when they do not have the time to devote one-on-one to a student who requires mental health support.
Storyboard
Defining
Methods for helping teachers empower their students to employ self-regulation strategies when they experience a heightened emotion, because calming a student down is a complex, time-consuming process.
Based on the findings of my user research, I was able to define the following area to explore solutions in:
Two user personas were created to guide product development and solution exploration.
While both personas have similar goals, their pain points showcase the varying needs of users.
Miss Brewer was created to to highlight the pain points: having limited knowledge and feeling inadequate when supporting students with their mental health.
Mrs. Kalinger was created to highlight the pains: having limited time and staying calm while helping young students identify and navigate their feelings.
Personas
With the target users in mind solutions were brainstormed and prioritized to answer the following questions and design the app so that both teachers and students can benefit:
Feature Roadmap
provide teachers with increased knowledge to support their students’ emotions?
provide increased access to self-regulation strategies for students?
encourage students to take ownership of their emotions?
make the process of calming yourself down more fun for students?
How Might We…
The app was mapped out so that both students and teachers could have a positive experience.
The student side of the app was designed with a focus on kid-friendly navigation and allows for a simple linear flow through each element,
The teacher side of the app is more complex, but still allows for quick navigation to minimize the amount of time a teacher must spend clicking to accomplish their goals.
Sitemap
Designing
Using the sitemap as a guide for the structure of the app, I began by sketching low fidelity wireframes to explore what design patterns might be useful in the design of both student and teacher screens for this product.
While sketching I utilized rounded elements to create a warm and approachable user interface.
Low-fidelity Sketches
Sketches were then transformed into medium-fidelity wireframes in order to gain feedback and to validate design ideas.
Medium-fidelity Wireframes
Teacher Screens:
Student Screens:
I chose blues and purples for the color palette to relay the sense of calm associated with the app, but also still keep the app playful and engaging for its younger users.
For the typography, I went with the font Poppins because it is modern and readable, specifically the lowercase "a" is in the style that kids learn to write the letter a during elementary school.
The logo utilizes a small monsters in order to be playful, inviting, and easily recognizable.
Brand Identity
UI Kit:
Brand colors were applied to the medium-fidelity wireframes to create the high-fidelity wireframes for the app.
I also created all of the illustrations used in the activity descriptions in order to create a cohesive style for the app.
Finally, these screens were prototyped in Figma so that I could conduct usability testing to in order to assess the structure of the app, the visual design, and gain insights on the kid-friendliness of the student screens.
High-fidelity Wireframing
Testing
3 participants were recruited to complete usability testing for the high fidelity Figma prototype of Mindful Monsters. During in-person testing, participants were asked about the visual design of the site, asked to complete 3 tasks, and reflected on the kid-friendliness of the designs.
Task 1: Create a Mindful Monsters Account (including class setup)
Task 2: Find and view detailed activity information to learn about a specific self-regulation strategy
Task 2: Find and view detailed student information to gain insights on what self-regulation strategy a specific student prefers
Usability Testing
3 female educators who currently teach kindergarten to third grade students participated in usability testing.
Success Metrics:
Task completion
Error rate
Time on task
Satisfaction
Insights Gained:
Positives:
Users reported that they would use this tool in their classroom
Users described their experience using the app as: insightful, helpful, and exciting
Overall users felt the app was well organized and easy to navigate
Illustrations added to playfulness of the app and made the experience more engaging
Users felt the simplified library was appropriate for students
Opportunities:
Users were missing the ability to easily switch between a teacher profile and a students profile
Users felt some minor language changes to the student screens would make the app more kid-friendly
Additional supports could be added for non-readers
Feedback from usability testing was used to iterate on designs in order to increase user experience for the future.
Iterations
Added editing ability when adding students during account creation to allow users to quickly and easily fix errors
Added profile picture to account set up so that teacher profile picture can be used for teacher profile in order to provide more a more obvious distinction between teacher and student profiles
Added navigation on student and teacher screens in order to switch between profiles efficiently (home button)
Changed language from “continue” to “begin” on student screens because “begin” is a more recognizable and familiar word to students
Added speaker to represent text-to-speech feature on student screens in order to make the app more accessible for non-readers
Changes I Made:
Final Thoughts
This project was a labor of love and allowed me to tie in my passion and previous experience as an educator. By prioritizing empathizing with users and identifying their pain points, I was able to design solutions that genuinely resonated with the users needs. During this project I was also able to explore creating custom illustrations in order to provide a visually appealing and cohesive interface.
Reflection
Further develop student screens to provide all users with an engaging, meaningful user experience
Explore solutions for allowing parents to connect to the app and support their student