snoozefest
snoozefest
What is the problem?
They struggle with juggling their freedoms and responsibilities while maintaining a healthy sleep schedule. Because of this, their mental health, social interactions, and academic success diminish. They need a way to improve their sleeping habits, so that they can properly manage their lifestyle in a busy college environment, and remain in good mental health and academic standing.
My goal is to create an app that allows a user to track their sleeping habits and get access to helpful wellness resources.
College students are not getting enough sleep.
Sleep Tracker Mobile App
Year
2024
Role
Researcher, Designer
Tools
Figma, FigJam
This project focuses on visual design and interactions in a mobile sleep tracker app. It utilizes visual and interaction design principles to evoke emotion and create a brand.
Understanding the space → What do other apps do?
With the general idea of creating a sleep tracker & wellness app in mind, I needed to gather some research & inspiration. To do so, I evaluated the UI & information architecture of Headspace -- a well-known mental wellness brand offering a digital platform with guided meditations, sleep content, and mindfulness exercises to help users manage stress, improve sleep, and build healthy habits.
Analyzing Headspace using Schneiderman’s 8 Golden Rules of Interface Design
Consistency
The colors & shapes of buttons are the same for elements in the same “sections,” and are also cohesive.
The font for headers are the consistent, and the font for smaller/paragraph texts are the consistent.
The differences is style of buttons/fonts indicate differences in actions/content.
Shortcuts
The app utilizes the home page to display and allow easy access to different suggested services to the user depending on the time of day.
The app allows users to easily set up Siri shortcuts if using an iPhone.
Informative Feedback
The activities displayed on the homepage show a green checkmark next to it if it has been completed, shows a red dot if it is next to be completed, and an empty/transparent dot (along with a lock) if the activity is not currently accessible.
The highlighting of icons in the navigation bar show which page the user is currently looking at.
Dialogue
After completing a meditation session, the user is taken to a page that provides statistics to the user that are relevant to their meditation journey (run streak and minutes meditated), as well as a short inspirational quote. The user presses a button labeled "Finish" to be taken back to the previous page.
Other than the labeling of buttons, there are not many instances of dialogue that offer the user closure over certain actions.
Error Handling
The app provided a vague error message when I attempted to sign up for the 7-day free trial.
My guess is there was a poor network connection, but the app should be able to convey that to me so I can resolve it.
Permit Reversal of Actions
Users are able to click arrows to reverse certain actions or return to previous pages.
Videos can be closed/exited after being started.
Keep Users in Control
In the Settings section of the app, users have the ability to control notifications, language, and more.
[iPhone] Users can connect to Apple Health, allowing an even more personalized health experience.
Reduce Short-Term Memory Load
The icons in the navigation bar are recognizable, and tell you what section of the app you will be in if you press them.
Most of the features have some kind of text description or indicator that the user will be able to associate with the action or content.
Deconstructing Headspace’s Information Architecture
Navigation
The global navigation bar is located at the bottom of the app’s screen, and does a good job of indicating what a user can do on each page with an icon and a one word description.
The hierarchy of different features and sections of the app make it easy to figure out where certain types of content can be accessed. Different types of content are clearly labeled and sectioned in a way that is intuitive.
Search Functionality
The search functionality is lacking in Headspace, as there is no filtering or sorting features for the user to aid in their search process.
When you start typing in the search bar, recommendations pop up, but it seems that you need some sort of prior knowledge of the content in order to search effectively.
Information Organization
There is a lot of overlap in information on the app, so some of the content is accessible in multiple areas.
The home page showcases daily recommended content for each part of your day to emphasize and encourage the user to develop a routine of wellness.
After clicking on one piece of content, there is a small description along with other related content to explore.
Labeling System
Each different type of content (meditation, expert guidance, podcast, etc.) is clearly labeled as such.
The app uses small icons next to these labels to indicate if it is a video, audio, etc. The navigation bar utilizes short labels along with icons to demonstrate the type of content found on each page.
The different sections on each page are also clearly and simply labeled, and do not make it confusing to navigate. Labels for specific content are creative, but still clearly indicate the subject matter, and sub-sections labels are descriptive.
Design Critique
Overall, Headspace’s UI is easy to navigate, clear, and simple to understand. The color scheme conveys the values of the app -- which involve mental health and wellness. The main dark blue color provides a calming feel, and the brighter colored elements invoke happiness while visually contrasting in a way that the user is able to differentiate them from the background. Text is evenly spaced out, and uncluttered. Paragraphs/blocks of text are kept to a minimum in length, and do not involve unnecessary words or irrelevant information. Buttons are clearly press-able, and contrast appropriately. Icons and graphics are used in both a functional and aesthetic way that fits well with the goals of the app.
Initial Prototypes
Low-fidelity/Paper Prototype
After gathering inspiration from Headspace, I (messily) sketched out my preliminary ideas into 9 screens -- including log in & sign up screens.
Wireframes
Mid-fidelity Prototype
Next, I moved into creating a wireframe version of my paper prototype to get a better understanding of how to size, space, and organize elements on the screens.
With these screens, I outlined the general structure & elements involved in my app.
Sign up/Log in
Home, which displays a user greeting, alarm reminder, daily motivational quote, and a prompt to start/end your day with the second main screen (the activities page)
Activities, which displays 3 daily curated wellness modules for the user to complete, and a section to explore other resources/modules. Users can also access a “Favorites” screen, which displays the user’s favorited content
Sleep Tracker, which displays information on the user’s most recent sleep, including the date, an overview, quality %, duration, and more. The user also has the ability to access information on past sleeps using the calendar icon, and manually add sleep information if they lack wearable tech that can collect that data automatically
Profile, which displays the user’s profile - name, synced apps (for optimal data collection & integration into user’s everyday life), and activity history
Adding Style!
Style Guide & Design Documentation
After completing the wireframes, I needed to start thinking about style. What colors should I use? What aesthetic goals am I striving for?
This style guide & design system aims to provide a simple, user-friendly interface to provide calm, positive experiences for the user.
The user should feel peaceful, relaxed, and protected when engaging with the features of this design.
Color Palette
Typography
Logo & Images
#12043E
#280886
#6939E7
#886FFF
#232323
#C6BAFF
#CCE2FF
#886FFF
These colors indicate a calming, dreamy feel that aligns with the overall purpose of the app, which is to help users improve their sleep habits.
The typography involves scalable, rounded fonts that offer a relaxed, soft feel to the app.
Montserrat is utilized for larger text, including H1, headlines, and titles.
. SF NS Rounded is utilized for body text, sub-headlines and button text.
Nighttime and dreaming were my biggest sources of inspiration for my logo and images.
The top line of images represent the branding logos used as the app's icon on a user's home screen, and on the loading screen once the user clicks into the app.
The section of images below are the cover images for different types of content, and each are utilized for one of the 4 content types: Meditation, Podcasts, Exercise, and Sleep Aid.
Each of these images contributes to the branding I envisioned for this sleep tracker app, to further emphasize the serenity a user will need in order to engage in better sleeping habits and balance of lifestyle.
Montserrat
Medium
Bold
Black
20px
36px
40px
.SF NS Rounded
Regular
Medium
Bold
16px
18px
20px
Iconography
These icons are all rounded, as are my buttons, input fields, cards, etc.
The soft edges offer a cartoonish feel that aims to calm and comfort the user as they engage in meditation, motivation, and overall sleep improvement.
The Final Design
High-fidelity, Interactive Prototype
Below is the final prototype of SnoozeFest, which showcases how I utilized my design system to evoke positive, relaxing emotions, and provide users with the proper avenue for improving their sleeping habits -- focusing specifically on the 4 main screens.
Home
Wellness Activities
Sleep Tracker
User Profile
Star button to access user’s ‘favorites’ (ie. favorited wellness videos, articles, etc.)
Friendly, cartoonish character for profile picture
Tooltip for help/further explanation for user
Checked box indicates app is currently synced
Data on quality and duration of user’s sleep
User greeting to give a sense of personalization
Friendly, cartoonish character
Alarm reminder + notifications of elements of user behavior that may impact user’s sleep (screen time, audio levels, fitness, bed time, scheduled events)
Motivation, sleep-related quote of the day
3 daily curated wellness modules, each unlock when you complete the prior module
Overview of sleep information from the prior night, including what time the user intended to go to bed, when they actually went to bed, when they fell asleep, and when they woke up
Synced apps to personalize tracking automatically
User can access their activity history, and return to modules they have previously completed
Progress graph indicating user’s weekly trend improvements -- moreso highlighting positive/negative trends, rather than emphasizing the numbers involved
‘Dream Bigger’ section, where users can search & browse wellness content from each of the 4 categories
Button with prompt to wind down from their day with wellness modules
Interact with my prototype to see what it can do!
Takeaways
& Next Steps
In this project, I employed several different design practices to achieve my finished product. I began by choosing an app type, and identifying a problem -- people need sleep.
Then, I needed some inspo. I evaluated Headspace, looking into their design and deconstructing their information architecture.
From there, I started low-fidelity prototyping, putting all my initial ideas down on paper and transferring them and any changes to some wireframes.
Next, I created my style guide and design documentation. This is where I had the most fun. I played around with color themes, iconography, typography, and ultimately landed on a dreamy, calm, rounded feel that is portrayed through the rounded nature of my icons, components, fonts, etc., and the calming effects of my color palette.
In future iterations of this project, I want to focus on expanding the resources available to users on the app. Specifically for college students, I want to implement a feature that allows them to connect with and access information about resources available to them on their respective campus.
* i recommend opening in fullscreen!