Emotion Diary

Improving mental health habits and accessibility through an online diary and calendar.
Project Overview
Emotion Diary is a full-stack web application made in close collaboration with a friend who coded it. The idea originated from a final project in a class we took together: Philosophy of Emotions. While we started in May 2023 and shipped a final product for the class by July 2023, it is an ongoing project we both still work on!

Check out the live app here: https://emotion-diary-ashy.vercel.app/

Role
Product Designer
Team
1 Developer
1 Designer (Me!)
Duration
May 2023 - Ongoing
Tools
Figma
ContextSolutionProductAccessibility FeaturesDesign ChallengesReflection
CONTEXT
Problem

More than 1 in 5 US adults live with a mental illness. As a strong advocate for mental health support, I acknowledge how difficult it is to manage one's emotions and improve upon mental health habits such as mindfulness.

Researching existing mental health habits

How can we encourage a diverse group of users to improve upon mental health habits?



SOLUTION
Crafting an emotion diary app that is both mentally and physically accessible

I not only wanted to help tackle the mental health epidemic by building an app but also, take it another step further to add features to make it accessible to as many people as possible.

Emotion diary would be a platform where users can create emotional events which has a variety of data such as the emotion, object, and cause. All of these events are displayed in a calendar and by recording these events, users can get a better idea of their emotional lives and take actions to improve it.



PRODUCT
Creating unique emoticons to fit a range of emotions

I illustrated 28 emojis for a user to relate to that would be used throughout the app. As part of my accessibility initiative, I checked the color contrast ratio of each emoji color with black + white text to make sure it passed the AAA level WGAC standards.



Ability to create emotional events

Similar to journaling, users can add different aspects to each emotional event in their calendar. This allows for more self-awareness and mindfulness about what happened. Tracking emotions in a calendar also allows users to look back to self-reflect or observe any patterns.



ACCESSIBILITY FEATURES
Customizing text size

Aging users or those with vision impairments now have the ability to change all of the text size in the app to a more readable size.



Dark mode option

Some visual impairments can make it difficult to look at or process bright colors and those with dyslexia or other visual processing disorders may find it tough to interpret black text on a white background. A dark mode option allows comfort in navigating the app to a wider range of users.



Adding a mobile version

Mobile increases accessibility to users who rely on touch or users who do not have web devices.

I also added a speech to text feature and once again, integrated the customization features that exist on web.



DESIGN CHALLENGES
Viewing more information while remaining in the calendar

At a glance, a user cannot see their full entry of an emotional event in the calendar. I utilized the sidebar real estate to give the user quick & easy access and to prevent taking them off their workflow.

Handling multiple events in a day

A summarized modal of all emotional events in that day will show when event appearance is maxed out (in this case, more than 2).



REFLECTION
Main Takeaways

Collaborating within a very small team (aka a duo) is both challenging but, rewarding. I can have creative freedom while working closely with a reliable developer, being fortunate that I can focus on my designs and see them come to life. Though, only working as a duo has its limitations which is why certain ideas take longer to flesh out.

Designing for both mental and physical struggles are not always the easiest but, incredibly important to me because they are areas undermined in the world.

Looking Ahead

Emotion Diary is still continuously being improved upon by me and the developer over time. I hope to keep adding to this page as we add more features! (One of the most recent new additions is detecting if a user is suicidal based on their inputs and giving them resources).



Check out my other work!
Join
An entertainment app that strengthens community over collaboration and synced actions
GraduateNU
Empowering students to customize their plan of study by leading new end to end features
NBCUniversal
Created patterns and hi-fi prototypes for enterprise-grade design systems, improving scalability and consistency