Unfold
A Daily Digital Wellness Journal w/ Insights + Tracking
Context
Unfold was a collaborative class project where my team and I designed and developed a wellness-tracking app. Unlike my earlier projects that focused on research and prototyping, this project pushed me into hands-on web development. I worked directly with React, JSX, and Bootstrap, building interactive features that transformed our designs into a functioning app. The app itself is centered on daily check-ins: tracking mood, social energy, digital well-being, sleep, and gratitude—helping users notice patterns and build healthier habits. What makes it special is its balance of playful UI elements with a clean, accessible structure that encourages reflection without feeling overwhelming.
Unfold was a collaborative class project where my team and I designed and developed a wellness-tracking app. Unlike my earlier projects that focused on research and prototyping, this project pushed me into hands-on web development. I worked directly with React, JSX, and Bootstrap, building interactive features that transformed our designs into a functioning app. The app itself is centered on daily check-ins: tracking mood, social energy, digital well-being, sleep, and gratitude—helping users notice patterns and build healthier habits. What makes it special is its balance of playful UI elements with a clean, accessible structure that encourages reflection without feeling overwhelming.
Unfold was a collaborative class project where my team and I designed and developed a wellness-tracking app. Unlike my earlier projects that focused on research and prototyping, this project pushed me into hands-on web development. I worked directly with React, JSX, and Bootstrap, building interactive features that transformed our designs into a functioning app. The app itself is centered on daily check-ins: tracking mood, social energy, digital well-being, sleep, and gratitude—helping users notice patterns and build healthier habits. What makes it special is its balance of playful UI elements with a clean, accessible structure that encourages reflection without feeling overwhelming.
Product Designer + Front-End Developer
June - August 2025
Fiona Evans, Kristina Tran, Sangini Mehta
Problem Statement
Students struggle with stress, screen time, and balancing school with personal well-being. We wanted to build a tool that turns self-care into a simple, daily ritual.
Problem Statement
Students struggle with stress, screen time, and balancing school with personal well-being. We wanted to build a tool that turns self-care into a simple, daily ritual.
Early Ideation
From sketches, we moved into Figma, creating a warm, calming design system with soft colors (#FFF6C6, #42583D) and simple micro-interactions.
From sketches, we moved into Figma, creating a warm, calming design system with soft colors (#FFF6C6, #42583D) and simple micro-interactions.
Self-Talk
Digital Wellbeing
Stress + Anxiety
Brain Clarity
Brain Clarity
Social Connection
Optimism + Outlook
Sleep Quality
Gratitude + Achievement
The Primary Dimensions of Modern Well-Being
The Primary Dimensions of Modern Well-Being
Together, these sub-dimensions form a holistic snapshot of how students balance their lives, turning abstract emotions into trackable patterns.
Brain Clarity
Brain Clarity
Self-Talk
Digital Wellbeing
Digital Wellbeing
Stress + Anxiety
Social Connection
Optimism + Outlook
Gratitude + Achievement
With these six dimensions defined, our next challenge was translating abstract feelings into simple, engaging interactions.
With these six dimensions defined, our next challenge was translating abstract feelings into simple, engaging interactions.
The Daily Check-In
The Daily Check-In
Unlike my earlier projects, Unfold was coded from the ground up in React. I built stateful components for mood sliders, dropdowns, and gratitude entries, so each interaction updated dynamically.
Unlike my earlier projects, Unfold was coded from the ground up in React. I built stateful components for mood sliders, dropdowns, and gratitude entries, so each interaction updated dynamically.
Unlike my earlier projects, Unfold was coded from the ground up in React. I built stateful components for mood sliders, dropdowns, and gratitude entries, so each interaction updated dynamically.
Core Features
Joy Bubble
A relaxing and motivating way to revisit gratitude over time. Joy Bubble gathers your daily entries into floating bubbles, letting you watch your “thankfulness archive” grow and giving you small reminders of the moments that bring light into your day.
Emotional Forecast
Using trends from your check-ins, Emotional Forecast transforms mood, energy, and sleep data into weekly insights. By applying simple data analysis techniques, it highlights patterns and offers tailored suggestions, like a weather report for your emotional well-being.
What's next for Unfold?
What's next for Unfold?
Reset
Room
A calming space designed for stressful moments. The Reset Room will guide users through breathing exercises, grounding activities, and short meditations—helping them reset when their emotional weather feels stormy.
Reset
Room
A calming space designed for stressful moments. The Reset Room will guide users through breathing exercises, grounding activities, and short meditations—helping them reset when their emotional weather feels stormy.
Reset
Room
A calming space designed for stressful moments. The Reset Room will guide users through breathing exercises, grounding activities, and short meditations—helping them reset when their emotional weather feels stormy.
Smarter
Forecasts
By layering in predictive modeling, Unfold could offer personalized forecasts that adapt over time. Imagine waking up to insights like: “Your mood tends to dip on Wednesdays—schedule something energizing today.”
Smarter
Forecasts
By layering in predictive modeling, Unfold could offer personalized forecasts that adapt over time. Imagine waking up to insights like: “Your mood tends to dip on Wednesdays—schedule something energizing today.”
Smarter
Forecasts
By layering in predictive modeling, Unfold could offer personalized forecasts that adapt over time. Imagine waking up to insights like: “Your mood tends to dip on Wednesdays—schedule something energizing today.”
Community
+Sharing
Unfold could expand beyond individual tracking by allowing users to share gratitude moments with friends or create private “joy circles.” This adds social connection to strengthen well-being habits.
Community
+Sharing
Unfold could expand beyond individual tracking by allowing users to share gratitude moments with friends or create private “joy circles.” This adds social connection to strengthen well-being habits.
Community
+Sharing
Unfold could expand beyond individual tracking by allowing users to share gratitude moments with friends or create private “joy circles.” This adds social connection to strengthen well-being habits.
Takeaways
Takeaways
Versatility
/
01
I bridged design and development.
Learned to move beyond static prototypes.
Translated designs into working code.
Balanced creativity with technical accuracy.
Versatility
/
01
I bridged design and development.
Learned to move beyond static prototypes.
Translated designs into working code.
Balanced creativity with technical accuracy.
Versatility
/
01
I bridged design and development.
Learned to move beyond static prototypes.
Translated designs into working code.
Balanced creativity with technical accuracy.
Proficiency
/
02
I built technical confidence in web development.
Built dynamic features with React and Javascript.
Debugged and iterated on live components.
Gained confidence writing front-end logic.
Proficiency
/
02
I built technical confidence in web development.
Built dynamic features with React and Javascript.
Debugged and iterated on live components.
Gained confidence writing front-end logic.
Proficiency
/
02
I built technical confidence in web development.
Built dynamic features with React and Javascript.
Debugged and iterated on live components.
Gained confidence writing front-end logic.
Clarity
/
03
I created clarity from messy problems.
Broke down abstract emotions into metrics.
Designed check-ins with simple and intuitive interactions.
Made complex patterns easy to track.
Clarity
/
03
I created clarity from messy problems.
Broke down abstract emotions into metrics.
Designed check-ins with simple and intuitive interactions.
Made complex patterns easy to track.
Clarity
/
03
I created clarity from messy problems.
Broke down abstract emotions into metrics.
Designed check-ins with simple and intuitive interactions.
Made complex patterns easy to track.
Initiative
/
04
We collaborated while I took ownership.
Took lead on UI implementation challenges.
Kept our codebase consistent with shared patterns.
Balanced group alignment with personal responsibility.
Initiative
/
04
We collaborated while I took ownership.
Took lead on UI implementation challenges.
Kept our codebase consistent with shared patterns.
Balanced group alignment with personal responsibility.
Initiative
/
04
We collaborated while I took ownership.
Took lead on UI implementation challenges.
Kept our codebase consistent with shared patterns.
Balanced group alignment with personal responsibility.
