Day and Night:
Designing Lights that Match Your Circadian Cycle
Duration:
6 Weeks Part-time
Project Type:
Concept
Team:
Me (Designer)
Julian Tipler (Developer)
My Roles:
Research
User Flows
Visual Design
Interaction Design
Usability testing
High-fidelity prototyping
Our Goal
Many people employ applications, device settings, or eyewear to adjust the blue light coming from their screens so that it is easy on their eyes and does not affect their circadian cycle (also known as sleep cycle or body clock). With the advent of smart lights, consumers are able to adjust the lighting in their house to fit their circadian cycle and thus improve their energy levels during the day and maintain a healthy sleep cycle.
Problem: Hyperfocus on Bright Colors
Many smart lights have a user experience that focuses on customization: combining vibrant colors to suit the mood of a certain room or activity. Furthermore, every major smart lights brand sells a type of light (sometimes called “white ambiance”) that can only project white, yellow, and blue light (compared to other “color ambiance” smart lights which can access the full color spectrum). However, the same customization-based apps that were built for the “color ambiance” products must be used for the “white ambiance” ones because there is no alternative.
Our Solution: Keep it Simple!
We created an app that focuses on the “white ambiance” smart light products. To distinguish our app from the existing smart lights apps, we applied design principles to achieve three key objectives:
Simplify:
Limit customization and apply automation
Explain:
Help the user understand the system status
Configure:
Help the user set up, move, and replace lights
Research
What’s Out There?
I conducted competitive (Philips Hue, Yeelight, Sengled light, Google Home) and comparative (weather & calendar apps) analyses. This helped me understand how existing smart light apps help their customers control their lighting, and how other, non-lighting, apps helped their users understand scheduling and changes based on their environment.
The primary takeaways were:
Use standards such as cards, brightness bars, and on/off buttons to convey controls
Use a header to communicate the current state of the app
Avoid too much similarity as you go deeper into the app
Streamline adding/moving new lights and zones
Ensure color consistency between the state of the app and the zones/lights
Who are the Users?
I interviewed individuals with and without smart lights, and individuals who take measures to limit their blue light exposure. Then, I synthesized my findings into a user persona upon which I could base the features and designs of this product.
Design
Problem: Understanding Light Color as Time of Day
Lets consider the way that colors are described. Colors (especially light colors) are rarely expressed as a time of day.
Instead, light colors are typically expressed as their literal name:
Or as an object in the real world:
In smart lights apps, the color is usually represented as a “scene” from the real world, often using a thumbnail of that scene to represent the color:
This means that people aren’t used to understanding color via a description of the time of day. Our goal then, was to help them understand the link between the time of day and the color of their lights.
Solution: Consistent Focus on Time of Day
We needed to ensure that the users understood the color options in our app as a representation of the light that they would see throughout the day. We achieved this by consistently using consistent time-of-day imagery combined with the light colors to create an association of the light color with the time of day it is meant to simulate.
Solution: Delightful Interactions Based on Time of Day
I designed a set of interactions that would show the time of day changing when the color of the lights changed, thus solidifying the link between light color and time of day.
Here’s the interaction that happens when the user globally changes the color for all of their zones:
I then designed a separate interaction to be used to change the light color for a specific zone only. This further associates the light color with the time of day while also ensuring that the user knows that they are in the section of the app that pertains a specific zone rather than all zones. Here’s the interaction:
