My Framer Site

Work

Playground

About Me

Resume

Zoey Yan

Work

Playground

About Me

Resume

Zoey Yan

What’s In Your Dream?

In Spring 2023, I cross-registered at MIT and took 4.032: Information Design and Visualization. During the course of a month, I designed and developed an interactive coding website that helps you record, visualize and analyze your dream data.

Role

Visual Designer, Front-End Developer

Time

March 2023

Tools

Figma / Adobe Illustrator / p5.js / HTML / CSS

Overview

Dreams are a reflection of our unconscious mind and emotional truth. In this project I want to explore dreams: what kinds of emotions do people have, what common symbols are there and what do they imply. This project serves as a catalog of dreams from 40 different user, and it’s continuously evolving.

Check my Github!

Go to the Website

Research

In the first stage of our research, I wanted to find commonalities between different dreams, and prepare a common ground for my data visualization. I conducted literature reviews and internet search to narrow down a list of common recurring themes in dreams.

For the next step, I dived into common emotions associated with dreams, and identified 10 emotions: Angry, Anxious, Shocked, Scared, Sad, Depressed, Surprised, Confused, Happy, and Loved.

When thinking about the visualization structure, I further divided dreams into three different types: Positive, Neutral, and Negative, as well as dividing the cause of a dream into Stimulus, Memory, and Imagination.

For the next step, I dived into common emotions associated with dreams, and identified 10 emotions: Angry, Anxious, Shocked, Scared, Sad, Depressed, Surprised, Confused, Happy, and Loved.

Data Collection

I sent out a google form and got 40 replies. The data was stored in a csv file ready to be used.

Ideation

Bur before I jumped into coding, I first determined the style, type of visualization graphs, and interaction mechanisms. I want the overall website to look soothing, dreamy, and interesting to explore.

Experiment With Typography

Experiment With Background and Visualization Design

Flying

Being Trapped

Body of Water

Being Chased

Seeing a Monster

Being lost

Women

Men

Want some kind of data visualization like this. On the left side is common dream topics, and horizontally are all the different emotions. The size of the circle indicates how often that emotion is associated with that topic, and different emotions have different colors.

fear

sad

loved

happy

Less

Experiment With Background and Data Representation

Final Design

Filters on the side (KEY) and top of the website -> hover to see more information

Hover on individual icons to see details about the dream

Visualization on the relationship between common emotions (x-axis) and common themes (y-axis)

Instagram