Channel your inner sloth.
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.
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
I took the S from the typeface used in the app and incorporated it with the sloth.
Wireframe: Log In + Sign Up
Outcome: Log In
Wireframe: Sloth Creation
This is the starting point within the app where people set up their sloth and preferred sleep settings.
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.
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
To provide an incentive for improving one's sleeping habits, I included a system of rewards and consequences within the app.
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.
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
Web and mobile designs for browsing other sloth profiles.
Responsive Design 3: Download Page
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
Oddly enough I'm not an avid neck pillow user but this was also delightful to make.