Lumi

An emotion-tracking app designed to help users build emotional literacy and discover supportive next steps.

Project

Mobile Web App (Course Project)

Role

Entire product design from research to conception, visualization and testing

Timeframe

6 months

Tools

Figma, Lyssna, Miro, Claude

About the project

Lumi is an emotion-tracking app that helps users name what they're feeling, spot patterns and find strategies to cope - guided and focused, without adding to the noise of everyday life.

I explored this as part of CareerFoundry's UX/UI Design program, working through the full design process independently, from user research and information architecture to prototyping and usability testing.

The Problem Space

In a world that moves faster and demands more, it's easy to loose touch with how you're actually feeling. Emotions go unnoticed until they become overwhelming. I wanted to explore how a product can help overwhelmed individuals identify and name their emotions and offer support and education on how to manage them.

Where existing apps fall short

Competitive analysis revealed that most apps fall into two camps: quick mood check-ins with limited depth, or deeper exploration that can feel complex and lacks clear guidance.

In a world that moves faster and demands more, it's easy to lose touch with how you're actually feeling, so Emotions go unnoticed until they become overwhelming. I wanted to explore how a product can help overwhelmed individuals identify and name their emotions and offer support and education on how to manage them.

Where existing apps fall short

Competitive analysis revealed that most apps fall into two camps: quick mood check-ins with limited depth, or deeper exploration that can feel complex and lacks clear guidance. This gap shaped Lumi's direction: a calm, guided experience that balances low effort with meaningful insight.

This gap shaped Lumi's direction: a calm, guided experience that balances low effort with meaningful insight.

From Research to Personas

After completing the competitive analysis I wanted to explore how people identify and manage emotions, where they need support and how that support could look like. I conducted a online survey and 4 in-depth interviews. Utilizing affinity and empathy mapping, the key insights were then translated into User Personas.

Two user patterns, one shared core flow

What surprised me: I'd expected most people to struggle with naming emotions - but that was only true for some. Others were already emotionally aware, yet still wanted support to engage more regularly and learn new tools. Different motivations, but a shared need: a calm, frictionless experience that fits into daily life without performance pressure and delivers real value through insight.

After completing the competitive analysis I wanted to explore how people identify and manage emotions, where they need support and how that support could look like. I conducted a online survey and 4 in-depth interviews. Utilizing affinity and empathy mapping, the key insights were then translated into User Personas.

Two user patterns, one shared core flow

What surprised me: I'd expected most people to struggle with naming emotions — but that was only true for some. Others were already emotionally aware, yet still wanted support to engage more regularly and learn new tools.

Different motivations, but a shared need: a calm, frictionless experience that fits into daily life without performance pressure and delivers real value through insight.

Paul needs simple guided tracking, supportive language, and clear value through insights and actionable tools.

Hannah needs an essentials-first interface, continued learning through articles and exercises, and a structure that’s easy to return to.

Defining the main tasks

My research gave me a lot of input, but three key tasks emerged from Paul's and Hannah's needs:

  1. Add an emotion entry

  2. Review entries and patterns

  3. Start an exercise

Visualising them as user flows laid the groundwork for the app's architecture and navigation.

While my research gave me a lot of input, I had to narrow it done. Based on Pauls and Hannahs needs three key tasks emerged:

  1. Add an emotion entry

  2. Review entries and patterns

  3. Start an exercise

Visualising them as user flows laid the groundwork for the app's architecture and navigation.

  • A two-step flow to help Paul name emotions, with optional context for deeper insights

  • Two views: overview to spot patterns and calendar to keep exploration focused

  • Category browsing for newcomers, quick access to saved exercises for returning users

  • A two-step flow to help Paul name emotions, with optional context for deeper insights

  • Two views: overview to spot patterns and calendar to keep exploration focused

  • Category browsing for newcomers, quick access to saved exercises for returning users

  • A two-step flow to help Paul name emotions, with optional context for deeper insights

  • Two views: overview to spot patterns and calendar to keep exploration focused

  • Category browsing for newcomers, quick access to saved exercises for returning users

  • A two-step flow to help Paul name emotions, with optional context for deeper insights

  • Two views: overview to spot patterns and calendar to keep exploration focused

  • Category browsing for newcomers, quick access to saved exercises for returning users

Creating the structure

I translated the flows into a sitemap and validated it through two rounds of card sorting. One unexpected finding shaped the structure: users clearly distinguished between active and passive content - exercises for doing, articles for learning. I had initially grouped them together, but the sorting results made separating them the obvious call.

Updating navigation labels

Functional names gave way to user language: "Explore" for articles, "My Emotions" for insights and patterns.

From Wireframes to Prototype

With the structure in place I started to sketch the core flows, built mid-fidelity wireframes, and created a clickable prototype - iterating on clarity, navigation, and interaction states.

Shaping the emotion-tracking feature

The emotion tracking feature is based on Stavemann's Feeling Star, a framework from behavioural therapy. I translated the model into a flow that guides users from core emotions to nuanced intensity levels, helping them name what they're feeling more precisely.

