KM.
← All work

Product design · Creative operations

The Prep Room

The kitchen before the kitchen.

Category
Product concept
Role
Concept, product design, UX, front-end
Year
2026
Status
Concept — deck & prototype

Overview

The Prep Room is a creative operating system for a single practice — one place to brief, research, direct, schedule, produce and invoice a project, instead of twelve apps that never speak to each other.

The premise is that a YouTube video, a brand identity and a comic book all walk the same five stages. They only branch at Stage 4, Production, where the medium loads its own tools. Everything before and after that branch is shared: the brief you write once becomes the contract header, the invoice, the email draft and the client's share page.

I built it because the worst part of freelance work was never the work. It was the restart — reassembling the same scaffolding from scratch on every project, and losing the hard-won never do this again somewhere between round one and round three.

  • 5Stages every project walks
  • 7Mediums, each with its own Production
  • 26Named tools placed across them
  • 0Client logins to manage

01 — The problem

Brain fog is a tooling problem.

Every restart is a redesign of the puzzle instead of placing the pieces. The Prep Room ships with the puzzle already laid out.

Before

  • Brief in Notion, references in Milanote, script in Docs
  • Client name typed three times, wrong once
  • The never do this from round one forgotten by round three
  • Deadlines in a calendar that knows nothing about the work
  • A client deck built from scratch on a Friday night
  • Invoice written in a fourth app with no memory of the package

After

  • One project record, five stages, one screen
  • Client entered once, flowing into every document
  • Do-nots pinned to every stage that follows
  • Every deadline on one calendar and one timeline
  • Sample Platter turns thinking into a PDF deck
  • Contract and invoice generated from the brief you wrote

02 — Thinking

Three decisions, then the workspace is already correct.

The information architecture does the work up front, so the interface has almost nothing left to ask.

  1. Pick the medium

    Brand identity, short film, photo shoot, comic book. The choice loads Stage 4 with the right tool slots before you type anything.

  2. Brief it once

    Client, feeling, audience, deliverables, deadline. That record becomes the contract, the invoice, the email draft and the client's share page.

  3. Walk the spine

    Close each stage with a report. Its do-nots merge into a project-level list that stays visible for everything after it.

03 — Presentation

The product deck

Nineteen slides walking the five-stage spine, the medium branch, the calendar and timeline, and the documents a project generates on its way from first call to final invoice.

Open the deck full screen ↗ View the product landing page ↗

Outcome

What was produced. A full product deck and a marketing landing page, both hand-built in HTML and CSS — the five-stage model, seven medium branches, twenty-six named tools, and the document-generation logic specified in enough detail to build against.

What I learned. That the hard part was never the interface. It was finding the one structure general enough to hold seven mediums and specific enough to still be useful — the branch at Stage 4 was the decision the whole product hangs on.

What could be improved. The deck explains the system better than it demonstrates it. Real screens, with real project data moving between stages, would prove the claim faster than the diagram does.

Where it goes next. A working prototype of the spine — one medium, five stages, one generated invoice — is the smallest thing that would test whether the model survives contact with an actual project.