PLEASE VIEW THIS PAGE ON A DESKTOP

PLEASE VIEW THIS PAGE ON A DESKTOP

TARA VATHUL

PRODUCT DESIGNER

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

  1. Dashboard
  2. Calendar
  3. Dream Details
  4. Share with Friends

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

26

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:

  • A feed where users can post selected dreams with captions or journal entries
  • A dashboard featuring personalized articles about dreams, sleep quality, and related insights
  • A calendar that allows users to view past dream entries and corresponding data

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:

 

  1. Run usability tests to gauge whether core flows feel intuitive
  2. Connect with Apple Watch or Oura Ring to automate sleep data tracking
  3. Add clearer trend visualizations for dreams and sleep patterns
  4. Build privacy settings for users who share dream entries
  5. Develop a high-fidelity prototype to test on multiple devices

 

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.

------

------

------

------