Overview
Native iOS & Android app that controls sleepme's temperature regulation hardware, sleep tracking, and delivers daily insights to help customers sleep.
My Role
My team oversaw all aspects of the app design. We worked with product and engineering to create the best UX possible. We created a design system that would scale as new features are added to the app.
Case Study
What is the sleepme app?
Sleepme was founded by a data scientist that had a passion for solving sleep related issues. She believed the secret to a good nights rest was to prevent the body from overheating at night. Her solution was to invent a mattress topper that would keep you cool all night long.
Using freelancers and contractors, she was able to create a proof of concept that showed the potential of her idea. She eventually found her Series A funding, at which point she hired Developers, Product People, and myself as the Design Director to take things to the next level.
Ooler
The first iteration of their app was called "Ooler". It was fine as a proof of concept app. It allowed the user to connect to the hardware and set a schedule to modulate temperature all night long. However, it connected using Bluetooth, which was very problematic for many reasons, but mainly our users wanted to be able to operate their device when out of range from Bluetooth.
Also, like most software cobbled together from multiple vendors, it wasn't built in a manner that would scale. Lastly, and most importantly to me, the UI/UX was quite bad, and needed a massive overhaul.
Initial Requirements
After all the teams were hired, we went to work on an entirely new app powered by a central cloud that could communicate to all of our customers devices. As my role as Design Director I was in charge of not only creating an entirely new design system for us to use, but we also needed a brand refresh and website designs to support everything we wanted to do.
While our CEO had a laundry list of features on her wish list, working with the product team, we determined the first features that should be built were a 1:1 replacement for the features already existing in Ooler so that our users would feel at home when upgrading. This would allow us to sunset Ooler.
Those features were: device on-boarding, temperature control, and sleep scheduling. At this phase we also created an entirely new design system along with corporate branding.
Device Onboarding
Ooler had no real onboarding to speak of. There was only one piece of hardware that worked with it. So it was as simple as looking for nearby bluetooth devices, and selecting yours (much like pairing a mouse). However, the long term vision for sleepme was to have multiple pieces of smart hardware, and also to allow multiple users of each device. So user accounts would be needed, provisioning, family control, etc. With that in mind we went to work on user journeys and UX flows that met the business requirements.
Sleep Scheduling
One of the core features required by the app was for user to be able to create their sleep programs to make adjustments to temperature throughout the night (similar to a thermostat schedule for your house). This is the flow we created to set that up.
Dashboard 1.0
When the app was first launched its sole purpose was to function as a temperature controller for our sleep hardware (similar to a thermostat app). Since that was the only function initially, the decision was made to create a large thermostat dial that consumed most of the dashboard simply so the app wouldn't look empty while we worked behind the scenes to build out other features
After onboarding and sleep schedules were setup, the user would then be taken back to the dashboard, where they could monitor the status of their device and manually override the temperature if needed. Just to fill out the dashboard, at this point we also decided to add a bit of multimedia content that we pulled from our website that our users could access as needed to help them relax.
Dashboard 2.0
Over time we added sleep tracking data, soundscapes, multimedia content, and various other features, each of which required representation on the dashboard. Also, our business requirements changed during that time. The decision was made to focus less on temperature control, and more on sleep tracking along with our subscription plan, which we called "Hiber-AI". So I was tasked to redesign the dashboard as well as some secondary pages to make them better suited for our new features.
Final Design
The solution we came up with was to condense the sleep data card and position it at the top of the page. After that, we needed to condense the size of the thermostat control component.
Lastly, we decided we wanted the UI to be dark mode first, light mode second, so I tweaked our design system with that in mind. I created this design to solve our issues.