Step 1
Exploring With paper sketches

Step 2
Translating them into wireframes

Step 3
BUILDING AN INTERACTIVE PROTOTYPE

  • Step 1
    Exploring With paper sketches

  • Step 2
    Translating them into wireframes

  • Step 3
    BUILDING AN INTERACTIVE PROTOTYPE

  • Step 1
    Exploring With paper sketches

  • Step 2
    Translating them into wireframes

  • Step 3
    BUILDING AN INTERACTIVE PROTOTYPE

Testing the solution

To validate the core flows and interactions, I conducted moderated usability tests with 6 participants using the mid-fidelity prototype. I synthesized findings in a Rainbow Spreadsheet and used Nielsen's severity scale to prioritize issues.

Tone and concept resonated but there was friction

The tone landed well, and participants moved through the app with ease. But testing surfaced friction in the details - around gestures, navigation cues, and copy - which drove targeted improvements to the tracking flow, confirmation screen, and microcopy.

  • Example 1 - Clarifying Emotion Tracking

    Tested Version

    Revised Version

    Issue - High Severity
    5 of 6 participants tried to swipe or tap “Next” for more emotions. Navigation cues implied more options, so users hesitated to commit.

    What changed

    Clarified Step 1 with improved copy

    Removed misleading navigation cues

  • Example 2 - EXPANDING POST-TRACKING OPTIONS

    Tested Version

    Revised Version

    Issue - Medium Severity
    3 of 6 participants wanted to learn more about their emotion after saving an entry. Since the screen only offered an exercise, it didn’t match every user’s intent in that moment.

    What changed

    Added a “Learn more” option

  • Example 1 - Clarifying Emotion Tracking

    Tested Version

    Revised Version

    Issue - High Severity
    5 of 6 participants tried to swipe or tap “Next” for more emotions. Navigation cues implied more options, so users hesitated to commit.

    What changed

    Clarified Step 1 with improved copy

    Removed misleading navigation cues

  • Example 2 - EXPANDING POST-TRACKING OPTIONS

    Tested Version

    Revised Version

    Issue - Medium Severity
    3 of 6 participants wanted to learn more about their emotion after saving an entry. Since the screen only offered an exercise, it didn’t match every user’s intent in that moment.

    What changed

    Added a “Learn more” option

Establishing Visual Design

Developing a visual direction

After validating Lumi's core flows with a grayscale prototype, I wanted to ensure the visual design supported emotional clarity without adding overwhelm. I ran a preference test comparing two approaches.

Most participants preferred the Soft direction, describing it as calmer and more approachable, so it became the foundation for the final UI.

Soft - "The Winner"
Perceived as calm and approachable

Soft

Shapes
Perceived as active and playful

Shapes

From direction to system: One emotion = one color
From direction to system:
One emotion = one color

Lumi's core features - emotion tracking, My Emotions, and emotion-linked exercises and articles - work as one connected system. A consistent visual language helps users move between features without re-orienting, reinforcing emotional continuity rather than breaking it.

The Final Solution

Core flow 1

Adding an emotion entry

Tracking stays quick and low-effort while supporting deeper reflection. Optional context focuses on situational triggers and body sensations, grounded in research and emotion theory to generate meaningful insights.

Tracking stays quick and low-effort while supporting deeper reflection. Optional context focuses on situational triggers and body sensations, grounded in research and emotion theory to generate meaningful insights.

Core flow 2

Reviewing patterns

My Emotions turns daily tracking into practical insight. Users spot patterns through an overview of emotions, triggers, and body sensations or switch to the calendar to revisit specific entries.

My Emotions turns daily tracking into practical insight. Users spot patterns through an overview of emotions, triggers, and body sensations or switch to the calendar to revisit specific entries.

Core flow 3

Doing an exercise

Exercises are organized into needs-based categories and mapped to emotions so users can quickly find relevant support. Clear previews reduce uncertainty, and saved exercises make it easy to return to what worked.

Exercises are organized into needs-based categories and mapped to emotions so users can quickly find relevant support. Clear previews reduce uncertainty, and saved exercises make it easy to return to what worked.

Want to see more?
Try the interactive prototype:

Want to see more?

Try the Prototype

Reflection

This project constantly challenged me to balance breadth with focus. Research opened up directions like privacy features or deeper personalisation, that were valuable findings but out of scope for an MVP. Deciding what not to build was as important as deciding what to include.

Research also challenged one of my core assumptions. I'd expected most users would struggle to name emotions - but I found a second group who were already emotionally literate, came with different motivations, and still shared the same need for frictionless tools. Their strong interest in educational content, combined with card sorting results, directly shaped the app's structure: what started as three core areas became four.

The UI phase also taught me something about my own working style. My structured approach led to a consistent colour system across all eight emotions - but it also meant I sometimes struggled to think more freely and exploratively. Visual design needs both, and finding that balance is something I want to keep developing.