Sleeply

home screen - light mode
home screen - questionnaire in dark mode
3D brain visualization tutorial
brainwave tutorial
sleep score reveal
sleep summary

Inspiration

As a neuroscience major, my Dad was asking me about different types of brainwaves and what they meant. I realized that while I could explain them, it was difficult to visualize what they looked like. I wanted to make a brainwave visualizer, and sleep was certainly the best state to look at because that is where they are most important.

Once I got started, I realized the gap in visualization existed not just for brainwaves but for sleep as a whole. Sleeply was inspired by the idea of making brain activity during sleep interactive, intuitive and free.

What it does

Sleeply first asks the user to build a profile by specifying characteristics of their sleep such as duration, stress and substances used like caffeine or alcohol. Based on these inputs it generates a realistic model of your sleep.

Multiple representations are shown to the user, including a timeline of sleep stages, a 3D brain visualizer with pulses of activity, 2D brain wave graph, and a sleep score quantifying your sleep quality.

Sleeply prioritizes accessibility and fun, providing the user with a tutorial and lots of UI customization, complete with 18 different color theme options.

How we built it

Sleeply was built using React and Vite for the frontend, with Three.js and React Three Fiber for the 3D brain visualization along with a brain model found online and credited in the project.

This set-up was selected to prioritize a strong UI/UX while also ensuring that the 3D visualization ran smoothly.

Challenges we ran into

The biggest challenge was making so much information appear on just one main screen. The goal was to have Sleeply be a true sleep interface, we didn't want the user to have to filter between multiple pages. To make this work we needed a very precise layout, as well as additional features like window and tutorial so the user didn't get overwhelmed and confused by so much information.

Accomplishments that we're proud of

The project working first and foremost. I also really like how accurate the brainwaves are to true EEG readings. All of the colors look really nice too. Honestly just the whole thing.

What we learned

I think the main thing I learned was to not be too afraid to switch UI layouts around completely. A lot of good ideas were accomplished in this project by flipping it on its head. Also user feedback is super important, I had around 7 people try the project across it's many stages and they inspired a lot of changes to make things more accessible.

What's next for Sleeply

I need to get the project out there through social media because I think a lot of people would enjoy it a lot. In terms of features, I want to create a community board where people can upload and download their sleep profiles within the website. It would also be cool to be able to be able upload EEG data, which would make this product not only fun and helpful for the average consumer but also helpful in professional settings.