BACKGROUND INFO
Overview
This project was part of my final project for my Design class, DES 112: UI/UX. We had 6 weeks to follow the human centered design process, working through iteration after iteration of app structure and visuals.
Problem Statement
Sleep significantly influences various aspects of our lives, including physical, cognitive, and emotional well-being. Establishing a robust sleep routine and support system capable of providing consistent assistance can greatly enhance individuals' overall sleep quality. However, a significant challenge arises from the fact that, despite the abundance of sleep resources available—such as sleep hygiene techniques or relaxation strategies—many individuals struggle to prioritize and implement these practices effectively.
The goal of this project is to explore ways to empower users to take proactive steps towards improving their sleep quality and developing healthy sleep habits.
USER RESEARCH
📑 Competitive Analysis
For my other type of research, I decided to do a competitive analysis of the most popular mental health/sleep apps out on the market right now: Talkspace, Headspace, Calm.
Compared to the other two, Talkspace was the most clinical and just had too much information in the app that became too overwhelming. There are a lot of charts and graphs of data that I don’t think are necessary. Also, the visual design isn’t really uniform throughout the app. Talkspace provided the resources: clinical progress (symptom tracker, long-term goals), exercises to do (understanding past experiences, etc), live video sessions, and therapy tools. The goal for this app is to get matched with a licensed therapist without having to go anywhere so it tackled the therapy aspect of mental health.
Headspace tackles the meditation aspect of mental health. In Headspace, there is a more uniform color scheme and design which makes it fun to look at. There isn’t as much information as there is in Talkspace and the layout of the information is well done. The goal for this app is mindfulness and meditation. The functions are very similar to Talkspace: guided meditations, sleeping help, courses, and mindfulness exercises.
Finally, Calm focuses on the sleep aspect of mental health. The visual design for this app is very eye-catching and neat. Unlike the others with multiple functions, Calm focuses specifically on sleep and only has features to help this. For instance, Calm has sleep stories, music, and masterclass stories.
💬 User Interviews
I conducted interviews with four college students, posing the same set of questions to each participant. These questions included inquiries such as whether they had ever used a mental health app, if so, which app they used, what they appreciated and disliked about it, and whether they felt it provided support, regardless of scale.
Among the respondents, three indicated prior use of mental health apps, with Calm and Headspace emerging as the most popular choices. Users appreciated Calm's diverse array of features, such as meditation, sleep stories, and music, which kept them engaged. However, some found the app overwhelming due to the sheer volume of content, contradicting its intended purpose of promoting relaxation. One individual reported that Calm simply did not resonate with them. Similarly, respondents noted that Headspace offered numerous resources, yet some felt certain features were superfluous. Both apps were described as feeling clinical. On the positive side, users praised Headspace for its effective meditation and mindfulness support. However, overall, many participants felt unsupported by these apps, citing reasons such as the requirement for payment or doubts regarding the apps' effectiveness.
From my interviews, all my users want an app that provides resources but in a more fun way. They all agree that these clinical apps may be helpful but are way too professional and paint mental health in a bad light like it is a sickness that needs to be cured when really it is something that everyone goes through. Normalizing mental health is super important for this app and the users will be able to get that if it was in a more game-like way. The most insightful thing I got from my research is that people have a hard time reaching out for help and so having the video sessions with a therapist or being matched to one is a feature that is most likely not used on the app because no one wants to use it. The other features like videos, meditations, articles have a higher chance of being appreciated than the therapist resources. So, it is super important that users may not have these therapist options but instead reach out to certain characters in the app instead.
“How can I create a gamified app centered around sleep that involves integrating engaging elements of gameplay with features that promote healthy sleep habits and improve overall sleep quality?”
SYNTHESIS
After conducting my research, I developed user flows to outline the various screens I plan to include in the app. These encompass the onboarding process, recording sleep quality, accessing sleep or meditation music, and establishing sleep goals.
IDEATION
📱 Initial Wireframes & Prototypes
After finalizing the features of my app, I focused on gamifying the experience while maintaining a strong emphasis on promoting healthy sleep habits and enhancing overall sleep quality. It was crucial to ensure that the user flows remained simple, yet engaging. Here's how I achieved this:
To Gamify the Experience
- Personalized Star Characters: Users are greeted with personalized star characters, adding a delightful touch to their journey through the app and fostering a sense of connection.
- Calm Color Palette: I carefully selected colors that evoke a sense of tranquility and relaxation, creating a soothing visual environment conducive to restful sleep.
- Gamified Sleep Data Input: Transforming the process of inputting sleep data into a gamified experience makes it more interactive and enjoyable for users, encouraging consistent participation and adherence to healthy sleep habits.
- Point Accumulation and Special Characters: By implementing a point system, users can earn points through various interactions within the app. Accumulating points unlocks special characters, providing users with a sense of achievement and motivation to continue engaging with the app.
To Simplify Finding Meditation Tracks/Music
- Simple Layout: Users can easily jump between sleep and meditation tracks, streamlining the process of finding the perfect audio content to suit their needs at any given moment.
- Playlist Favorites and Recently Listened: Offering the ability to favorite playlists and access recently listened tracks simplifies navigation and enhances user convenience. Users can effortlessly revisit their favorite content or explore recently discovered tracks, promoting a seamless and enjoyable listening experience.
USABILITY TESTING #1
Here were some of my key findings and problems from my first usability test:
- My onboarding flow was incorrect
- When I clicked “Get Started”, it brought me to the page for users that already had an account and didn’t need to sign up for an account.
- All my users were confused with the flow of my onboarding pages and when I asked them to sign in to the app as a first time user, they were confused as to why they didn’t have to create an account first.
- Changing my character was harder to find
- One of my tasks for users was to change their profile picture from a blue star to purple star and users were confused as to which button to press. Because I had a big “Edit Profile” button, most clicked that button but realized that it didn’t work and then saw the task to “Change your Character”.
- Some people also thought that by clicking the star itself like what a lot of other apps do, it would be able to bring them to the change character page.
- Design Feedback
- Increase contrast brighter color for the words
- Like the designs: star characters, background color to symbolize night time, calm colors
- Change spacing between sentences and lines, text is a little hard to read right now
- Once user inputs their information during the sign up/log in pages, the text should be darker than the initial text to show that information is being put in
HI-FIDELITY PROTOTYPES
So What Changed?
Onboarding Flow
I reordered the screens and prototyped the buttons to the correct screens. I made sure that the “Get Started” button went to the star characters and then to the “Let’s get started” page and the “Sign Up” button went directly to the “Good to See You” page. Also, from my design feedback about the text color to get darker once user’s input their information, I prototyped the inputted information to become a brighter pink and easier to read color than the original dark pink.
Changing of Characters (usability problem)
I thought about the best way to decrease confusion on the certain task. Since my users thought that by clicking the star itself like what a lot of other apps do, it would be able to bring them to the change character page. Therefore, I prototyped it so that if users clicked the star profile picture, they would be able to change their character as well as the “Change your Character” task underneath. I didn’t make any other changes to this page like the big “Edit Profile” button because I wanted that to be the main task of the page which would allow users to only change their personal information like name, birthday, gender, and password.
Sleep Music/Meditation Section
As feedback I received from my professor, her feedback was to be able to include gamification around the meditation music since I had gamification elements incorporated in the rest of my app. Therefore, I added a screen where a user receives an extra 100 points for completing a meditation playlist.
USABILITY TESTING #2
Here are some of the design feedback that I received:
- More space between words and playlist
- Text for music is too small
- Make text larger and take up more of the space
- Tiles in the music section are too cramped, have more space between them
- Plus is too hard to see against the orange and add star button
- Edit profile hierarchy is much bigger
DESIGN SYSTEM
I established a comprehensive design system to maintain consistency across all frames. By selecting a clean, legible font and implementing a soothing color palette with vibrant accents, users can personalize their experience and feel empowered within the app.
I utilized a 12-grid system to ensure precise alignment of various elements on the screen, enhancing overall visual coherence and usability.
Final Design
Star Signs
Improve your sleep quality while developing healthy sleep habits.
Onboarding
The onboarding process serves as an introduction for first-time users, offering them a glimpse into the app's features and providing an opportunity to personalize their experience by selecting their own character. This initial interaction sets the tone for their journey within the app and enhances their sense of engagement and ownership.
Sleep Tracker
The sleep quality tracker enables users to record both the duration and quality of their sleep, from the onset to maintenance and upon waking. It aggregates this data to calculate an average sleep quality rating, which is represented by a star color. As users consistently track their sleep, they accumulate stars in their "jar," enhancing the gamified aspect of the app and providing a visual representation of their progress over time.
Meditation/Music
The meditation and sleep music feature empowers users to tailor their experience based on their specific needs. Whether they're seeking assistance with falling asleep or are interested in guided meditation, users have the flexibility to select the type of audio that best suits their preferences.
Profile
To augment the gamified experience, the app incorporates a point system, allowing users to accumulate points through various interactions and achievements within the app. These points can be redeemed to unlock special characters, adding an element of excitement and motivation for users to engage with the app regularly. Additionally, users have the opportunity to revisit and personalize their character at any time, as well as edit their sleep goals to align with their evolving needs and preferences.
Reflection
I'd like to extend a big shoutout to my professor, Kathleen Fontecha, and my peers for their invaluable feedback on my app designs. Your insights and suggestions have been instrumental in shaping this project and making it better. I'm also grateful to everyone who participated in the usability testing and offered advice on how to improve the app.
Creating this app from scratch has been an incredible learning experience for me. Despite the time constraints, I was determined to prioritize the visual design and strive for pixel-perfection in every aspect. This project marked my first go into visual UX, and I'm thrilled with the outcome and proud of the progress I've made throughout this journey.
Prototype
Click below to view the prototype if you would like to experience the redesign yourself!
@Jessica Chu 2024
made with love 
and lots of sunsets 