Deep Sleep
The Nutrition Clinic presents Deep Sleep, a scientific and evidence-based program for Sleep with optional add ons. Deep Sleep is based in Singapore but wants to expand to users in the United States. I relied on usage metrics in conjunction with usability tests. I gained a deeper understanding of users sleep issues and preferences in the app by combining both qualitative and quantitative information. Discussions with users revealed that sleep issues stem from multiple issues of both timing, routine, the usage of electronics, and calming of the mind. Creating a platform that users can turn to for sleep coaching, sleep products and ideas to improve their sleep was the goal.
Project:Design a iOS mobile app
Role:UX/UI Designer
Duration:Jan 2022 - March 2022
The Problem
Sleep issues are on the rise and have increased during Covid.
According to National Library of Medicine, “changes imposed due to the pandemic have led to a surge in individuals reporting sleep problems across the globe.”
Challenges
Finding target users located in the United States — many did not want to be contacted about their sleep issues.
Time constraints — having a week to schedule as well as conduct interviews with many unknown users was challenging while working full-time.
Quickly creating trust with users to get honest insight on their sleep issues.
The Goal
-
To create a delightful, seamless and responsive experience for Deep Sleep mobile app.
-
Provide help for users to be able to improve their sleep with a variety of solutions, such as coaching, sleep products, and supplements.
-
Provide education to users on methods and products they should try based on a personalized quiz.
Current Website Design
The existing website exhibits a sleek and well-structured interface. There are certain accessibility enhancements that needs to be addressed. Upon conducting an evaluation with the Adobe contrast checker, I noted that the font color used on the website does not comply with the WCAG guidelines. During our first meeting with the stakeholders and the marketing team, it was recommended that our team of 3 UX designers consider incorporating a darker theme for the iOS mobile app.
Research - Competitive Analysis Website Design
I evaluated 5 apps leading in the sleep and wellness spaces and conducted a comprehensive chart-based evaluation to determine the factors that distinguish them from their competitors.
User Research
To garner a diverse user base, I initiated the process by designing a Google survey and deploying it across multiple social media platforms. Additionally, I also shared the survey link to acquaintances, requesting them to share it with their network, thereby maximizing outreach.
Key Learnings
-
We learned that users over 25 were having difficulty falling asleep more often than those under 25.
-
Users that tried various sleep aids to help them but feared growing dependent on any supplements.
-
Females were noted to have more difficulty falling and staying asleep to males.
-
Meditation was found to be not helpful for users who claimed they had a hyperactive mind.
-
All users tested the leading apps claiming to help with sleep and didn't find it very useful.
User Quotes
-
“I don’t like taking anything to help me sleep because I was dependent on Melatonin at one point.” — Nicolette
-
-
“I know I can scroll for too long and not even notice, this can keep me up.” — Claudia
-
-
There’s a window for good sleep at night. If missed, can’t sleep.” — Anna
Persona
We created Persona by looking for behavioral patterns in both qualitative and quantitative data through research. The patterns in behaviors include goals and frustrations, digging into the motivations and expectation to understand the user, what is driving them and what is stopping or troubling them on their journey.
User Flow
The 3 of us designers brainstormed user flow and what actions a user might take when using the Deep Sleep app.
Sketches
Drawing from my extensive experience as a makeup artist spanning a decade, I derived immense satisfaction in conceptualizing and sketching possible designs for the project. In the process, I sought inspiration from The Nutrition Clinic's existing website, as well as other applications that I frequently utilize and admire. My ideation process centered on creating an enjoyable and interactive experience for users, such as through a sleep quiz, streamlining product search and discovery, and optimizing the checkout experience to maximize user satisfaction.
Wireframes in Figma
Two members of our proficient design team initiated the wireframe design process, while the rest of the team, including myself, actively contributed to the process by providing comments and valuable inputs through the Figma collaboration tool.
Wireframes in Figma
Two members of our proficient design team initiated the wireframe design process, while the rest of the team, including myself, actively contributed to the process by providing comments and valuable inputs through the Figma collaboration tool.
User Testing
As part of our product development process, I proactively reached out to a select group of users who had participated in our sleep survey and subsequently conducted user testing on our low-fidelity prototype. During the testing phase, we provided the users with ample time to explore the features of Deep Sleep's application, and encouraged them to share their feedback. Throughout the user testing process, I closely documented the users' thoughts, reactions, and actions, which proved instrumental in driving iterative improvements to the product.
Iterations
Based on user testing we iterated on our low fidelity prototype, view the areas underlined and circled in red.
-
Removed the bottom menu as it was confusing and not needed (your are able to see the menu in the Wireframes).
-
Collaborated with The Nutrition Clinic team and understood they wanted an option to have a product subscription.
-
Added a “1” to the cart to provide feedback that an item was added to the cart.
Final Prototype
I wanted the user experience to be more accessible and enjoyable to use.
After some user testing here were my iterations:
-
I added a get started screen for users to gain a better understanding for what Deep Sleep is and how it can help.
-
I added a tab bar with icons to establish space for information, adding clarity and ease when navigating the app as well as the ability for returning users to easily book their sleep coaching sessions.
-
I changed the color palette to give more of a night time feel and appeal to both females and males as well to improve the color contrast to make the product more accessible.
-
I made the quiz interactive with sliders and large buttons. I improved the accessibility for keyboard only users making selections easier to select and navigate.
-
I updated the Subscribe button on the product page to be more enticing by placing it first and displaying the radio button as already selected.
Link to Figma Prototype
Takeaways
Individuals experience diverse stressors that contribute to their sleep-related problems. By providing a centralized platform that offers multiple options to identify and address the underlying causes of these issues, individuals can effectively manage their sleep challenges. Our team developed Deep Sleep with a tranquil nocturnal ambiance to facilitate a sense of calmness and relaxation upon logging into the application.
Hope I didn’t put you in a Deep Sleep! 💤😴
Thank you for reading