Reflect



Project Overview
Application & Installation Experience
With this digital mood journal application, a user would ideally be able to record their daily moods. Following that, users could track and evaluate their mood on a weekly basis while also getting advice on how to deal with a bad mood or maintain a good one. Users will have access to daily, weekly, and monthly averages as a result of the data gathered over time. Users can assess tendencies they want to modify with the use of the suggested guides in order to establish healthy goals and uphold a positive outlook each day.
Role
Branding Identity
Experience Designer
Primary and Secondary Research
Influential Ideation
​
Applications
P5.js
Arduino
Adobe XD
Photoshop
Premiere
Step 1: Ideate
Initial Concepts:
-
Digital Journaling Application
-
Mood Instillation
Notes:
-
How to make an Interactive Digital Journal
-
Should I represent mood or combat specified moods?
-
Model emotion based on keywords assigned
Ideas:
-
Use gradients as base a for a screen
​
Why this idea?
A visual representation of your mood can benefit you in several ways:
-
Self-awareness: Creating a visual representation of your mood allows you to become more self-aware. It helps you recognize and acknowledge your emotions, which is the first step towards managing them effectively.
-
Clarity: By representing your mood visually, you can gain clarity and insight into your emotional state.
-
Communication: A visual representation of your mood can also be helpful when communicating with others. Sometimes, it can be difficult to put our emotions into words, but a visual representation can make it easier for others to understand how we're feeling.
-
Monitoring progress: A visual representation of your mood over time can help you track your progress in managing your emotions. It can show you how your mood has changed over time and help you identify patterns in your emotional state.
Step 2: User Experience Flow

Step 3: Research
Questions:
-
What can shapes mean in accordance with mood?
-
What can a screen depict?
-
What do certain colors represent?
-
How does the shape influence a mood?
Color Therapy:
Colors have mental and emotional effects on sighted people.
Sources:
Step 4: Case Study
​
"Gradients in motion design help capture our current emotional spectrum"
-Danyelle C Overbo
​
While reading this article, I stumbled upon a great example of what a mood screen can depict. This Adobe article discusses how gradients in motion design can evoke different emotions and create visual interest. The use of gradients can create depth, texture, and highlight movement in design. The article provides examples of how gradients can be used in motion design to create specific moods or feelings, such as calmness or excitement.
​

Step 5: Mood Board
Representing different moods using color and shape in motion can be a creative and effective way to convey emotions visually.

Installation Visual Key
​
The background color (black/white) heightens each sense of emotion!
Negative
​
Sad:
-
The color blue can be associated with feelings of sadness or melancholy.
-
The lines move in a circular pattern around the origin, which could represent the feeling of being stuck in a cycle of negative emotions.
Disconnected:
-
Each point starts evenly on the canvas. Then light lines move in random directions never connecting with one another.
Fear:
-
This is an abstract representation of chaos and unpredictability. Created is a sense of unease through unsettling lines. Each line forms a circle which moves in random motions.
-
This randomness creates a sense of chaos, with the circles moving in unpredictable directions and at varying speeds.
Isolated:
-
Dull gray background
-
This is visually interpreted as a metaphor for feeling trapped or confined. Circular forms are enclosed around each other with thick strokes of line.
-
The lack of colors and the use of a white stroke on a black background gives a sense of detachment and emptiness
Angry:
-
The bold and sharp lines give a sense of intensity and aggression.
-
The rotation of the shapes in a sporadic and fast-paced manner conveys a feeling of restlessness.
-
The choice of colors, red and orange, add to the overall sense of anger, with red often being associated with strong emotions such as anger and passion.
-
The jagged and uneven shapes that appear to be constantly shifting and changing, much like the emotions associated with anger.
Confused:
-
The shape is composed of many smaller shapes, with each shape rotating and moving at different speeds and directions, creating a sense of chaos and confusion.
-
The combination of the constantly changing colors, the chaotic movement of the individual shapes, and the unpredictable rotation of the entire shape creates a sense of confusion and disorientation
Positive
​
Peace:
-
Extremely fine multi colored lines
-
slowly moving and changing colors
-
Movements are organic movements creating a soothing, harmonious effect
Excited:
-
Continuous spiral with dynamic movement and changing colors
Calm:
-
The movement of the circular grid structure is smooth and slow
-
The black background adds to the sense of emptiness and calmness.
-
Visual effect is soothing and hypnotic, suggesting a feeling of tranquility and serenity
Energetic:
-
The use of rotating shapes that change in size and position creates a sense of motion and activity that could be seen as reflective of a high-energy state. The fact that the shapes are constantly in motion and changing shape creates a sense of dynamism that is evocative of a state of excitement and enthusiasm.
Happy:
-
The use of bright, colorful strokes that gradually change over time creates a lively and cheerful atmosphere that could be associated with happiness.
-
The color values for the strokes create a continuous, flowing pattern that is pleasing to the eye.
-
The rotating rectangles could be interpreted as representing a sense of playfulness and joy.
Step 6: Code Conceptualization
The main moods intended for depiction are six basic emotions Happy, Fear, Sad, Calm, Anger, Excited
Moods currently in the works Isolation, Centered, Excited, Calm, Confused, Happy, Energetic, Fear, Disconnected, Grounded, Peace
​
Helpful Tools:
​
Step 7: Code Text Box
Users will input one word describing how they feel into a text box.
​

Step 8: Altering Text Box Function
Text box function has been altered and tested with the word "happy" and an input.
The biggest challenge will be altering the mechanism to change after imputed mood to fit a custom screen.
​
Helpful Tools
https://www.yourowncodes.com/html-css-user-defined-background-gradient-color-text-list-box/
Step 9: Code Testing, Motion Inputs
Apply research and color theory to align with code and edit code aspects like shape to align with specified moods.
​
Credited Code Sources

Demo Installated Experience
“Mood in Motion”
More project details below:

Materials

Mood Cards

Mood Screens
I decided that my visual focus for each mood would be “Line.” Initially, my concept consisted of different flows, patterns and shapes but to make it more cohesive I decided to focus on lines in effect with different shapes as a cohesive unit. I also narrowed down my mood categories for the installation.

Reflect Application


Application Outcomes

View More Projects
