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.
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).
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.
Overall I focused on vibrant colors like greens and yellows to create a suitable and youthful environment in the app for the sloth character.
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.
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.
Login: wireframe + outcome
SLOTH CREATIOn: Wireframe
This is the starting point within the app where people set up their sloth and preferred sleep settings.
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 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.
REWARDs & CONSEQUENCEs
To provide an incentive for improving one's sleeping habits, I included a system of rewards and consequences within the app.
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.
Consequences are recorded into a log that one can refer back to see consistency and improvement in sleeping habits.
LOGO ITERATIONS & final
I took the S from the typeface used in the app and incorporated it with the sloth.
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.