fall asleep with dormio…
and let dreams become a part of your reality
Role
UX/UI design
front-end devo
back-end devo
tools
figma
html/css
javascript
team
adam haar horowitz
eyal perry
matthew ha
timeline
jun 2019 - feb 2020
(updates ongoing)
results
fully functional web app
From June of 2019 to February of 2020, I worked on a project for the Fluid Interfaces Group at the MIT Media Lab called Dormio, a novel concept created by Adam Haar Horowitz that allows people to interface with their dreams.
I joined this project late in the game, with the concept being fleshed out and significantly developed. However, the transition from hosting the app on a local server to moving it online had significant bugs to be worked out. In addition, the user interface of the application was only intuitive to those who had designed it and were super familiar with the terminology used throughout the initial project development. As Dormio was beginning to be utilized by labs and research groups beyond Fluid Interfaces, this issue needed to be addressed so that the web-app was easy and friendly to use. We also wanted the web-app to aesthetically feel ~dreamier.
The process began with wireframing in Figma and prototyping in HTML/CSS, all the while improving and modifying the back-end for functionality and additional features with Javascript.
We ended up with a fully functional web-app that is now being used nationwide by several research groups in research and clinical studies ranging from the effects of targeted dream incubation (TDI) on creativity during REM sleep, comparisons of the effects of TDI on hypnagogia vs. daydreams (Duke University), and the effects of TDI on mastery of dream control and nightmares (with the US Department of Veterans). It also is being used by artists and creatives around the world to spur creativity.
The Dormio project has been mentioned on the internet, including Digital Trends, Giant Freakin Robot, in Adam’s Master’s thesis, Incubating Dreams, along with his PH.D dissertation, and a recent article in Harper’s Bazaar.
final design
Based on the ‘Steel Ball Technique’ popularized by the likes of Thomas Edison and Salvador Dalí, Dormio takes advantage of the hypnagogic state to influence your dreams, and in turn, alter your waking life.
Working through an idea? Have a problem you need to solve? Simply in the mood to dream about purple whales diving over a golden moon? It’s as easy as recording a reminder for what to dream about, another to wake you up. After that, just lay down and drift off - Dormio handles the rest. After you wake up, you can use whatever you dreamed up to jumpstart your creativity and problem-solving. Dormio has 2 versions to play with - the timer version uses your knowledge of your own sleep patterns to determine sleep onset, whereas the wearable version uses biosignals like your heart rate, electrodermal activity, and muscle tension.
how it works
The onset of sleep involves several stages of descent into unconsciousness, including a transitional state called hypnagogia, where we begin to dream, yet still retain some awareness of our surroundings. Dormio takes advantage of this awareness by introducing audio stimuli as you fall asleep that affects your thinking and dreaming while in this state. Then, after a certain depth of sleep, it wakes you up and gives you an opportunity to record your inner monologue on what you were dreaming about.
Why would you ever want to do this? Well, you spend a third of your life asleep, and our brains clearly undergo some sort of thinking process during it, but we don’t get the opportunity to consciously bring any of that into our waking life. Having a semblance agency over the creativity we achieve in our sleep is a unique opportunity.
timer interface
This version of Dormio is the most accessible, allowing anyone with an internet connection to interface with their dreams. Instead of relying on biosignals to track your descent into sleep, the system uses your best estimate of when you fall asleep to coordinate the timing of the fall-asleep prompt and the wakeup prompt.
wearable interface
This version of Dormio uses a custom sleep-stage tracking system and biofeedback signals to time auditory feedback. The wearable device detects electrodermal activity, heart-rate variability, and muscle tension, and the software has adjustable thresholds to customize the determination of sleep that’s right for you and your body. The system is currently being used by sleep research labs across the nation, but the hardware is open source, and instructions for making your own are here.
Sessions in both versions of the site are fully customizable by the user. Each session begins with recording two messages, the prompt to dream about and the wakeup message. Then, the number of rounds, depth into sleep, length of dream recording, and time between prompts are set before starting the session. For helpful explanations, each input field features a tooltip that describes exactly what the question represents.
process
problem
The initial version of the Dormio webapp was only used in tests by the people who created it, so the design was purely functional, which served their purposes well. However, for that reason, there was no need for a clear user flow, and the main (and most important) user interaction, the input fields at the top, have no clear explanation as to exactly what each of them mean.
The original site was great for proof of concept and the initial testing of the system. However, with Dormio gaining increasing publicity and interest from outside groups, there became a need for a revamp of the site in order to make it usable by others with less firsthand knowledge, without too much handholding from the original team. This would come with the added benefit of contributing to part of Dormio’s mission of making dream interfacing more accessible. Finally, with a redesign also came an opportunity to make the interface more aesthetically pleasing, and for the look and feel to be a bit more cohesive with the rest of the material coming out of the Engineering Dreams project at the Media Lab.
Additionally, due to issues transitioning from hosting the software locally to using Google Chrome, the site’s backend wasn’t functioning properly, leaving the wearable version totally unsupported.
goal
Design a new, functional interface that guides and informs new users as they create their dream interfacing session.
redesigning
All of the initial components of the website were pretty essential - it was just moving them around to make a clearer user flow. I also wanted to include some more visual elements during the session for the person running the session to be able to check their progress throughout. Since the visuals would be completely different depending on if the user intended to use a wearable or not, I decided to separate the two versions into two different sites.
The first wearable design kept the chart and channel readings, but I wanted to change the old blocks of color that represented each type of biosignal feedback to an icon that better represented them.
The timer design got rid of the chart and biosignals, which weren’t relevant, and instead replaces them with a countdown clock. I also toyed with the idea of a kind of pie chart/clock that broke the session down into parts.
Finally, the form included in both features clear question and answers to input all of the necessary relevant information. I also wanted to make the record function a little more robust by having clear buttons that enable the user to have more control and clarity during the recording process.
The next iteration was mostly focused on optimizing the form, since I realized that the initial input method using sliders limited users to very few options. Using dropboxes that also operate as input boxes provides infinite flexibility while also providing options for ease and to aid those plagued with indecision. To the wearable version, a place to input adjustable thresholds for each biosignal was also included.
At this time I also started testing out some of these versions in HTML/CSS.
As I was testing this iteration, I realized by getting stuck on the idea that the form had to remain on the page was seriously limiting screen space. Realistically, the user only needs to see the form once before starting the session, so why not tuck it away in an overlay and then make it accessible for reference, just in case? This left way more room for the other elements and let the interface breathe a bit more. Tooltips were also added for further explanation.
backend features
While I redesigned the front-end, I also simultaneously implemented backend features in Javscript to improve functionality, user feedback, and error handling. These included:
Debugging biosignal feedback charting on plot
Implementing readable output files detailing session statistics
Implementing sleep detection when using wearable device using adjustable biosignal thresholds
Tagging notable events with certain keys
Handling user error when filling out the form
Streamlining backend functions for transitions from different phases
Replacing time units from seconds to minutes where relevant to avoid unnecessary mental math
Implementing a sleep detection range for wearable to ward off too-early and too-late sleep detection
Increased user feedback before and throughout session (color changing record button to indicate recording, feedback on number of loops remaining)
Dormio is fully operational - if I had had a larger team or more time to implement new features in the future, I would include the following:
features
Incorporating a countdown timer into the wearable version of the site for additional feedback
Saving session settings (times, biosignal thresholds) in a separate file readout for reference
Research ways to save a version of the biosignal plot
Add a link to explanatory guides
Include a new session option for finished wearable sessions
Adding a play wakeup/play sleep button to timer version
Implement wakeup trigger button in case wakeups occur prematurely
Implement an option to make all wakeups (as opposed to just the first) be detected by wearable system