PLEASE VIEW THIS PAGE ON A DESKTOP
PLEASE VIEW THIS PAGE ON A DESKTOP
Context
UI CONCEPT DESIGN CHALLENGE | IMAGINED 2023

ROLE
Product Designer
TIMELINE
5 hours
SKILLS
Product design
Visual design
Prototyping
CONTEXT
Dreaming is a universal experience, but one that is often forgotten upon waking. As a vivid dreamer myself, I wanted to explore how design could help people capture and interpret their dreams to better understand subconscious patterns.
OVERVIEW
Beam is a conceptual mobile app that merges dream journaling with sleep tracking and data-driven insights. It empowers users to log dreams, analyze recurring themes, and uncover correlations between sleep quality and dream content.

SOLUTION
Beam was imagined to make dream journaling feel natural. The experience begins the moment a user wakes up, guiding them through a calm and intuitive flow that helps capture their thoughts before they fade.
Each entry becomes a reflection of emotion and memory rather than just text. The app visualizes patterns and themes over time, allowing users to find connections between their dreams, emotions, and sleep quality.
CORE FEATURES

5:00
Dashboard
This week
Insight into my dreams
Sleep Quality
20
15
10
5
01
02
03
04
Dream vividity
20
15
10
5
01
02
03
04
Learn More
REM Cycles
Learn More
Insight into my dreams
Learn More
beam

DASHBOARD
The dashboard acts as the user’s central hub for understanding their sleep and dream patterns. Users can view trends in sleep quality, REM cycles, and dream vividness. Quick-access cards provide summaries and educational insights without overwhelming the user.

5:00
Dream Rewind
Dream - 10/26/22
Today’s dream was about lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vestibulum neque sed leo ullamcorper, posuere mollis dolor elementum Quisque ultrices, justo in suscipit feugiat, nunc nulla malesuada
October 2022
S
25
27
28
29
30
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
30
31
26
27
28
29
M
T
W
Th
F
S

beam

CALENDAR
A monthly view that helps users log and revisit dreams. Each date links to a specific entry, creating a visual timeline of dream activity. The layout emphasizes clarity and encourages consistent journaling.

5:00
Dream - 10/26/22
Vividity
Today’s dream was about lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget enim nec nisl vulputate efficitur. Etiam porttitor luctus leo, at egestas magna vulputate vel. Aliquam commodo suscipit ultricies. Sed posuere a libero id porta. Pellentesque nec dui a sapien cursus euismod eget non ex. Morbi dictum blandit purus, non tempus sem facilisis sit amet. Suspendisse lectus dolor, laoreet...

beam

Length
REM
DREAM DETAILS
A detailed log for each dream. Users can add text, visuals, and rate key aspects like vividity, length, and REM phase. The structured layout makes recording and reflecting on dreams quick and organized.

5:00
beam

taravathul
taravathul lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget enim nec nisl vulputate efficitur. Etiam porttitor luctus leo, at egestas magna vulputate vel.

mywinnie
mywinnie lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget enim nec nisl vulputate efficitur. Etiam porttitor luctus leo, at egestas magna vulputate vel.

breadman
taravathul lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eget enim nec nisl vulputate efficitur. Etiam porttitor luctus leo, at egestas magna vulputate vel.

SHARE WITH FRIENDS
A social space where users can share select dreams with friends. Posts include short descriptions and media, promoting connection through shared experiences while keeping the interface clean and focused.
RESEARCH
Based on academic studies on sleep quality, I found that sleep quality can be measured by a variety of metrics, including Total Sleep Time and Sleep Efficiency. Other important metrics for tracking dreams include the stages of sleep, and the apnea-hypopnea index. These metrics could be used to give users insight into the quality of the sleep that they're getting, and how that correlates to the quality of their dreams.
IDEATION + PROTOTYPING
During ideation, I identified an opportunity to make the app more engaging by introducing a social component. Sharing personal experiences is a major part of modern digital behavior, and enabling users to share their dreams could add a unique storytelling layer to the product.
The key features I prioritized were:
DESIGN DECISIONS
Typography: The interface uses Inter, chosen for its readability and modern appearance. It keeps the experience clean and approachable across all screens.
Color Palette: The primary colors include #EFE5FC (lavender white), #7053A9 (deep purple), #B061FF (vibrant violet), and #1F1935 (midnight navy). Together, they create a soothing, night-inspired gradient that supports the app’s sleep-oriented theme.
Layout and Components: Rounded cards and soft shadows reinforce a sense of calm and focus. Each screen is structured for quick comprehension and smooth navigation, minimizing cognitive load.
Consistency: Elements such as button shapes, text hierarchy, and icon style were standardized to maintain visual cohesion across the login, dashboard, calendar, and feed experiences.
REFLECTIONS + NEXT STEPS
Working on Beam strengthened my ability to translate abstract concepts into structured digital experiences. The challenge required turning open-ended ideas like dream logging and sleep tracking into practical, usable features that could be easily understood by first-time users.
Some next steps could be:
Overall, working on this design challenge was a rewarding experience that pushed me to think critically about how to make abstract concepts more tangible through design. Turning Beam from an idea into a clear, usable concept reminded me of the impact thoughtful design can have when it transforms curiosity into something actionable.
------
------
------
------