Nightfall Storyboard & Wireflow


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. The core idea is that as a user gets deeper into the night, their screen brightness will gradually get lower and lower until it hits 0 and their screen is essentially black, blocking further screen usage.

Some Questions We Want to Address

  • Does lowering the screen brightness gradually succeed in making the content less addictive? If not, what about combining reduced brightness with gradual grayscale? If so, does making the content less addictive actually help people fall asleep earlier?
  • How do we make it harder to turn off Nightfall while respecting the user’s agency and how they might need to use their phone in emergency situations? During our intervention study, both Downtime and Grayscale participants reported that while they felt Downtime/Grayscale was effective, they would turn off the interventions after they figured out how to do it. It will be a challenge to figure out how we can strike a balance between making it more difficult/annoying to turn off Nightfall, while respecting the user’s agency.
  • How does Nightfall motivate the user to consistently use it? While reducing social media usage and getting better sleep should be beneficial to the user, social media is an incredibly addicting force that is difficult to resist through willpower alone. We may want to explore bringing in some components of our other ideas to help motivate users, like adding a gamification and/or social pressure component.
  • What is the goal of Nightfall? Is it to reduce social media usage before bed or to actually help the user fall asleep and sleep better? From conversations we’ve had as a team, it seems like we want Nightfall to be more than an app usage restrictor like many competing products. We ultimately want Nightfall to help the user feel more ready to tackle the next day. This may mean in addition to Nightfall’s core functionality, we want to consider adding in analytics and resources on how to sleep better.


The following storyboard shows how our typical user, a busy college student who uses social media to unwind at night, would interact with Nightfall.


In the wireflow above, I’ve sketched out what I think the primary “setting up” interaction will be like (inspired by Samsung’s Bedtime mode set up). The user will have to specify when nightfall begins and how long it will last (until their screen goes dark). I opted for a slider bar for the duration setting since I think we may want to limit the range of time the user can specify for how long it will take for night to fall. I’ve included a preview option so users know what they will be getting into as well as an advanced settings menu in case power users want to further customize their experience. I also put in a “commitment level” setting as an initial exploration into trying to balance friction vs. agency, but the existence of the “low” level might mean users will just switch to that option once they get tired of Nightfall.

Final Thoughts

The storyboarding and wireflowing process was helpful in jumpstarting our thinking around what we want Nightfall to accomplish. We definitely have some interesting design challenges ahead in terms of how we can motivate users to consistently use Nightfall and how to balance increased friction vs. user agency. I also think that helping users sleep better on a consistent basis will take more than reducing their screen use before bed, so it will be interesting to see how we can differentiate Nightfall from the many other screen use blockers that currently exist beyond the gradual shifting element.