Inspiration and what it does

"USleepin?" is a Google Chrome Extension inspired by a research study conducted by the Imperial College of London, which showed the impact of sleep deprivation on physical reaction time, working memory, and productivity. In this extension, users have the ability to select time intervals between 15 minutes to 1 hour. Each time that the user's selected time interval elapses, a popup will appear and direct the user to an interactive response stimulus which records their reaction times. After playing the response game, users can view the analytics and history of their response time plotted on a graph to visualize the effects of sleep deprivation on their alertness. The anticipated audience of this app would be college students who regularly or occasionally need to stay up to complete assignments or study for exams. It can also be applied to individuals who practice unhealthy sleeping habits because the app can quantify how their productivity and work is negatively impacted by their tiredness.

The purpose of this app is to allow users to identify when their alertness is no longer at peak performance and they should really, as we say, "go to sleep ya fool!"

How we built it

Overall design features a simplistic chrome extension plugin that utilizes javascript components within an html body that enables pop-ups that redirect the user to the alertness test at specific intervals of time that the user specifies through buttons within the chrome extension pop-up. After the test, the page redirects you to an Analytics page, where a plot of a user's general alertness is featured, as well as our story and introduction. We regularly committed and pushed our files to Github. We linked all of our files through the html script and src tags via buttons and functions we wrote in javascript. We wrote a basic interval-based repeating timer, as well as our own 'game' where the image disappears and reappears randomly throughout a canvas for a set period of time. We store our data on the web app.

Most PNG images were designed on Adobe Illustrator with a Intuos drawing tablet. Gifs were created as frame animations generated with Photoshop.


As a team, we ran into a variety of issues. In particular, working with javascript and HTML were difficult because these languages are often finicky, and most of our team members had little to no experience coding in javascript, which is the code that was predominantly used in the final product. In order to maintain the authenticity of the app, we wanted to design most of our own graphics, which required vector images. Consequently, we experienced a couple mishaps with adobe illustrator, including the loss of a graphic that we spent hours on. Perhaps the most challenging part of the project was actually brainstorming ideas for the app. While we wanted to develop something impressive, we also wanted to make sure the task was accomplish-able with our given skill sets. Naturally, as the hours dragged on, fatigue became an issue that we had to overcome and working through coding errors and graphic design on minimum sleep resulted in moments of severe frustration and lots of "I don't know what I'm doing!!!!!!" Though it certainly felt like we were part of the Great British Bake Off (but with code instead of batter) we certainly had a good time and felt reassured by the communication and camaraderie of our group.

Accomplishments that I'm proud of

We are definitely proud of our ability to work as a team. We collaborated and communicated effectively and we all approached the Hackathon with a positive mindset, high spirits, and determination. We also played to each of our strengths which allowed us to not only produce a relatively polished finished product, but to also learn new things about the techniques and languages we were already familiar with. We are proud to have created an awesome new chrome extension with tons of exciting new ideas that are ready to be expanded upon.

What I learned

Within a span of 36 hours, we learned how to code in javascript, manipulate adobe illustrator more efficiently, generate vector images, and work with HTML and CSS styling.

What's next for USleepin?

We have lots of exciting new things in store for "USleepin?" We hope to: make the game longer to better test the reaction speeds and attention spans of our users, save the history of past reaction speed attempts, make a leaderboard showcasing user's top reaction speed times, improve the alert system of our extension by making alerts appear at the bottom of page, change the time buttons to sliders ( so there is more flexibility to specify desired time intervals), generate a page that yells at the user to GO SLEEP when the user's reaction speed falls below an average threshold and add a larger variety of games to keep users on their toes. Future applications of "USleepin?" include: sharing the app with the student body so that they can be more conscience of their sleep health, publicizing the app as an accessible tool for sleep and cognitive function research, and adding more sheep gifs to maximize cute factor.

Built With

Share this project: