VISUALIZING AND INTERPRETING OUR DREAMS

Melo

ROLE

UX/UI Design

UX/UI Design

Wireframing

Wireframing

Prototyping

Prototyping

TIMELINE

72 hours

72 hours

March 2026

March 2026

TOOLS

Figma Design, Slides, Make

Figma Design, Slides, Make

FigJam

FigJam

TEAM

Cathy Yin

Cathy Yin

OVERVIEW

Melo is a speculative mobile product designed to help users capture, interpret, and reflect on their dreams.

Melo is a speculative mobile product designed to help users capture, interpret, and reflect on their dreams.

Melo is a speculative mobile product designed to help users capture, interpret, and reflect on their dreams.

This project was created as part of the FigBuild 2026 design-a-thon, and addressed their challenge statement:

This project was created as part of the FigBuild 2026 design-a-thon, and addressed their challenge statement:

This project was created as part of the FigBuild 2026 design-a-thon, and addressed their challenge statement:

"Create a design a tool that tracks, measures, or visualizes an aspect of the human sensory experience not typically considered."

"Create a design a tool that tracks, measures, or visualizes an aspect of the human sensory experience not typically considered."

RESEARCH

Did you know?

Did you know?

Dreams often provide insight into our subconscious mind, revealing the emotions, memories, and anxieties of our waking life.

1/3

1/3

1/3

of our lives are spent asleep

of our lives are spent asleep

95%

95%

95%

of our dreams vanish within minutes of waking

of dreams vanish within minutes of waking

of our dreams vanish within minutes of waking

80%

80%

80%

of our dreams involve negative emotions

of our dreams involve negative emotions

We wanted to know how people experience their dreams

We wanted to know how people experience their dreams

We wanted to know how people experience their dreams

To gain insight into dream recall and perception, we held interviews and asked people to share details about their dreams and how they experienced them

“I tried journalling my dreams but I lose details so quickly… sometimes I’d check later and realize I wrote gibberish.”

Difficult and misread recall

Difficult and misread recall

Difficult and misread recall

"I have so many dreams at night that they all kind of blur together…"

Inaccurate recall

Inaccurate recall

Inaccurate recall

"Yea sometimes my dreams repeat, like I keep getting chased in this one dream, but I'm like, running in slow mo…"

Latent undiscovered patterns

Latent undiscovered patterns

Latent undiscovered patterns

THE PROBLEM

Unreliable dream recall

Unreliable dream recall

People forget dreams within minutes of waking. Since the average person has 3-6 dreams per night, details are lost very easily and unreliable upon recall.

Hard to understand

Hard to understand

Dreams are often very complex, making it hard to interpret and gain insights from if not approached correctly.

No pattern tracking

No pattern tracking

People don't recognize patterns in dreams overtime, therefore recurring indicators and themes may not be addressed.

People don't recognize patterns in dreams overtime, therefore recurring indicators and themes may not be addressed.

Reworked problem statement

So, what if we could turn dreams into actionable reflections, helping users understand their subconscious and emotional well-being?

DESIGN DECISIONS

Ideation

Ideation

The ideation for this project began with determining the core features of the app and creating a user flow diagram. Followed by rough sketches of the user interface, we were able to outline the skeleton of the app.

User flow diagram

Wireframes

Lo/hi-fidelity Screens

Lo/hi-fidelity Screens

Based on our early-stage wireframes, we developed a set of low-fidelity screens that translated initial concepts into more structured interface layouts. Using a consistent design system, we rapidly iterated on these screens, maintaining visual and functional consistency across the experience.

Lo-fi wireframes

Final design

FINAL DELIVERY

Our features

Our features

Not only do our features allow users to revisit past dreams, but they also use AI to help interpret and organize them to identify patterns in sleep behaviour over time, giving users deeper insight into their thoughts, emotions, and overall sleep habits.

  1. Cinemagraph

  1. Cinemagraph

A collection of photos are taken and complied to make a scrollable moving scene. Users can look at key moments in their dream identified by AI to gain dream-specific insights.

*concept inspired by iPhone live photos

  1. Dream Archive

  1. Dream Archive

Users can open their dream archive calendar to look back at old dreams. All dreams are organized by date and show a thumbnail photo to refresh memory.

  1. Search Section

  1. Search Section

Users can use the search bar to type in key words or the filter to categorize dreams for easy access and identification.

  1. Biometrics

  1. Biometrics

By examining biometric data, users can more effectively quantify and compare their sleep patterns.

Reliable dream recall

Reliable dream recall

Users can look for exact moments using the cinemagraph and compare with biometrics to for accurate dream details.

Users can look for exact moments using the cinemagraph and compare with biometrics to for accurate dream details.

Easy to understand

Easy to understand

Key moments and insights generated by AI can help users categorize and understand their dreams easier.

Key moments and insights generated by AI can help users categorize and understand their dreams easier.

Active pattern tracking

Active pattern tracking

Users can check their dream archive and to visit old dreams, and can search for dreams by filter.

Users can check their dream archive and to visit old dreams, and can search for dreams by filter.

CONSIDERATIONS

Dreams are complex and abstract

Dreams are complex and abstract

Dreams are complex and abstract

Challenge we encountered

Considering that the development of tools to record and interpret dreams are still very limited, we struggled with the practicality of this tool and wanted to further explore gaps in our product.

By having our friends test our app and examining edge cases, we identified specific scenarios that could make the app more applicable and realistic.

By having our friends test our app and examining edge cases, we identified specific scenarios that could make the app more applicable and realistic.

By having our friends test our app and examining edge cases, we identified specific scenarios that could make the app more applicable and realistic.

Edge Case 1

Emotionally Disturbing Dreams

Emotionally Disturbing Dreams

Revisiting past dreams may bring up uncomfortable or traumatic emotions.

Solution

Solution

Melo presents daily reminders that inform users of recent dreaming patterns. By using gentle, encouraging language, it offers soft reflection prompts to reduce anxiety and foster self-compassion.

Edge Case 2

Edge Case 2

Multiple Dreams Per Night

Multiple Dreams Per Night

People often have multiple dreams during a single sleep cycle, or take many naps throughout their day.

Solution

Solution

Melo detects multiple dream segments throughout the night and day by picking up on biometric shifts and categorizes them by the theme.

Drawn by Cathy Yin

Edge Case 3

Edge Case 3

Undetected Dreams

Undetected Dreams

Users may not experience dreams everyday, or have dreams that are cohesive enough for proper analysis by our AI system.

Solution

Solution

There is no solution! Proactive self-awareness should occur in our conscious state too. Melo helps to illuminate underlying emotions, serving as a reminder for us to prioritize our health and well-being.

TAKEAWAYS

Reflection & Key Takeaways

Reflection & Key Takeaways

Things I'd do differently

Looking back, I would’ve conducted more user testing to better understand how people interacted with the product and refined the experience based on real feedback. We initially created two versions of the user flow but chose the current one based on personal judgment. Next time, I would run A/B testing to guide my design decisions.

Next Steps

Melo primarily focuses on dream tracking and visualization, but another feature I hope to add in the future is a personalized AI guidance system. Users don't always know where to begin improving their lives, so this feature would provide personalized recommendations on habits, routines, and day-to-day actions based on their emotional dream patterns.

Life Lesson Learned

When designing Melo, it became less about analyzing dreams over time and more about holding space to stay with them a little longer. That same awareness can extend into our waking lives, helping us notice what we often overlook and reminding us to care for our health and well-being with greater intention.

SEE MORE WORKS

Designing a focus app for students

Reimagining a local bubble tea shop