Emotion Diary

Web Design, Accessibility, User Experience, Branding & Design System, Prototyping
Project Overview
Full-stack web application made in close collaboration with a friend who developed. The idea originated from my Philosophy of Emotions final class project.

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

Role
Product Designer
Team
1 Developer
1 Designer (Me!)
Duration
3 months (May 2023 - July 2023)
Tools
Figma
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 and 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.



PROCESS
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 see any patterns.



ACCESSIBILITY FEATURES
Customizing text size

Aging users or those with vision impairments now have the ability to change the text size of the app to any larger text.



Dark mode option

Some visual impairments can make it difficult to look at or process bright colors and some 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.

Main Takeaways

Working 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.

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).