Culturally Responsive Teaching with Mindfulness Labs — UX Case Study
A look into the design process for ed-tech startup Effective to Great Education.
In a three week long design sprint, my team and I worked alongside Effective to Great Education founder Laura Thomas to help design a mobile app prototype for her newest branch of the business, Mindfulness Labs.
Effective to Great Education (ETGE) is an Ed-Tech startup using cultural trauma-informed Social Emotional Learning (SEL) and mindfulness integration to impact vulnerable students and underserved communities. Laura partners directly with schools in the District of Columbia where 70% or more of the students are on free or reduced meals. She helps integrate cultural-trauma focused SEL lessons into their curriculums.
ETGE currently has one existing product, Bud to Blossom, a software designed for students to engage in SEL activities. The newest idea behind ETGE is Mindfulness Labs.
The Challenge
Laura is looking to make Mindfulness Labs a mobile application for teachers and individual educators to have direct access to the SEL lessons she creates. Instead of partnering personally with certain schools on her own, Laura aims to spread culturally responsive SEL knowledge to as many classrooms as possible.
The Scope
Create a Hi-Fi mobile prototype for Mindfulness Labs.
The must-have’s for Mindfulness Labs include:
- Curriculum Database — Activities and Lesson Plan templates for teachers. Users can also customize their own Lesson Plans using Activities from the app.
- Self-Care for Teachers — Space for teachers to apply SEL tools and practices outside of the classroom to better their mental health and become better teachers.
The Team
Me— UX Designer
Sebastian Ipince — UX Designer
Holly Pettersen — UX Designer
Tools Used: Figma, Balsamiq, Miro, Photoshop
SEL and Culturally Responsive Teaching
Before diving into designing Mindfulness Labs, my team and I looked into everything Social Emotional Learning. Beyond SEL, we wanted to get a clear understanding of what makes ETGE unique: the cultural-trauma focus of Laura’s lessons and the importance of creating trauma-informed teachers.
So, what is SEL? According to The Collaborative for Academic Social Emotional Learning (CASEL) —
“SEL is the process through which all young people and adults acquire and apply the knowledge, skills, and attitudes to develop healthy identities, manage emotions and achieve personal and collective goals, feel and show empathy for others, establish and maintain supportive relationships, and make responsible and caring decisions.”
The image on the right shows the foundation of SEL, broken into 5 main categories: Self Awareness, Self-Management, Decision Making, Relationship Skills, and Social Awareness. In addition to the 5 pillars from the CASEL framework, ETGE adds a 6th pillar for Cultural Trauma-informed tools. SEL applications in schools’ curriculums is shown to increase academic achievement by 13%, reduce bullying by students by 20%, and there’s a return over investment of $11 per dollar invested in SEL. Most importantly, 8 in 10 employers say: social and emotional skills are the most important qualities for job success, and yet, they’re the hardest skills to find. (https://usa.minilandeducational.com/school/what-is-sel)
The second side of Mindfulness Labs is Culturally Responsive Teaching. Culturally Responsive Teaching is an approach that recognizes the importance of including students’ cultural references in all aspects of learning. It attempts to bridge the gap between teacher and student by helping the teacher understand the cultural nuances that may cause a relationship to break down, which ultimately causes student achievement to break down as well.
Teachers who are culturally responsive encourage students to feel a sense of belonging and help create a safe space where they feel respected, heard, and challenged. An example of Cultural Responsiveness would be to include references to different cultures, races, or languages when teaching a particular lesson.
Competitive Analysis
After getting a better understanding of Mindfulness Labs’ foundation, we moved on to researching potential competitors.
At this point, Mindfulness Labs is just an idea, so in order for us to establish what features we should include in the app, while also designing around Laura’s must-haves, we looked at the existing market for similar products.
Our main takeaways included:
- There are many mobile apps for educational purposes, but many have students as the target user, not teachers or educators.
- Lesson planning is an important feature for teachers.
- The use of search filters makes it much easier for users to find what they’re looking for.
- Gamification is used but only on the student’s end.
- Involving parents or guardians in student’s education seems like a gap in many of the existing products.
- Including different languages is a popular way to have inclusive learning experiences for users.
Interviews
After secondary research, we conducted 7 interviews with current or former teachers ranging from teaching Kindergarten to 8th Grade. We wanted to speak with teachers who had at least some experience or past knowledge with implementing SEL in their classrooms. Our goal was to learn more about SEL implementation and its effects, teacher’s experiences with mental health and cultural trauma-informed teaching, how educators create their own lesson plans, parent/guardian involvement in their student’s education, and teacher’s self-care practices.
Synthesizing Interviews
Through affinity mapping, we were able to establish some key insights to move forward with in the app design.
Key Insights:
- Even when given an SEL curriculum, teachers will spend time looking for other resources or suggestions for how to implement these tools.
- Teachers like being able to customize their lessons so they’re catered to their students.
- While many teachers are aware of SEL lessons and tools, many are unaware of trauma-informed strategies and culturally responsive teaching.
- Work/life balance and burnout is at an all-time high for teachers.
- Parent/Guardian knowledge of strategies being taught to students is important for growth and consistency.
We created our user persona Beth, shown above, who would act as the main focus for all our design decisions. If Beth wanted it, Mindfulness Labs was going to provide it.
We put together our Customer Journey Map (above), showing a visual story of Mindfulness Labs potential customers’ interactions with the app. This exercise helped us step into the customer’s shoes and see the business from their perspective. This was crucial in determining what features to prioritize over others and think about solutions from the beginning. Because Mindfulness Labs is still in its infancy, we focused our designs around engagement and what the app could be — thinking about once a user is using the app things like filtering, the drag & drop feature, and self-care. We think this is a good starting off point for ETGE to consider and further iterate on this journey as Mindfulness Labs grows and the business scales.
Moving into my favorite part of the process, Ideation, we established our key user stories. These quick affirmations from our target audience kept our app’s features at the forefront of our design decisions as we built out our prototype.
Sketches and Wireframing
Below are some of our initial ideas for Mindfulness Labs’ key features. The Search function, where users can find pre-made Lesson Plans and Activities, was organized by CASEL’s 5 SEL frameworks.
After meeting with Laura to approve our wireframes and key features, we moved into designing out testable prototype in Figma.
For our Home screen, you can see our first designs on the left side of the image above. Here we originally included a welcome message with a self-care focused greeting and immediately showed recently viewed items. Down the page included the Cultural Responsiveness content.
On the right three screens, you can see our final designs. We also moved information about SEL from the Self Care page into the home screen for more attention from users, along with information and activities focused around Cultural Responsiveness. We created a summary of the purpose and mission of Mindfulness Labs with a call to action button for users to learn more about SEL, that way they know immediately what the focus of the app is.
Our testing showed that the greeting was a little confusing when users didn’t have any context for the app first. Some users were confused as to why the app was posing this question or greeting in the first place. We decided to move that to self care in our final designs.
Again for our Search function, our original designs are shown on the left. You can see on the first Search page, users could search activities and lesson plans by the 5 main SEL categories. When we tested these designs, users were confused about what the cards would lead to when clicked on. We ended up adding the phrase “Activities and Plans” so users knew exactly what information they’d be shown when clicking on any of the cards.
Another major change included our filter options. At first, we only provided a horizontal-scrolling filter that let users only sort by type of activity. We ended up adding length of activities and lesson plans, grade level, and also included the Type of Activity with the Category from the main search page, that way users could navigate without having to go back to the main page every time.
We also added a Cultural Responsiveness card in the Search function in addition to the homepage. We wanted to highlight the importance of that information throughout the app and not just in one spot.
The image above depicts our designs for our My Lessons feature. Originally, we had Teachers choosing which class they were going to look at, and then the app would open up the page of saved information particular to that class.
We ended up integrating that option into the Creating a Lesson Plan process instead, that way users could view all of their saved content at once, in case they wanted to use certain activities or lesson plans across multiple classes they teach.
We also moved the Create a Lesson Plan to the top of the My Lessons page, since it’s one of the main benefits of the app. We saw that users either brushed over the feature or didn’t see it until later on when it was at the bottom of the page.
Here is the first part of the Create a Lesson Plan process. Users originally could only view content if they scrolled horizontally, but we changed it to a grid system so it was easier to view multiple activities as you drag and drop your preferences.
These screens show the end of our Create a Lesson Plan process. We made the drawer menu only extend as far as the page header/title so that users wouldn’t get confused about where they are in the app throughout the process.
In the middle screen, you can see we tried having the app automatically name the type of Lesson Plan a user was creating based on the Activities it included, but after collaborating with Laura, we decided to make the title and organization of the Created Lesson Plans completely customizable for the user. Because some schools use different organization names and techniques for SEL lesson plans and practices, this will allow users to name their Lessons based on what they’re used to and comfortable with.
Lastly, above are our iterations of the main Self Care page.
You can see on the far left screen in our first designs, we had Cultural Responsiveness here, but moved that to the Home screen.
We then decided to take our motivational positive comment of the day away from the Homepage and move it here, and after collaborating with Laura, we decided to build it out further to include a “check in” system for users. This is similar to Bud to Blossom’s check in process students use.
After testing, we changed the card for Forum, which sounded a little cold, and named it “Community.” This was more inviting to users and actually represents what it is: and area for teachers to collaborate, as questions, and leave reviews on Activities and Lesson Plans.
Early on in the design we organized our SEL principles (and ultimately the Activities and Lesson Plans) by color. Since there are 5 categories we were breaking the Search function into, we didn’t want any color to be too overwhelming. For this we decided on pastel, muted tones of each color. The variety of colors kept things playful and easy to distinguish for users, while remaining professional and clean. Our most consistent positive feedback throughout testing was the use of color coding each SEL category.
We purposefully assigned red to Cultural Responsiveness cards to bring as much attention as possible to that information throughout the app.
Our use of black and white pictures doesn’t take away from our color coding and illustrates inclusivity, diversity, and positive learning environments — the heart of Mindfulness Labs.
For texture we added the visual of waves to call to action cards, splash pages, and the homepage. The waves had a calming effect on users and added a little more pizazz to solid color cards without being distracting.
Our choices in icons, fonts, the new logo, and white background for the app all aimed to keep a clean and easy to view feel for users, again highlighting the colors of SEL.
Our main feature we want to build on is the Guardian side of Mindfulness Labs. Given that the app aims to put Culturally Responsive teaching in the hands of as many educators as possible, guardians of students are no exception.
We designed a few example pages to showcase this side of the app, but our research was focused around Teachers specifically, so in order to make solid design decisions around this we would want to interview parents or guardians of students.
Based on our own research and interviews with teachers, some features we think would be included on this side would be:
- Class code corresponding to the student’s class, prompted at Login
- Place where guardians can track their student’s progress, maybe taking data from the student app Bud to Blossom for this.
- Ability for them to see what SEL lesson is being taught in class that day.
- Opportunity for guardians to get SEL tools to implement outside the classroom at home.
Even taking this a step further as the business scales, there could be a third category for anyone who is interested in learning more about SEL and not just teachers or guardians of students. This could be a third avenue for users to log into at the launch of the app.
Our guardian navigation bar is similar to the teacher’s side of the app, but My Student taking the place of My Lessons. This is where users could track their student’s progress in the class and see what SEL lesson is being taught that day.
- Homepage content catered towards Guardians like Cultural Responsiveness Activities and Recently Opened
- Guardian Profile — similar to teachers, get personalized updates based on their activity on the app.
- Self Care — same as the teacher’s side, but they can interact with other student guardians instead of teachers.
- Blue is the consistent color throughout the app, while teachers have the purple.
Another important feature we think should be tested on is the translator to Activities and Lesson Plans. This allows inclusivity to go beyond the classroom and create more opportunities for the app itself to be culturally responsive.
Below you can see we added a translation icon to allow users to choose their preferred translation, plus the option for recently used languages.
Working with Effective to Great Education to bring the idea for Mindfulness Labs into a tangible vision was extremely inspiring. Laura’s work with schools positively affects teachers’, students’, and ultimately entire communities’ futures. My team and I can’t wait to see the impact Mindfulness Labs has and to see the final product built!