Low to Mid Fidelity Iterations
Low to Mid Fidelity Iterations
Low to Mid Fidelity Iterations
Development Logic
Development Logic
Mood Tracker
To enable users to track their mood over time, I implemented CRUD functionality within the app.
The Create action allows users to log their daily mood by selecting from predefined options or entering a custom value. Once the mood is logged, the data is saved to the user's profile.
The Read action ensures users can view their past mood logs in an organized manner, displaying the data in a timeline or calendar view.
For ease of use, I integrated Update functionality, allowing users to edit their mood logs if they wish to make corrections or reflect on changes.
The Delete action gives users the ability to remove any mood logs they no longer want stored.
This process ensures a seamless and flexible user experience, empowering individuals to monitor their emotional patterns over time. All data is securely saved and can be easily accessed, providing both users and professionals with valuable insights into emotional trends.
To enable users to track their mood over time, I implemented CRUD functionality within the app.
The Create action allows users to log their daily mood by selecting from predefined options or entering a custom value. Once the mood is logged, the data is saved to the user's profile.
The Read action ensures users can view their past mood logs in an organized manner, displaying the data in a timeline or calendar view.
For ease of use, I integrated Update functionality, allowing users to edit their mood logs if they wish to make corrections or reflect on changes.
The Delete action gives users the ability to remove any mood logs they no longer want stored.
This process ensures a seamless and flexible user experience, empowering individuals to monitor their emotional patterns over time. All data is securely saved and can be easily accessed, providing both users and professionals with valuable insights into emotional trends.
To enable users to track their mood over time, I implemented CRUD functionality within the app.
The Create action allows users to log their daily mood by selecting from predefined options or entering a custom value. Once the mood is logged, the data is saved to the user's profile.
The Read action ensures users can view their past mood logs in an organized manner, displaying the data in a timeline or calendar view.
For ease of use, I integrated Update functionality, allowing users to edit their mood logs if they wish to make corrections or reflect on changes.
The Delete action gives users the ability to remove any mood logs they no longer want stored.
This process ensures a seamless and flexible user experience, empowering individuals to monitor their emotional patterns over time. All data is securely saved and can be easily accessed, providing both users and professionals with valuable insights into emotional trends.
Brand Inspiration
Brand Inspiration
Github Repo
Demo link
HTML | CSS | Javascript | Node.js | Express | Passport.js | MongoDB
Mood Tracker
Final Design
Final Design
This mood tracker helps individuals monitor emotions, promoting self-awareness and better mental health.
This mood tracker helps individuals monitor emotions, promoting self-awareness and better mental health.
Solo UX Engineer
Role
Track daily moods
Identify emotional patterns
View mood trends over time
Track daily moods
Identify emotional patterns
View mood trends over time
Features
Development:
HTML/CSS
Client-side and server-side JavaScript
Node.js
Express
Passport.js
Development:
HTML/CSS
Client-side and server-side JavaScript
Node.js
Express
Passport.js
Design:
Figma
UX Design
UI Design
Interaction Design
Animation
Tools + Methodologies
Product Development Process
Product Development Process
Many individuals struggle to recognize and manage their emotional health due to inconsistent self-awareness or difficulty tracking mood changes over time. Without proper tools, identifying patterns, triggers, or trends can be difficult, leading to ineffective mental health management.
Many individuals struggle to recognize and manage their emotional health due to inconsistent self-awareness or difficulty tracking mood changes over time. Without proper tools, identifying patterns, triggers, or trends can be difficult, leading to ineffective mental health management.
Many individuals struggle to recognize and manage their emotional health due to inconsistent self-awareness or difficulty tracking mood changes over time. Without proper tools, identifying patterns, triggers, or trends can be difficult, leading to ineffective mental health management.
The Challenge
The Challenge
The Challenge
Individuals seeking better mental health management, including those experiencing mood swings, stress, anxiety, or depression. This tool is also valuable for those working with mental health professionals, as well as anyone looking to improve emotional well-being.
Individuals seeking better mental health management, including those experiencing mood swings, stress, anxiety, or depression. This tool is also valuable for those working with mental health professionals, as well as anyone looking to improve emotional well-being.
Individuals seeking better mental health management, including those experiencing mood swings, stress, anxiety, or depression. This tool is also valuable for those working with mental health professionals, as well as anyone looking to improve emotional well-being.
Target Audience
Target Audience
Target Audience
The challenge is creating a simple yet effective tool that encourages daily use and provides meaningful insights to users. A mood tracker must be intuitive, engaging, and secure while addressing the growing demand for self-help tools in mental health care, potentially improving user outcomes and reducing reliance on professional interventions for basic mood monitoring.
The challenge is creating a simple yet effective tool that encourages daily use and provides meaningful insights to users. A mood tracker must be intuitive, engaging, and secure while addressing the growing demand for self-help tools in mental health care, potentially improving user outcomes and reducing reliance on professional interventions for basic mood monitoring.
The challenge is creating a simple yet effective tool that encourages daily use and provides meaningful insights to users. A mood tracker must be intuitive, engaging, and secure while addressing the growing demand for self-help tools in mental health care, potentially improving user outcomes and reducing reliance on professional interventions for basic mood monitoring.
Business Problem
Business Problem
Business Problem
Checkout the Github repo
Checkout the Github repo
Checkout the Github repo
My approach to the UI/UX of the application was to analyze the user actions and functionalities of mood tracker concepts and how they inspired a smooth user experience.
Color Is Key
Align the user action of a logged emotion to immediately reflect in the UI itself. This enables a clear input/output response of the application to provide quick and clear user satisfaction.
KISS - Keep It Simple Silly
Make it clear what the objective is. The user is entering the application with an emotion that needs to be logged and reflected, not further exasperated through a complicated UI
My approach to the UI/UX of the application was to analyze the user actions and functionalities of mood tracker concepts and how they inspired a smooth user experience.
Color Is Key
Align the user action of a logged emotion to immediately reflect in the UI itself. This enables a clear input/output response of the application to provide quick and clear user satisfaction.
KISS - Keep It Simple Silly
Make it clear what the objective is. The user is entering the application with an emotion that needs to be logged and reflected, not further exasperated through a complicated UI
My approach to the UI/UX of the application was to analyze the user actions and functionalities of mood tracker concepts and how they inspired a smooth user experience.
Color Is Key
Align the user action of a logged emotion to immediately reflect in the UI itself. This enables a clear input/output response of the application to provide quick and clear user satisfaction.
KISS - Keep It Simple Silly
Make it clear what the objective is. The user is entering the application with an emotion that needs to be logged and reflected, not further exasperated through a complicated UI
Demo Link
View the live site
View the live site
View the live site
To start my UI exploration I usually start with the layout. Within the mood tracker there are 3 functionalities which I grouped for a more defined exploration:
Adding a mood
Reviewing mood activities
Review mood entries list to edit or delete logged moods
To start my UI exploration I usually start with the layout. Within the mood tracker there are 3 functionalities which I grouped for a more defined exploration:
Adding a mood
Reviewing mood activities
Review mood entries list to edit or delete logged moods
I then started to apply the rationale of using color to not only reflect user input, but to center’s the user attention in their primary goal of coming to the mood tracker: log the mood to receive suggested activities. Additionally I wanted these 2 actions to become more visually consistent with their placement on the page by removing the near white fill of the groupings.
Then I started to think about the length of interaction between the 2 main actions. The user logging their mood is a quick interaction and so it doesn’t need to be as central to the UI as reviewing the suggested activities, which is where the user is going to find the most satisfaction since here they can take action. I also started to minimize the logged entries as this is of tertiary importance to the rest of the experience and so it doesn’t need to be as immediately accessed, but still should to be easily available when needed.
Then I started to think about the length of interaction between the 2 main actions. The user logging their mood is a quick interaction and so it doesn’t need to be as central to the UI as reviewing the suggested activities, which is where the user is going to find the most satisfaction since here they can take action. I also started to minimize the logged entries as this is of tertiary importance to the rest of the experience and so it doesn’t need to be as immediately accessed, but still should to be easily available when needed.
Then I started to think about the length of interaction between the 2 main actions. The user logging their mood is a quick interaction and so it doesn’t need to be as central to the UI as reviewing the suggested activities, which is where the user is going to find the most satisfaction since here they can take action. I also started to minimize the logged entries as this is of tertiary importance to the rest of the experience and so it doesn’t need to be as immediately accessed, but still should to be easily available when needed.
Go to Home
Brandi Nichols
✅
currently looking for full-time work
Looking for FT work
📍 Based in the Philly Tri-State Area.
📍 Philly
Need help on a project?
Mood Tracker
Mood Tracker
HTML | CSS | Javascript | Node.js | Express | Passport.js | MongoDB
Brand Inspiration
Final Design
This mood tracker helps individuals monitor emotions, promoting self-awareness and better mental health.
Solo UX Engineer
Role
Track daily moods
Identify emotional patterns
View mood trends over time
Features
Development:
HTML/CSS
Client-side and server-side JavaScript
Node.js
Express
Passport.js
Design:
Figma
UX Design
UI Design
Interaction Design
Animation
Tools + Methodologies
Product Development Process
Many individuals struggle to recognize and manage their emotional health due to inconsistent self-awareness or difficulty tracking mood changes over time. Without proper tools, identifying patterns, triggers, or trends can be difficult, leading to ineffective mental health management.
The Challenge
Individuals seeking better mental health management, including those experiencing mood swings, stress, anxiety, or depression. This tool is also valuable for those working with mental health professionals, as well as anyone looking to improve emotional well-being.
Target Audience
The challenge is creating a simple yet effective tool that encourages daily use and provides meaningful insights to users. A mood tracker must be intuitive, engaging, and secure while addressing the growing demand for self-help tools in mental health care, potentially improving user outcomes and reducing reliance on professional interventions for basic mood monitoring.
Business Problem
To enable users to track their mood over time, I implemented CRUD functionality within the app.
The Create action allows users to log their daily mood by selecting from predefined options or entering a custom value. Once the mood is logged, the data is saved to the user's profile.
The Read action ensures users can view their past mood logs in an organized manner, displaying the data in a timeline or calendar view.
For ease of use, I integrated Update functionality, allowing users to edit their mood logs if they wish to make corrections or reflect on changes.
The Delete action gives users the ability to remove any mood logs they no longer want stored.
This process ensures a seamless and flexible user experience, empowering individuals to monitor their emotional patterns over time. All data is securely saved and can be easily accessed, providing both users and professionals with valuable insights into emotional trends.
Development Logic
Github Repo
Checkout the Github repo
My approach to the UI/UX of the application was to analyze the user actions and functionalities of mood tracker concepts and how they inspired a smooth user experience.
Color Is Key
Align the user action of a logged emotion to immediately reflect in the UI itself. This enables a clear input/output response of the application to provide quick and clear user satisfaction.
KISS - Keep It Simple Silly
Make it clear what the objective is. The user is entering the application with an emotion that needs to be logged and reflected, not further exasperated through a complicated UI
Low to Mid Fidelity Iterations
Demo Link
View the live site
To start my UI exploration I usually start with the layout. Within the mood tracker there are 3 functionalities which I grouped for a more defined exploration:
Adding a mood
Reviewing mood activities
Review mood entries list to edit or delete logged moods
I then started to apply the rationale of using color to not only reflect user input, but to center’s the user attention in their primary goal of coming to the mood tracker: log the mood to receive suggested activities. Additionally I wanted these 2 actions to become more visually consistent with their placement on the page by removing the near white fill of the groupings.
Then I started to think about the length of interaction between the 2 main actions. The user logging their mood is a quick interaction and so it doesn’t need to be as central to the UI as reviewing the suggested activities, which is where the user is going to find the most satisfaction since here they can take action. I also started to minimize the logged entries as this is of tertiary importance to the rest of the experience and so it doesn’t need to be as immediately accessed, but still should to be easily available when needed.
Top of the page