Designing a better way to reduce night-time social media scrolling

As part of Stanford’s CS247B: Design for Behavior Change course, I worked with a team of four other students (Raina, Aishwaria, Mallika, and Danielle) to develop Nightfall. Nightfall is an app designed to help people reduce their night-time screen usage and sleep better. From January to March 2021, we made our way through the whole product design journey, from conducting primary research via diary studies to ideation, prototyping, and testing.

Understanding the Problem

Picking a domain

During our initial team meetings, we discussed how the Covid-19 pandemic had affected our lives and led…


What I’ve learned throughout this quarter from CS247B: Design for Behavior Change

Before this class…

I had never done any design work and also hadn’t sketched anything in years. My impression of design was that it was for artistically talented people with good visual intuition, and then maybe refined a bit through A/B testing. I knew a bit about behavior change from my psychology classes, but my knowledge was on high-level topics like classical and operant conditioning (good ol’ Skinner box), intrinsic vs. extrinsic motivation, and so forth. …


Background

During our ideation process, the Browser Drowser team came up with 26 ideas that we then narrowed down to our top 3. From there, we decided to expand upon our “Nightfall” concept.

Nightfall is intended to be a combination of the Downtime and Grayscale interventions that we previously tested that aims to improve the user experience by making the transition more natural and less jarring. …


After talking through our vision of what the Nightfall app should look like, the Browser Drowser team created the following site map, which breaks Nightfall down into various components, including the onboarding process, adding a new sunset, the sunsets list, settings (defaults), and analytics. Here, a “sunset” refers to the time that the user sets for when night will begin falling.

Our site map created in Mural

Task Flow

I decided to work on the sunsets list component, and here is the task flow I ended up with.


Examples of common visual design principles found in the wild

Proximity

Etsy’s footer section makes use of proximity (and a grid layout) to organize related links for easy navigation.

Alignment


Measuring Me Take 2 Reflection

Models:

My poor attempt at a connection circle model

Michelle Huang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store