Odessa
A web app that integrates social and emotional health into schools to promote healthy mindsets for students and teachers through emotional literacy, mood tracking, and positive reinforcement.
User Groups
Two user groups with different user needs, functions, and data in mind.
-
Middle schoolers ages 10-13 who want to feel seen and heard. They don’t want to feel like they’re doing more work. They want a simple but captivating experience they have ownership over. They want personal and fun.
Many high school students/older youth avoid the hassle of opening their laptops, navigating, and signing on every day. Additionally, access to a desktop occurs within the confines of school or programs, leaving a window of at-home hours where the student isn’t able to benefit from the features of the app.
-
Middle school teachers of a wide age range who are overworked with limited time. They are a support system for students. They’re looking for simplicity and easily digestible information.
Frequency of use is dependent on the schedules and free time of the teacher. Many found they weren’t taking the time to open up their laptop every day. They’re looking for a pulse check of their student’s moods whenever they have a spare minute in their busy schedules.
The Solution
Create a web app for SEL informed mood tracking and journaling.
How can we create a tool for students and teachers to become emotionally literate and self managing?
How can we encourage students to acknowledge their emotions?
How can teachers better serve and understand their students’ emotional needs?
Provide a means of mobile access.
How can we provide mobile access to the essential features users engage with?
How can we provide an expedited, simple experience for users?
What information do users want to see at the forefront?
Platform - Native mobile app for iOS and desktop web app
Role - Lead UX Design & Research
Team - 2 Product, 3 Devs, 6 Curriculum, CEO, COO
Timeline - (for mobile and desktop total) 7 weeks research, 12 weeks design, 4 weeks reiteration ongoing research and implementation.
Building from the Ground Up
Before designing a mental wellness and health tool from scratch, I took lo-fi mockups from past designers/developers, deciphered the user journey, and began a research phase to understand what these users needed, what this app was providing, and how other comparable services doing it.
These are the original wireframes before I re-designed the entire app.
Comparable mood tracking apps such as iOS Health app and Calm feature tags, gradient color association, and illustration changes/interactions when making a selection.
User Flows
Using what I learned from comparative mental wellness tracking apps, I created a user flow based on the trend of check-in, tag, and journal.
Desktop
Flow for a mood check in. Both user groups (students and teachers) can complete this flow.
Mobile
Research
In-person usability testing and focus groups with 9 students at our pilot middle school in Chicago.
Remote interviews, usability tests, and discussion groups with 20 students, 17 teachers, and 9 parents.
After initial designs for mobile had been drafted, I led design workshops and in-person focus groups with a youth-lead health leadership program based in Boston consisting of 15 users ages 16-20. These workshops were aimed at feature refinement and discovery.
Research periods occurred in between sprints to affirm our direction, as well as set up our roadmap for features our users could draw value from.
That’s me kneeling at the bottom in the middle :) I got to spend extensive time chatting, testing, and exploring with our user base.
Users can check in their mood for the day by completing the mood check-in flow, which consists of selecting their vibe and energy level on a scale, selecting a mood word that best describes their current emotion, and completing a journal by selecting a prompt, any relevant tags, and typing in the journal field.
Main Features - Desktop
Mood Check-In
Mood Meter
Leveraged emojis to create a mood meter relatable to young users.
Added a skin tone customization feature after user feedback.
Mood Selector
While hovering, word definitions pop up and a visual representation appears in the center. This helps users garner emotional literacy and creates a more visually engaging experience for younger user groups.
Journal Entry with Tags
A place for users to write it all down. A dropdown selection of prompts as well as tags to help users add context and aide them in the journaling process.
Main Features - Mobile
Mood Check-In
Mood Meter
Users are prompted to enter their vibe and energy.
The meter starts at a neutral point, but as the user swipes left or right to adjust their selection, the background gradient color gradually deepen to correspond to the mood and it’s emoji.
A “swipe to explore” bounces left to right to nudge users to engage with the swiping interaction.
Design inspired by interactions and color gradient featured on the iOS Health app.
Mood Selector
Next, informed by the vibe/energy selection of the user, a set of 9 mood words are suggested.
The user can swipe left/right to select from a carousel of illustrated anthropomorphic representations of their mood.
The mood word and definition is also provided above the illustration.
Tags
The illustration carries over to the next step, selecting tags of topics influencing the user.
This data set is a common trend in mood tracking apps and information commonly sought after by teachers/youth leaders.
Emojis for the topics provide a sense of familiarity and relatability for young users.
Journal
Users are prompted to write a journal.
Their selected tags are accessible above the typing field, where they have the ability to remove the tags, scroll over to see any additional tags they’ve added, and add more (redirects back to the tag page).
The mood word and definition are present as reference for users.
Streak Tracker
An incentive for users to check in daily. At the end of a mood check in, users are directed to a page with a breathing exercise and a streak tracker. Users earn a point for each day they check in and every 5 consecutive day rewards them 5 extra points.
Points can be redeemed in the shop.
Features In Progress - Desktop
Rewards Shop
Points can be redeemed in the shop, a gamification feature we included to promote consistency and make the app engaging for young users.
Users are rewarded in the form of customization of the app; they can purchase skins for the background of the app or themed streak trackers.
Homeroom
A dashboard for students and teachers to understand trends in mental wellbeing within their school and amongst their peers.
Data visuals paired with AI-driven summaries, encouragement, and relatable advice to help users feel less alone or get a pulse check of how their peers are doing.
Features In Progress - Mobile
Help Chat
Users, both youth and leaders, vocalized a need for easy access to technical and emotional help.
Selecting the “?” icon at the top right navigation at any point of the flow directs the user to an automated help chat.
Their responses are sent to either an Odessa representative for technical help or the school’s pre-determined mental health advocate for emotional help.
The notification received for an emotional help request can be seen through the teacher/leader portal, shown below.
The Teacher-Student Connection
Alerts - Leaders/Teachers only
Leaders/teachers will receive alerts in a notification tab when a youth/student includes a low, medium, or high priority flagged word in their journal or requests emotional help via help button.
Help requests include the 140 character limit message in their notification.
Student List - Leaders/Teachers only
After a leader/teacher logs into the app, they land on a page with the list of youth/students registered in their groups.
Users can view the most recent mood and filter by group and mood color.
Exploring Drop Down States
After a leader/teacher logs into the app, they land on a page with the list of youth/students registered in their groups.
Users can view the most recent mood and filter by group and mood color.
Prototype
A walk through of the Odessa desktop app.
Summary
Youth/students want a place to express themselves emotionally when they’re dealing with stressors both inside and outside of school.
Visual representations can aide students in their emotional literacy.
Leaders/teachers find value is leveraging data collected to understand the overarching state of mental wellness in schools and want access to pertinent information about their students moods before engaging with their groups/classes without the hassle of getting out a laptop.
Designing with simplicity helps users from a variety of backgrounds and ages access the app.
Customizability and ownership is not only important for users but can incentivize them to stay engaged. Simple designs lay the foundation for clean customizations and flexibility as features are added and reiterated.
Users are more likely to log onto their account daily if they’re able to access the core functions of Odessa from their phones.