Me & My Emotions

Context:
Role:
Duration:

ArtCenter College of Design fellowship with The Dibble Institute
‍Product Designer
Twelve weeks (full-time)

A somewhat psychedelic graphic illustration shows a small brain character celebrating, surrounded by icons representing learning and mental-well being. An illustrated hand holds a phone with an image of the Me and My Emotions website, which looks like a house on top of a hill

Background

In May of 2021, I was awarded a DesignMatters fellowship from ArtCenter College of Design to work with The Dibble Institute on a website that would bring some of their MindMatters wellness curriculum to teenagers in a new and more relevant way. I lead the final design phase and handoff to development, picking up where a studio class had left off.

The site is still live at meandmyemotions.org.

Process

Define

  • Establish design priorities with clients based on research
  • Map design opportunities
    to site features
  • Assess technical feasibility

Design

  • Revise branding
  • Harmonize UI style to illustrations
  • Create high fidelity UI wireframes
    for entire site
  • Rewrite curricular content

Test

  • Create clickable prototype for core tasks
  • Remote moderated user testing of prototype with teenagers
  • Using this data, establish final priorities for production
  • Update UI feature that didn't test well

Handoff

  • Supply assets, content, and functionality descriptions to developer
  • Work with developer to provide additional schematic documents

Research

I began working with previous research and design ideas from an ArtCenter studio class. I then supplemented this with research that more specifically looked at technology use and teen attitudes. Running remote user testing late in the design process also provided helpful information via a questionnaire and interviews.

Design opportunities

A bold graphic of the number 1

Agency through interactivity

Interactive activities are more effective than passive learning for teenagers, who often watch videos online and play
video games for fun. Game design patterns in particular can also speak to the discovered potential for allowing teenagers an opportunity to assert themselves and take control of their own development.

A bold graphic of the number 2

Flexible tools for practice

Teenagers are more open to casual learning experiences that unfold in small segments over time. The MindMatters curriculum hopes not just to educate young people about mental well-being, but help them begin a practice to care for themselves. A digital platform with reminders, goal-setting, and feedback on progress can help young people manage this process at their own pace. The mobile-first format also allows for an important portability.

A bold graphic of the number 3

Creating a separate space

Teenagers today seem more open to talking about mental well-being than previous generations. They also seem more likely to see it as a part of self-development, often through the lenses of stress management and self-care. The upending of traditional school routines has also made these topics for discussion by caregivers. Teenagers have experienced changing routines that have made mental well-being newly visible. Online media platforms have become a casual, accessible venue for learning about serious topics but can also present unhealthy social pressures. Teenagers need a safe space outside of social media, school, and their home lives to learn about mental well-being.

Final Wireframes

The final site featured rewritten versions of the twelve lessons in the MindMatters curriculum, accompanied by videos created by Audrey Murty and Amelia Yessayantz. The following wireframes illustrate key features reflecting research insights.

The Digital Practice Plan

Building new habits

Research underlined the opportunity to prioritize the curriculum's learning outcome of building an overall wellness practice.  Prioritizing building a practice led to a user experience that differed from more off the shelf e-learning products. The site does not feature quizzes or other assessments and students are free to work at their own pace. The interface challenges them directly, however, to set goals and practice self-soothing and empathy-building skills through a feature called the practice plan.

This feature was based off of a similar activity in the classroom curriculum, where students are also asked to set weekly practice goals and think about implementation plans, a strategy for habit-formation.

Facilitating this flexible goal-setting accommodated student autonomy and emphasized engagement in small moments over time. The practice plan helped realize the site as a copilot rather than a bus driver in students’ learning journey and foreground practicing skills over studying information.

These screens walk the user through noting their practice for the previous week, rewarding practice with skill points and allowing them to select which skills they want to practice in the upcoming week. Students are offered the skills that they’ve learned so far in the curriculum.

Students are allowed to skip the practice plan, at which point they receive a notification to complete it in their dashboard. They can review the skills they elected to practice through the hamburger menu on the dashboard.

Feedback and Awards

Enhancing worldbuilding

Audrey Murty's illustrations and character design made the curriculum’s serious topics more approachable. The richness and narrative quality of this world also made the experience of using the app over time more immersive and engaging.

The system of points and awards that marked student progress added a new dimension of immersion into this world. These simple, celebratory methods of feedback helped keep students engaged and made learning more fun by using the ux and visual language of mobile games.

Designing a copilot and not a bus driver

Rewarding engagement and practice rather than curricular completion also made dropping in for shorter sessions or check-ins seem more natural, as is common with mobile games. As they progress through the curriculum, students earn experience points (xp), while skill practice points (sp) are earned through recording skill practice in the practice plan.