thumbnail_img.png

Slumber Sloth

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. 


Research

Competitor apps

As part of my research, I went through three sleep/nap existing apps and analyzed their onboarding and user flows. I realized the basic functionalities of sleep/nap apps and was drawn to the idea of making it more interactive and customizable. From the apps I gained these takeaways: incorporating a character/mascot into the app UI (PowerNap), allowing for an alarm time range or making the alarm applicable to certain days (Sleep Cycle), and creating sleep log along with a colorful UI that changes according to external conditions (UNIQLO Wake Up).

 
 

Initial Wireframes

From there, I made initial wireframes for a nap app where users can set up a sloth character, set alarms, log sleep times, and set timers for naps. The customization in this initial idea comes from setting up a sloth character, and having preferences in the app change according to how the user felt after different naps.

 
 

User Feedback to Initial Wireframes

user 1: 59 y/o, scientist & researcher

With my first user the feedback included confusion over some terms used (i.e. using the word "sound" vs. "alarm type"). Other feedback was that there was not anything showing how to choose certain days for an alarm, as a user wouldn't want to set up the same alarm every night. This user also thought the process to stop the alarm should have been simpler and condensed.

user 2: 27 y/o, higher education professional

My second user told me that personalization of the app could be better used within the "Post Nap" wireframes. In contrast to the first user, this user mentioned that people who have a hard time waking up could experience more steps to stop the alarm (like a pattern to follow) so that one would actually wake up instead of snoozing. However, these things do depend individually so this was just an option to consider.

user 3: 20 y/o, design student

The third user said that adding multiple features for the sloth would make it more fun. Instead of having a "Friends Feed" that included others, this user suggested making it more like a diary for oneself. Similar functions are included already into diet apps as well. Another suggestion was to use sloth facial expressions for the options in the Nap Timer to incorporate the sloth more into the UI.

 
 

Development

MOODBOARD

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

 
app_initial_screens.png

Initial 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.

 
user_flow.png

USER FLOW

From my initial designs I adjusted my user flow and made sure there were points in which the user had more interaction within the app. Rather than simply using the app as a record or tracker, I formed an idea that if there was a character affected by one's real life choice it would provide better incentive.

 
 
onboarding.png

Onboarding

 
login_screens.png

Login: wireframe + outcome 

 
Screen Shot 2017-04-29 at 12.46.53 PM.png

SLOTH CREATIOn: Wireframe

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

 
sloth_creation.png

Sloth creation: outcome

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_screens_2.png

HOME SCREEN: Outcome

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.

 
reward_screens.png

 REWARDs & CONSEQUENCEs

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

 
GAHHH.png

ITEM COLLECTION: outcome

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.

 
consequence_screens.png

CONSEQUENCE: outcome

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

 
logo_iterations.png
 

LOGO ITERATIONS & final 

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

 
 

App Extensions

sloth_eyemasks.png

EXTENSION: SLEEPING MASKS IRL

I extended this app into a physical presence 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

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

sloth_neckpillow.png