NightLight
Light to your life
My Roles
Information architecture
Interface design
Visual design

Design Team Members
No items found.
Our busy culture sometimes makes us lose count of the days we lose sleep. So, NightLight hopes to bring some awareness and maybe even some more light.
Project Background
Project Process

Project Overview

NightLight widget on widget screen

Problem Definition: The purpose of this project was to create a widget based on personal experience and insight. As a sleep-deprived design student, I wouldn’t be able to count on my fingers and toes—and my classmates’—how many days I had inadequate, insufficient sleep. My health was being sacrificed at times for the sake of my projects, or so I thought. So, I wanted a way to track and see whether my tiredness was just because of an off-day, or because I had a trend of bad sleep. In a world so busy, we could all use a little more rest sometimes. Especially when our society may teach us that sleep gets in the way of doing things.

Concept: The resulting widget is a sleep tracker, shaped circularly and designed to represent sunshine, a metaphor for our happiness and wellbeing. After all, sleep rejuvenates just like the sun. More sleep means longer sun rays. Less sleep means shorter sun rays. The result is a data visualization whose mood might represent our own.

 

Planning and Strategy

Ideation: First came the exploration of form in order to best communicate the concept and function of the widget.

Architecture: A simple architecture for a simple widget. Simple enough for our busy lives.

Pattern Research: Research was done for interface affordances and look and feel.

Wireframing: A skeleton was created to mock up the widget states for validation. 

Visual Identity: Typography, color, and image style was defined to best complement the widget concept and function.

 

Execution and Deployment

After a plan was created, the final design was created in a style that supported and complemented the widget function and metaphor.

  • ‍Pages:
  • Sun
Data visualization of sleep in default mode

  • Start
After hovering over the sun visualization, a prompt appears to start the sleep timer

  • Moon
The timer appears with a moon backdrop to represent sleeping time

  • Stop
After hovering over the moon timer, a prompt appears to stop the timer

  • Input
  • Data
Data summarization appears when hovering over the sun rays

  • Data Hover
Conclusion
back to Project List
Other Projects
User Experience Projects
Visual Communication Projects