Screen Shot 2017-04-19 at 11.56.51 AM.png

Slumber Sloth

A gamified, sloth-themed sleep app aimed at consistently sleep-deprived youth to help improve sleep habits. How well and how consistently the user sleeps will directly affect the well-being of the sloth in the app. 

Channel your inner sloth.

Channel your inner sloth.

Very First Designs..

Very First Designs..

At the outset of the project I had a vague notion of how I wanted the screens and mood of the app to look, but it was rough around the edges. With these screens there wasn't enough interactivity with the sloth itself, and it still felt like any other sleep app available already.

Moodboard

Moodboard

Overall I focused on vibrant colors like greens and yellows to create a suitable environment in the app for the sloth character.

Logo Iterations for Final Outcome

Logo Iterations for Final Outcome

I took the S from the typeface used in the app and incorporated it with the sloth. 

Onboarding

Onboarding

Wireframe: Log In + Sign Up

Wireframe: Log In + Sign Up

Outcome: Log In

Outcome: Log In

Wireframe: Sloth Creation

Wireframe: Sloth Creation

This is the starting point within the app where people set up their sloth and preferred sleep settings. 

Outcome: Sloth Creation

Outcome: Sloth Creation

From the wireframe above I rounded out the shapes of the buttons and selections; it was a better match with the roundness of the typeface that I used. I also took more consideration in using the space on the screen. 

Home screen

Home screen

After creating and naming one's own sloth, the user is taken to the home screen. From there the use can tap on the sloth to check on its status, and swipe up to access the menu.

Wireframe: Reward & Consequence

Wireframe: Reward & Consequence

To provide an incentive for improving one's sleeping habits, I included a system of rewards and consequences within the app. 

Outcome: Reward

Outcome: Reward

Item Collection

Item Collection

Rewards are accumulated in the form of items that can be accessed through the Collection screen. Initially my app design didn't have enough customization so I thought this was a fun way to incorporate it..and it's probably my favorite part of the app.

Outcome: Consequence

Outcome: Consequence

Consequences are recorded into a log that one can refer back to see consistency and improvement in sleeping habits. 

Responsive Design 1: Profile Page

Responsive Design 1: Profile Page

As a way to extend the app, I designed a sloth profile page for others to view on the web or through a web browser on their phones. This is the first foray into promoting a social aspect for the app and connecting to other people.

Responsive Design 2: Meet Others

Responsive Design 2: Meet Others

Web and mobile designs for browsing other sloth profiles.

Responsive Design 3: Download Page

Responsive Design 3: Download Page

Extension: Sleeping Masks IRL

Extension: Sleeping Masks IRL

I extended this app into a physical presence rather than limiting it inside a mobile phone environment, by bringing to life the actual items within the app. I also had a lot of fun making these and think it would be cool if they actually existed.

Extension: Sloth Neck Pillow

Extension: Sloth Neck Pillow

Oddly enough I'm not an avid neck pillow user but this was also delightful to make.