Sleep Conductor | App Prototype for IDEO CoLAB Makeathon 2016

In March 2016, I participated in the IDEO CoLAB Makeathon 2016, an all-day workshop where we went through the IDEO design process to envision future applications for blockchain and Internet of Things technology. This article outlines my experience at the Makeathon, and the Sleep Conductor App Prototype our mighty team developed that day.

The App Concept

Our group imagined an effective app to help people practice good sleep hygiene and get better sleep through the use of IoT sensors located throughout the home, with a smart application “conducting” the user to sleep.

The smartphone application would give the user personalized coaching reminders like “you’ve had 6 glasses of water today, don’t forget to drink 2 more glasses before bed”. It would also orchestrate the user’s technology to dim the lights at the appropriate time, play good music, make coffee in the morning — just the ultimate “smart home” experience. They told us to envision a future where there are no limits on computing power — if this app could do ANYTHING, what would it do to improve sleep? Through our brainstorming and focusing process, we arrived at a clear concept that we were ready to start visualizing.

UI/UX Prototyping

I took on the role of translating our idea into a visual UI layout with an animated interaction design scheme. I developed the screens of a mobile application that coaches the user in good habits to support their sleep.

This slideshow requires JavaScript.

I developed these layouts and graphic elements in Bohemian Coding’s Sketch, then compiled them in Apple Keynote where I was able to animate the page transitions and design all the UX interactions.

I made liberal use of FontAwesome icons in my design to add authentic web iconography quickly. I developed color schemes designed to correspond to the user’s circadian rhythm, promoting restful sleep.

I was then able to dump these assets into a Tumult Hype HTML5 Animation project and produce a clickable web-based prototype that could be immediately loaded onto a mobile device and provide a hands-on example of the user experience.

Within the span of an eight-hour makeathon, our team iterated a design from conception to tangible mockups.

On the strength of my performance that day, I was offered a summer fellowship at IDEO, which I regretfully had to turn down as it conflicted with the birth of our son. Nonetheless I’m extremely proud to have had the opportunity to compete with so many bright young developers, work with this great team, and produce an app design that looks great. This design process was so creatively satisfying that I’m thinking of pursuing careers where I can do more visual design.

Going Deeper with User Experience Design

I go into detail in this post about some of the rapid prototyping tricks I use to quickly mock up professional-looking UI designs within the timeframe of an eight-hour hackathon.

Liked this post? Follow this blog to get more. 

Please share your thoughts!