Case Study: A One-Stop Sleep Solution
Designing a mobile sleep tracking app for Casper, a mattress company
Overview
Casper, a mattress company, wants to develop a mobile or app experience that helps people track their mood and sleep and build healthy sleep habits. They are also developing a smart mattress to be linked with the app, even though people without the mattress would be able to track their sleep through their wearables or phone.
Sprint Duration: 2 weeks
Industry: Health and Device Tracking
Brief Type: Concept
Deliverables: High fidelity prototype and mock client presentation
Team: (4) N. Vania Muriuki, Alex Isitt, Lucinda Neagle, Diego Raspati
My Role: UX/UI Designer
Tools: Figma, Slack, Excel, Zoom
My Contribution: Competitive analysis, user interviews, affinity mapping and designing and iterating onboarding, home, and progress screens, creating the high fidelity prototype, developing visual design, usability testing and presenting the final product
Product: Developed 4 user flows including 95 screens that allow users to track mood and sleep habits, connect multiple devices, and access insights and tools to build healthy sleep habits.
Problem
Casper, a mattress company, wants to develop a mobile or app experience that helps people track their mood and sleep and build healthy sleep habits. They are also developing a smart mattress to be linked with the app, even though people without the mattress would be able to track their sleep through their wearables or phone.
Our team of 4 was challenged with designing a mobile app experience that helps users build healthy sleep habits through data tracking using different devices. The app would allow users to:
Our Approach
To ensure we remained focused and organized throughout the design sprint we used the double diamond approach. User research and competitive analysis were conducted to understand the problem, users’ needs, and the current market. The development process was conducted by applying research findings and insights to inform features, visual design, and information architecture. The final delivery includes next steps for Casper’s mobile app.
Discovering The Problem
We kicked off our design process with research and competitive analysis to empathize with our users and understand the problem, users’ needs, and the current market. Data was analyzed through affinity mapping and user journeys to create Jobs To Be Done and “How Might We” statements which explicitly define the problem statement and solution approach.
Gathering Qualitative Data
In order to empathize with our users, 8 semi-structured user interviews were conducted following qualitative research methods to understand user’s sleeping habits and the impact of lifestyle upon sleep. Interviews were conducted on Zoom following a pre-structured discussion guide, recorded, and thereafter analyzed through affinity maps on Figma to identify trends, patterns, and themes on user behaviors, likes, dislikes and needs.
These interviews helped us gain further insight into our target user’s behaviors, attitudes, and needs. We uncovered key insights such as:
User Quotes
“I wake up a lot during the night”
“Usually I pick up things real quick but for some reasons getting my sleep right is the hardest for me.”
Understanding Our Competitors
To get an understanding of the current health tracking landscape, we analysed direct competitors of Casper as well as companies in the sleep tracking space through a feature inventory and analysis.
There was a gap in the market as there were few apps syncing smart beds, wearables and integrating sleep solutions.
4 features were also identified to be of importance were identified to be carried into the develop phase of the project , namely — a comprehensive, central sleep score, sleep solution screens, graphs to represent data and a multi-functional bed remote.
Articulating the Problem and Solution
Once we had a clear understanding of our users’ needs and the challenges they face, we defined the 2 overall goals for this project in “Job To Be Done” statements.
Jobs To Be Done (JTBD) capture specific user needs regarding the tasks they are trying to complete in their journeys, and “How Might We” statements focus our design to specifically address the users’ JTBD.
We specifically chose to define the problem using JTBD and “How Might We” statements to reduce biases and stereotypes that accompany persona creation. Regardless of our user’s background, their JTBD are the same, and by designing for a specific JTBD we address a specific user’s need.
Jobs To Be Done/ Problem Statements
When tracking sleep habits, users want simple, reliable and digestible data so they can better understand their sleep and improve upon it.
When struggling to sleep, users want to find quick, easy solutions tailored to their individual needs so that they get to sleep and feel rested.
Nailing the Solution
Having defined the problem through JTBD, it was now time to find direction for a solution. We brainstormed through “How Might We” statements which helped stimulate innovation and the growth of ideas within our group as it guided us towards key problem areas.
Out of the many ‘How Might We’ statements we found the four which most clearly aligned our design challenges around the users’ JTBD and we used these as prompts for our design studio.
Time To Develop
With our “How Might We” statements framing our design process, we entered the development phase which consisted of a Design Studio, Feature Prioritization, Mapping User Flows, Prototyping , Iterating, and Testing.
The Design Studio included rapid rounds of sketching and ideation around the How Might We statements.
This was followed by Feature Prioritization using the Moscow Method to identify crucial features that would be included in the prototype.
After this we created a 4-part user flow to map our user’s journey around the key problem and solution areas. 3 rounds of low to high fidelity Prototyping and Usability Testing followed as we iterated to ensure our design provided a user-centered experience.
Design Studio
The design studio consisted of rapid sketching and ideation sessions through the Crazy Eight’s technique in which we explored the different ways we could resolve the 4 selected “How Might We” statements.
We presented our sketch solutions to each other and then narrowed down our ideas by identifying common themes and features
Feature Prioritization
Having identified our strongest ideas and features, we analyzed how feasible they were by mapping them using the Moscow Method. The Moscow Method helps to prioritize between Musts, Should, Could, and Wont features or tasks. We were able to differentiate between features for the MVP that are must-haves, should haves, could haves, and won’t haves. Because the project was only 2 weeks long, we decided to focus on developing the features that were essential and low -effort.
Mapping the App
With our features now prioritized, we integrated these into a site map that clarified the information architecture and mapped the user flows from the JTBD. The app map provided us with insight into the kinds of pages our user would typically encounter and the actions they would need to take. With these tools in place we moved into wireframing, prototyping and testing.
Prototyping & Testing
We split the wireframing and prototyping among ourselves across 4 different areas: onboarding, progress and trends, home screens, self-logging, sleep solutions, and device integration. I worked on onboarding, home screens, and progress/trends pages. We created a mid-fidelity prototype, which was tested through several usability tests.
User test findings were synthesized through affinity diagramming and led us to discover which areas of the pages needed the most improvement. The key areas to be addressed were: Clarity, Readability, and Navigation
We began rounds of iterations and testing to improve our designs. Eventually, we were able to refine the overall structure and content of our pages and begin thinking about our visual design.
UI Audit
Casper uses their visual style to illustrate the experience of comfort, tranquility, and relaxation achieved with their products. The visual style is used strategically to ensure Casper's values are represented throughout the site.
Visual Design
Because Casper was targeting a different type of user through their proposed mobile app experience, we aimed to establish a clear, albeit indirect connection between the online store and the sleep tracking mobile app. Though our integrated design did not need to be a replication of the online site, it needed to match Casper’s existing brand identity. We desired to understand how the brand’s beliefs and values influenced and determined their visual identity. By understanding their creative process, we created our own style guide and visual experience, which both reflected the online site and retained its own unique mobile app identity.
Demo & Prototype
Check out the product demo below or click on the button to interact with the live prototype.
Key Learnings & Next Steps
My key takeaways from this project are:
Work on 1 JTBD and 1 HMW at a time: I believe part of the negative testing feedback we received on the app navigation was because we were attempting to work on 2 JTBD and 4 HMW at the same time, essentially trying to solve 4 problems simultaneously. Instead of trying to accomplish too much within a short time-frame, we should have focused on 1 aspect of the app at a time.
When testing results are inconclusive, prioritize testing more: I saw this principle of UX come out as we agonized over the functionality of designs, only to see it cleared up by multiple rounds of testing. I believe we could have saved time by obtaining conclusive results about ambiguous features, before advancing the fidelity of the design.
Teammates help to drive a user-centered design process: Working within a design team made me aware of my biases with user research and usability testing. I found that paying attention to my teammates critiques and providing honest feedback as well, helped us keep the user at the center of the process and design
Next steps to finalize an MVP for Morpheus would be to address prototype bugs outlined in the latest round of usability testing, conduct accessibility testing for the full app, revise UX writing especially on onboarding screens, and address UI aspects such as negative space/congestion, alignment, and clarity.
