Sleep Coach

A native mobile app to help cancer patient track and manage their sleep habits for better quality of life.

  • Branding, illustration, and animation
  • UX Designer
  • Front end development

Branding / Illustration / Animation

This project was asked by the researchers to feel like “a sleep coach in your pocket”. We ultimately arrived at a chat bot being an approximation of a real life sleep counselor.

Through guided session, the app gathers knowledge about a users’ sleep habits, and helps provide a path to “more good mornings”.

Sleep Coach logo and Avatar sketches

The path to better mornings was through our chatbot: a friendly coach who checks in every morning and helps you track your sleep, and manage any issues you’re having based on the advice of a real sleep therapist. The avatar was based off the researcher’s likeness, but made more like emoji / robot to alleviate any uncanny valley concerns.

The overall aesthetic was designed to be colorful, cheerful, and friendly. The team came up with an analogy of a “sleep garden” where you thought of tending to your sleep like a group of plants.

UX Design

The team discussed overall goals with the client and a sleep therapist over the course of weeks, determining best practices and solutions. We created flows for each part of the process. Taking those finding and high level flows, I worked on solving how a user would progress through each process, things like:

  1. Onboarding the patient to the app
  2. Tracking their sleep each day
  3. Reading content related to sleep health
  4. Navigating through the chat bot experience
  5. Activities to help with sleep like meditation

Front End Development (Vue.js)

Working with a developer, I was responsible for layout and aesthetic using html, Vue.js components, and SCSS. Normally in the process it’s a back and forth between a developer setting up a base app shell and some core functionality, while I come in and put things in their place and on brand.

For this particular project we working within the constraints of framework7 – providing us with a lot of the app components to work with. We took this into consideration when designing the rest of the app.