MindSea

Objective:
Creating a mental health app that tracks emotions and provides resources for students
Tools:
Figma , Lucid Chart
Practices:
User Research, Wireframing, User testing, Personas, Prototyping
Team:
Favour Nwachukwu, Julie Pilz, Nilanjan Ghatak, Saba Gul

Problem

How do our emotions affect our academic performance?
Our main objective was to provide a tool for students to see the effect their emotions have on their performance and provide resources to help. By tracking both positive and negative emotions over a longtime, students are more aware of emotional patterns and are provided self-help, meditation techniques and access to local professional care.
Timeline

User Research

Understanding user needs, expectations, and outcomes

Prototyping

Creating clear and minimal user flows for ease of use

Testing

Using structured interviews to recognize weak points

Final product

Polishing interactive prototype based on learnings

User Research

Starting, we brainstormed the main features users needed. Our main target audience is students who wish to better their mental and emotional health concerning their studies. To better understand our users, we created multiple user personas. 

Personas

Name:
Micheal
Age:
21 years old
Description:
Micheal is an undergraduate student at Howard University. His major is psychology, He is in his 3rd year, and he is currently on a football scholarship. He is from Philadelphia and normally goes back home for the weekend and holidays. He is familiar with computers and has been learning Python online since his first year. He is 6 ft, popular among his peers, and he is colour blind and, as such, wears contacts sometimes. His contacts are uncomfortable, and, as such, he prefers apps/UI that he does have to wear his contacts to use them. He doesn’t talk about his emotions often, but he has been having problems progressing with his schoolwork.
Name:
Sarah
Age:
25 years old
Description:
Sarah is a 25-year-old graduate student majoring in linguistics. She is an international student from China and has been in the United States for two years. Sarah struggles with speaking English fluently and feels embarrassed when she makes mistakes. This can lead to her feeling anxious and frustrated during class discussions and presentations. Sarah is tech-savvy and enjoys using her laptop to take notes and organize her schedule. She spends most of her time studying in the graduate student lounge.
Name:
Quinn
Age:
23 years old
Description:
Quinn is a twenty-three year old woman and working to wards a degree in Neuroscience. Her fingers are considerably less dexterous and precise from an accident. She’s been struggling to use her phone as effectively as before, and finds that she often requires an adaptable UI. Although she struggled in her first year, learned how to study and has since done well in school. She’s found that she is getting highly frustrated when it takes her longer to learn a concept. Quinn has some academic accommodations due to her injury, and they recommended that she try to find some way to decrease her emotions during studying.

Findings

From the personas, we realized to focus on usability, repeated use and simplifying data entry as much as possible. Given the private nature of the data collected, we ensured user data would be safe behind a username. To help users identify and log their emotions, we used Plutchik’s Wheel of Emotions and further catered options after surveying students.  

User Flows

To encourage regular logs, we opted to use a mobile platform. Looking at adjacent health apps, user actions were separated into logging, stats, online articles and resources into pages. For further depth, a scale to describe the intensity of emotions and emphasize multiple emotions per log to allow complexity was implemented. Pairing this with a category tag system allowed users to add complexity to their logs. To ensure users understand how to use the app, metaphors such as diary entries were used. Using an interface adjacent to fitness apps focuses on a more familiar user experience. Using common icons and graphs to promote recognition over recall. When it came to data representation, we leaned more towards showing proportions over time rather than individual logs. This allows the user a more encompassing summary instead of focusing on small moments in time.

Flows

User flow for app

WireFrames

Login Page version1
User needs to setup the app using their name, gender, birthday, password. To continue to the landing page they must accept terms and conditions.
Home Page version 1
At the landing page, the user is welcomed and is prompted to check in and create a new log.
Summary Page version 1
They are taken to the Summary page where they can review the emotions they had over different periods of time
Summary page 2 Version 1
The monthly over view shows the number of logs per topic and the most common emotion associated. Users use the arrows to change the month.
Log Page Version 1
Users use a stepped slider bar from 0 to 5 to express the intensity of their emotion. Once time is selected, the user has the opportunity to relate this log to a category via hashtag and/or add additional notes.
Articles page version 1
The Articles page provides users with web articles and vidoes based on logs and patterns.
Resources page version 1
The Resource page provides users with local clinics and mental health providers for professional help.
Settings page version 1
The Settings page lets users change account information, categories and language.

Testing

Seeing our design come to life was exciting, but we understood the importance of engaging our end users in the design process. To ensure their voices were heard, we conducted multiple user tests with our prototype. We expected to find issues in our user flow and hoped to keep the conversation as open as possible.

Technique

To gain insight into the usability of our application, gathering rich and non-specific information from participants was preferred. The purpose of this study was not to evaluate particular features of the application but to gain a better understanding of the pathways participants would take, as well as any obstacles they may face. For this reason, we decided to combine a Think Aloud study with a brief semi-structured interview.

Findings

From the testing, it was found a mixed reaction. Some enjoyed the modern, simplistic interface, while others found it confusing. Testers thought the graphs were overwhelming, given the prototype was done in greyscale. Others found the icons and emojis inconsistent with

Improvements

Given the varied responses, a high-impact, low, effort task list was made. In response, the language regarding adding a log was changed from “Check-In” to “Log Mood ”.This cleared up confusion regarding one of the main features. The capability to add a log from anywhere in the app was added, seeing that it would be the feature users would use the most. Colours corresponding to emotions were implemented throughout the app consistently to ensure less confusion and better recognition. Changing the category tag to a checklist format ensured less user error in the form of misspelled tags and encouraged recognition over recall for a faster logging experience. Smaller changes with great impact included adding a logout button, tutorials, and a dark mode.
Home Page version 1
Final Landing page
The "Check-In" button is replaced with "Log Mood" for more clarity. The icon is also used in the top bar to enable quick logging.
Summary Page version 1
Final Stats page
Colours related to emotions are used throughout the app. Pressing and holding reveals the label and a tutorial is included in the top right corner.
Log Page Version 1
Final Log page
The tagging system for topics is swapped for a checkbox. The topics can be edited or removed in the settings page.
Summary page 2 Version 1Final Log page 2
The emojis are removed for more consistency. The colors used on the other statistics page are used instead.

Final Product

The final product was a fully interactive prototype that allowed users to log their moods quickly and easily. The changes implemented reduce the clicks required to complete tasks and increase the efficiency of use. Due to user testing, more common icons were applied, and inconsistent design elements were removed. A clearer button hierarchy was enforced, and common tasks were made readily available.

Reflection

This project taught me much about the design process and the steps going into creating clear and usable user interfaces. The user testing made me more flexible on design choices and allowed me to relate more with those who use the app.