Casper Sleep- Designing a Sleepy Experience.

Alice Hannam
8 min readApr 14, 2021

--

A UX Design concept project aimed to design and develop an app that allows users to analyse and track data from their Casper Sleep Smart Mattress (2-week sprint).

Who is Casper sleep?

An e-Commerce company that creates innovative sleep products. They have spent years studying the science and magic behind sleep, creating products based on real customer needs and feedback.

My role.

Working as part of a three-person team, Cameron Wilson and Chelsea Mangold-Takao. I followed the British Design Council’s Double Diamond process with its four phases: Discover, Define, Develop, Deliver.

We rotated the role of the facilitator daily, however, I took the lead on specific design stages and user interviews.

DISCOVERY

The Brief.

Casper is now developing a ​‘smart mattress’​. A mattress that through special sensors captures data about your sleep. It has been proven people love to track themselves in many aspects of their lives and Casper would like users to be able to view their sleep data collected on an app/site experience.

Goals.

Develop a mobile or app experience ​that helps people track their mood and sleep to build healthy sleep habits.

Why is it important for Casper customers to track their sleep patterns?

  • Sleep tracking provides users with data obtained through sensors and manual input.
  • Data analysis and trends show what is affecting a user’s sleep.
  • Tailored advice on how to make changes that positively impact your sleep.
  • Importantly… Happy Casper customers!

Researching Caspers Competitors.

Competitor analysis

After competitive and comparative research we realised that there were some main features that the main competitors all include such as a smart alarm. This was not included in our brief but we researched into the feature as we felt there was a good reason all other sleep apps had one.

Smart alarm you ask?

Smart alarms let your phone analyse your sleep and wake you up with a gentle alarm in the lightest sleep phase — the natural way to wake up feeling rested.

Feature analysis

We took the concept of the smart alarm to our client and advised them that there was a key feature which we should consider moving forward. This idea was keenly accepted.

Screener results.

Results from our screener (30 people)) confirmed that specific features within the app, such as a journal and nutritional tracking were desired.

Screener results

User interviews.

7 semi-structured user interviews were conducted (with people who previously used other sleep apps) to understand what people felt they wanted from sleep apps and what currently affected their sleep. Themes were drawn out from the interviews…

  1. People liked smart alarms (again asserting the use of a smart alarm feature). They knew it improved their mood when they woke up.
  2. Anxiety was a big issue affecting sleep. Sleep aids were commonly used to relax.
  3. Peoples routines such as; activities before bed, food, drink and screen time all altered sleep.
  4. People loved tracking everything, users loved seeing their progress and how to improve.

Who is our target audience?

Persona

Based on research, Laura became the persona we took forward to make all our design decisions, an amalgamation of all the user insights gathered. Her needs and pain points of her current sleeping habits were all taken into consideration.

User journey

We mapped out her user journey to highlight areas that were key to addressing, coming up with opportunities and solutions to solve. Key areas of interest were highlighted in orange.

Summary of research insights.

  1. Sleep education: Understanding sleep and what affects it is key to improving it.
  2. Sleep Aids: Users turn to mediation or sound apps to ease anxiety and fall asleep.
  3. Smart alarms: Commonly used and a loved feature by sleep app users.

Why an app?

Casper did not specify whether they wanted us to develop an app or a desktop site, however, we chose to progress with an app because:

  • No internet connection required.
  • Only native apps have access to Apple Health information.
  • Data tracking would fail if there was an interruption in network.

DEFINING

Becoming the user.

“Laura has recently developed sleep problems. She wants to track and analyse how various factors are affecting her quality of sleep so she can educate herself on improving her lifestyle”

The main question.

How might we use sleep and behavioural analytics to educate and improve sleep quality for Casper Customers?

Navigation.

Card sorting final results

Common themes for navigation were identified in an open card sorting session with 5 participants.

  • Groupings were analysed and combined to create the final navigational structure.
  • We decided to keep the sleep-related features such as alarms and aids within one section.
  • Results showed that analytics and dashboard should be separate, but highlighted to the users the information within each was different.
  • There should be a top and bottom navigation.

DESIGN

We conducted a design studio to work out the flow and general design of the screens, the screens below show the teams different representations of the analytics pages. We went through the sketches to discuss which features should be implemented further.

Design studio sketches

Sketch Prototype usability testing.

We wanted to include an onboarding for our app as it would provide an informative platform for the user, whilst getting the permissions needed for the app to track effectively.

Sketch prototype flow.

Sketch prototype

After 5 user tests, the main issues were…

  • Users felt trapped within the onboarding process as there was no indication on how to skip or go back.
  • Users wanted to know how many steps were in the process to retain concentration.
  • Temperature logging confused users as they did not know what temperature they were logging (Their own temperature? The rooms temperature?).
  • Moon sleep icon did not feel clickable. This was key for users to get to start tracking, but presently they were unsure how to get to that point.
Iterations made on prototypes

After the iterations, the prototype was then tested on 8 more users. The key findings are highlighted below.

Findings from usability testing.

These iterations were all taken into consideration when editing the design.

The main changes that were taken away from the process were…

  • A general feeling of confusion on the sleep aid section, users were not sure where to click to get a sleep aid.
  • The final screen was confusing, users did not know whether the sleep tracking had started or whether they had to go through more phases.
  • Magic link issues, users did not know what the magic link was.
  • The sleep goal page needed to be more clear as users did not know whether they were clicking the goals to choose their specific goal or the goals were there to be displayed and not to be picked independently.
Iterations made on the prototype
Iterations made on the prototype

All of these iterations were implemented in the high-fidelity prototype.

DELIVERY

As our role was to create an app for an existing company, we needed to understand Casper and its current branding and brand values. From our research, we understood the three core values of Casper to be:

  • Calming.
  • Reliable.
  • Modern/ Fun.
Caspers current branding.
Casper Avatar

We really liked the illustrations they implemented throughout their branding. We felt it added their personality throughout. This is why we developed a Casper avatar of our own which remained on-brand to their designs.

We analysed Caspers current website and branding, using this style guide we implemented the high fidelity prototype.

Solution

The design process described above resulted in a high-fidelity prototype of the app made using Figma. Some of the key flows of the app are shown in the GIFs below.

Onboarding Process
Home page
Smart Alarm and Sleep aid.

How did we meet the brief?

  • All features from the brief implemented.
  • Research pointed to solutions beyond the scope of the brief that we integrated into the app.
  • Integration of key features like sleep aids and smart alarms allow the user to fall asleep easier and wake up gently.

Next steps.

  • Test high-fidelity prototypes.
  • Look into the service design of the bed buying/app downloading process.
  • Research into how to fully integrate the Glow App into the Sleep App.

Key Learning

  • This was a group project within General Assembly. I really enjoyed working as a team, taking in each other's visions and collaborating on the final piece.
  • I learnt lots from my team members who knew lots about Figma from their previous roles. I really enjoyed learning from their knowledge and I am excited to implement what I learnt in my future designs.

Thank you for reading this far!

Let me know if you have any questions or comments on my designs for Casper Sleep.

And/Or

If you’d like to have a chat about anything design related I’d love to hear from you!

You can also find me on LinkedIn and via my portfolio.

--

--