Dream Logs
Keep, share and love your dreams.
Project Overview
Dream Logs is an experience that allows users to record their dream with a “magic device” connected to a phone app that will convert their recording to text and generate matched images based on the text.
Platform
Mobile
Time
Oct 2022 - Apr 2023
7 months
Role
UX Designer
UI Designer
Prototype Developer
(left to right, top to bottom)
-
Lisa was sleeping, having a dream about her friends.
-
She opened her eyes but did not fully wake up yet.
-
She held the magic device in the dark.
-
Without any lights on, she started to talk about her dream to the device.
-
Then she got up from her bed, had a cup of coffee, meanwhile her phone received the recording from the device.
-
A dream log with date, text contents and matched images was generated.
-
She could easily review all the dream logs on the phone app.
-
With the help of the app, Lisa sent her dream to the friends she dreamed of as a dream card.
Storyboard
User Research
Define Problems
Since this was my thesis project, it was different from client-oriented design. I began by contemplating the theme of dreams, selecting keywords that I believed were crucial for myself, and then charting my creative direction accordingly.
​
Once I established my creative direction, I commenced researching the pertinent issues. My research approach comprised conducting user interviews, performing a competitor analysis, and creating a user journey map.
User Research Insights
Dream fades fast
The memory of a dream fades much faster than everyday experiences. Long-term memories could be remembered for days, months, or even years. However, interviewees reported that they would completely forget their dreams within 20 minutes to 2 hours.
The first thing in the morning usually is “check the phone”.
Check the phone
Figurative contents are hard to share,
and details are easy to be lost
Figurative contents are hard to share, and many details are lost in the sharing process, especially online sharing. People reported that they often lose track of their dream details while messaging to share with others. When I asked to share, half of the interviewees used gestures to convey the stories in their dreams.
No interest in dream interpretation
&
Willing to share with others
In the 20 to 35 age group, more than 85 percent of the interviewees showed no interest in dream interpretation, preferring to share the fantastic experience of dreams directly with friends, families, or themselves. The frequency of the sharing depends on how often they remember the dreams.
Competitive Analysis
​
​
In my competitive research session, I decided to focus on analyzing dream apps to identify their strengths and weaknesses. As a result of my research, I found that all of the dream apps I reviewed had some issues. One point that stood out to me as being particularly noteworthy was the fact that adding a new dream record to these apps required many steps to be filled in.
Current State Journey Map
Problem Statement
​
​
How might we improve dream recording for young people to increase recall and maintain a consistent logs? By providing a user-friendly and dependable method to record dreams upon awakening, users can capture rich details and enhance their recall abilities over time. This can lead to a greater success rate in recalling and tracking dreams, as well as foster an increased interest in sharing dreams with others.
UX Design
Consider
Solutions
User Flow
Future State Journey Map
Visual Novel
Frame Work
Problem Orientated Solutions
Dream fades fast
Check the phone
Detail losing
No interest in dream interpretation
-
A device or mobile app that records speech about a dream before the users are fully awake.
-
Only one step to add a dream log.
-
Not include dream analysis feature
Figurative contents
-
Involve AI art API to generate a matched image for the dream.
Share with others
-
Easy to share as a card with text and image
Sketches
During my research, I found that many dream apps had a cumbersome process for users to add a dream log. I believe that this process could be simplified to make it more user-friendly. My idea for a dream log involves only one step to add a dream record. Additionally, I would like to develop a device that records speech about a dream before the user is fully awake, preventing the light of phones from waking them up. This would enable users to capture their dreams more easily and accurately. I also want to involve AI art API to generate a matched image for the dream, which would enable users to have a visual representation of their dream. This feature would also allow users to share their dream image with others, potentially creating a community around dream-sharing.
User Flow
Future State Journey Map
.png)
Low-fi Framework
.png)
Magical Device
The device I have envisioned is designed to make recording dreams easier than ever before. When users wake up, they simply need to pick up the device and hold it in their hand. As soon as it detects the body temperature or pressure, it will emit a soft light and start recording the voice. Once the users are finished describing their dream, they can release the device and the glowing will stop, indicating that the recording has stopped. The recorded audio will then be transmitted to the Dream Logs app on their phone via Bluetooth or the internet, making it easy for them to access and review their dream logs later on. I'm excited to see how this device could change the way people record and keep their dreams.
Design Iterations
User Testing &
Iterations
Prototyping
Playtesting
Prototyping
While I am excited about the potential of the magical device I mentioned earlier, I have been primarily focused on designing and testing the app. I believe that the text to image functionality is the core of the app, and I have put a lot of effort into ensuring that it works seamlessly and is easy to use.
I have gone through two main versions of the frontend prototype and made various improvements along the way. Those prototypes allow me to test the functionality and usability of the app. possible. I have now arrived at the third version of the design framework, which is the most comprehensive and reliable so far.
Tools
HTML/CSS/JavaScript
ReactJS
OpenAI API
Version 1
This version of my app focuses on speech to text and list home page features, and has been playtest with 7 people. It allows users to quickly and easily convert speech into text, and also offers a home page to organize and store lists.
​
The working prototype of this version could be found here.
.png)
Feedback on Version 1
Things That Meets Expectations:
-
Easy to add a new log
-
Smooth experience on Speech-to-Text
-
Text results in real time
-
Well organized list with localStorage
Things That Off Expectations:
-
Can’t find where to stop recording. (1/7)
Further Improvement:
-
Edit it later or while recording (3/7)
-
Able to sketch something (2/7)
-
Multiple mobile devices (1/7)
Testing on the AI-generated Image
I tested the images generated by DALL.E with some dreams. In the case of short sentences, the AI performed well; however, as the length of the paragraphs increased and it started to make random combinations of the contents in the content, the similarity of the generated images to the dreams decreased.
Content Length (words)
<10
Randy:
I dreamed of a cup of moldy tea.
10~50
Ying:
I dreamed that I was gathering with many friends at my house and we had a very good hot pot and played games together. Then we all went to many beautiful places together
>50
Bam:
I dreamed that I was a detective in the world of Pokémon. When detecting the case encountered water spigot old zipper water, this water will get sick when you drink it. Finally found that there is an employee in the drip, the harmful substances into the water flow by way of drip.
AI-generated Sample
Feedback
Without keyword “hand drawn” :
“Too real for me, little bit too much”
With “hand drawn”:
“Same as what I dreamed..”
“Similar vibe, but some of the details are not shown on the image”
“Quite confusing. I think AI just randomly combined the elements from my dream.”
I came up with an idea to improve performance by converting the content into a single sentence under 20 words before generating the image in the code. After implementing this approach, I found that the AI's performance improved significantly, even with content exceeding 30 words. This would enhance DALL.E's image generation capabilities for longer and more complex dream content.
Version 2
This version of my app focuses on text to image and dream card features, and has been playtest with nine people. It allows users to record their dream easily and AI-generate match image in real time, and also has a card mode to open one log in the list.
​
The working prototype of this version could be found here.
.png)
Feedback on Version 2
Things That Meets Expectations:
-
AI provides matched image that were reported "dream like"
-
The waiting time of the new image is acceptable
-
Text results could be adjust
Things That Off Expectations:
-
Buttons at the top without any function are confusing (2/9)
-
Pause-continue and adjust feature could easily be ignored (4/9)
-
Timer of the recording is confusing (1/9)
-
Add New button is too big (1/9)
-
The color of the buttons are confusing (2/9)
Further Improvement:
-
Add tags for visual directions (1/9)
-
Add guidelines for describing the dream visually (1/9)
-
Use icons on the list (2/9)
-
Add regenerate button (2/9)
-
Could be used for other industry such as children education (generate storybook for kids) (1/9)
Final Outputs
Framework &
Prototype
Frame work
Prototype
Final Design of Framework
Based on feedback from the second round of user testing, I made several improvements to my dream log design to enhance the user experience. One issue that was identified was that the pause-continue and adjust features could easily be ignored by users. To address this, I made these features more prominent and easier to use. Another issue was that the timer of the recording was confusing to some users. To improve clarity, I made the timer more prominent. Additionally, some users found the "Add New" button to be too big, so I reduced its size to create a more balanced layout. Finally, some users found the color of the buttons to be confusing, so I adjusted the color scheme to make it more intuitive. These changes were based on user feedback and were designed to create a more user-friendly and engaging experience for users when capturing and sharing their dreams.
Prototype
This is an interactive Figma prototype, please feel free to play with it!
Results and Key Takeaways
Throughout the design process of Dream Logs, I learned many valuable lessons that have impacted my work and my perspective on design. By simplifying the process of recording dream logs and incorporating AI art API to generate matched images, users can capture and share their dreams more easily and accurately. This feature can potentially increase self-awareness and personal growth, creating a unique experience for users.
One of the most significant takeaways from this project is the importance of user-centered design. Another key takeaway from this project is the importance of iterative design. Through multiple iterations of the prototype, I was able to test and improve the functionality and usability of the app, based on user feedback. This iterative process allowed me to refine and optimize the design of Dream Logs, resulting in a more comprehensive and reliable framework.