All work

Nox · Health concept

A sleep companion for people who can't switch off

I designed Nox, a mobile prototype that helps people with insomnia keep up good sleep habits, as my first UI/UX project at UC San Diego.

Role

Solo designer: research, UI and prototype

Context

COGS 3: Introduction to Computing, with Professor Mary E.T. Boyle

Timeline

2022

Tools

Figma

Nox home and insights screens on two phones

Problem

Sleep apps for insomnia exist, but most are hard to navigate when you're tired and anxious.

What I did

Read the research on sleep hygiene, studied Headspace and Somryst, then designed and prototyped Nox in Figma.

Afterwards

Turned Nox into a beginner UI/UX workshop for the Momentum Hackathon in March 2022.

01Why Nox

Wanting to sleep and being able to are two different things.

I've had trouble sleeping for a long time, and it got worse at university. My phone's sleep data showed short, broken nights, especially around finals.

Apple Health sleep chart, 3 to 9 April 2022, average 4 hours 57 minutes in bed
A normal week in April 2022: under five hours a night.
Apple Health sleep chart, 5 to 11 June 2022, average 4 hours 7 minutes in bed, broken into short intervals
Finals week: four hours, broken into short, restless stretches.
Meme: throwback to my last decent night's sleep, captioned over an ultrasound
How it felt.

I went looking for an app that could help me build better habits and kept running into the same thing: tools that were either clinical or cluttered. So I designed the one I wanted to use.

02Research

Science first, then the shelf

I read scientific articles and medical journals on insomnia and sleep hygiene, then looked at how existing apps put that advice into practice.

Meditation app

Headspace

Lovely sleep content, but it's one feature among many. Finding the bedtime tools takes several taps.

Prescription therapy app

Somryst

Grounded in CBT for insomnia, but it feels like a clinical programme rather than something you'd open every night.

Almost every sleep app I tried was hard to navigate, which matters most for someone who is exhausted and wide awake.

03Design

Built for 1am

Nox is named after the Roman goddess of the night. Every screen is dark navy with soft violet, rounded type and as few choices as possible. Step through the flow below.

Nox a calm first second screen
WhatA plain wordmark on deep navy.WhyAnyone opening a sleep app is probably in bed. The first thing they see should be dark and quiet, not a burst of brand colour.
01 / 07

04Prototype

Explore the Figma file

The full design file is public. Pan and zoom below, or open it in Figma.

Open in Figma

05Workshop

From project to teaching tool

In March 2022 I led a beginner UI/UX workshop for the Momentum Hackathon, run by Momentum, a youth-led science and technology magazine started by students in Jakarta.

I used Nox as the worked example, taking first-timers from the difference between UI and UX to building their own screens in Figma.

Workshop slide: UI versus UX, with a Don Norman quote
Starting with the basics: UI vs UX.
Workshop slide: Prototyping on Figma
Why Figma: free, in the browser and collaborative.
Workshop slide: the Figma interface labelled
A map of the Figma interface for first-timers.

06Reflection

What Nox taught me

Research, then implement

The best decisions came from reading the science before opening Figma.

Be creative and critical

Every screen had to earn its place in someone's bedtime routine.

Have fun with it

Naming it after a goddess and adding a dreamboard made it feel like mine.