Skip to main content
UI Coach Logo
Intermediate

Distraction Free Writing Session

Design a focused writing mode that protects a chosen draft, blocks selected distractions, and recovers safely after interruption.

Desktop web, Mobile2 to 4 hours

The brief

Understand the problem

Background

Writers may want temporary protection from notifications and distracting sites, but strict blocking can also hide research, emergency communication, or an unsaved draft.

User context

Inez has ninety minutes to revise an essay. She needs access to three research sources and messages from her editor, while social feeds and news should remain unavailable.

Product problem

The product must create a meaningful boundary without trapping the writer or presenting focus as more important than data recovery and urgent access.

Objective

Design session setup, protected writing, interruption handling, and session review.

What to design

Define the experience

Required experience

  • Focus session setup
  • Minimal writing workspace
  • Emergency or research exception
  • Autosave recovery

Screens and states

  • Session plan
  • Writing mode
  • Blocked distraction
  • Recovery state
  • Session summary

Core user flow

Follow the critical path

  1. 01

    Inez chooses a draft and ninety-minute goal

  2. 02

    She allows research sites and editor messages

  3. 03

    A blocked news link offers a deliberate exit choice

  4. 04

    A browser crash restores the latest draft and remaining time

Product rules

Requirements and constraints

Requirements

  • Show what will be blocked before starting
  • Save locally and remotely with visible status
  • Provide explicit emergency exit
  • Allow a small named exception list
  • Preserve writing after a crash

Constraints

  • Browser controls cannot block every external app
  • Connectivity may fail
  • Exiting early must remain possible

Reality check

States worth considering

Sync conflict
Device sleeps
A research link redirects to a blocked domain
The writer needs an urgent message
The draft reaches storage limits

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Writing session

  • Draft: Field Notes essay
  • Goal: revise 1,200 words
  • Duration: 90 minutes
  • Allowed: editor messages and 3 research domains

Finish line

What to deliver

  • Five desktop or mobile states
  • A save-status and recovery model

If you want more

Optional extensions

Add a revision checklist
Design shared silent writing rooms

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
PacificoJosefin Sans

Pacifico & Josefin Sans

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Intermediate
Creator tools

Publish a Video After Processing

Design an upload workflow that helps a creator prepare metadata, understand processing, and publish a video with the right visibility.

Desktop web2 to 4 hours
Interaction DesignError Handling
Intermediate
Creator tools

Add Chapters to a Podcast Episode

Design a chapter editor that helps a producer mark, name, validate, and publish navigable sections for one podcast episode.

Desktop web1 to 2 hours
Interaction DesignInformation Hierarchy
Intermediate
Creator tools

Recover a Failed Video Upload

Design an upload and processing flow that preserves progress, explains failures, and gives creators a reliable path to publication.

Desktop web1 to 2 hours
Error HandlingInteraction Design
Intermediate
Creator tools

Stand-Up Comedy Video Channel

Design a publishing and earnings experience for comedians sharing original performance clips.

Responsive web2 to 4 hours
Content DesignInformation Hierarchy
Beginner
Creator tools

Publish a Personal Story With Confidence

Design a simple blog editor that helps a new writer draft, preview, choose visibility, and publish a personal post.

Responsive web1 to 2 hours
Content DesignResponsive Design
Advanced
Creator tools

Collaborative Story Workshop

Design a writing community where authors can publish a draft, request focused feedback, and accept changes without losing ownership.

Desktop web4 hours plus
Design SystemsInformation Architecture