Why I Write Before I Draw

The most expensive tool in a product designer's kit isn't Figma. It isn't Framer. It's the undo button.

Every minute you spend pushing pixels on a screen that doesn't make logical sense is debt. We often confuse "fidelity" with "clarity." We think that if we can just make it look real, it will feel true. But a beautiful interface for a confused workflow is just a well-decorated maze.

That is why I don't start in Figma. I start in a text editor.

I use a technique called The Narrative Wireframe. It is a screenplay for the user's experience. It forces me to design the logic of the flow without the distraction of the aesthetic.

Here is how it works, and why it saves me 50% of my design time.

1. The Screenplay Format

Before I draw a single box, I write out the user flow as a simple, text-based story. I treat the user as the protagonist and the interface as the setting.

• Bad: "User clicks button, modal opens." (This is mechanical).

• Good: "The user, wanting to upgrade, scans the pricing table. They see 'Pro' is highlighted. They select it, expecting a confirmation, but are interrupted by a 'Create Account' wall."

By writing it out, I can instantly see the friction. "Interrupted by a wall" feels bad in text. If it feels bad to read, it will feel bad to use.

2. The Logic Stress-Test

When you are moving pixels, your brain is processing color, spacing, and typography. You don't have enough bandwidth left to strictly audit the logic.

Text has no hiding places. You can’t mask a broken flow with a nice drop shadow.

If I write: "The user clicks 'Invite Team' and is taken to their dashboard," I immediately catch the gap: Wait, they didn't enter an email address. In Figma, I might have mocked up the Dashboard and forgot the Invite State entirely. In text, the plot hole is obvious.

3. The "Low-Fidelity" Buy-In

The hardest part of a Founding Designer role isn't the design; it's the alignment.

Showing a stakeholder a wireframe often leads to bike-shedding: "Can we make that button blue?" or "I don't like that icon." They focus on the surface.

When I show a stakeholder a Narrative Wireframe, we argue about the story. "Does the user actually want to upgrade here?" "Is this really the first thing they should see?"

We are debating the product strategy, not the UI. And once we agree on the story, the UI designs itself.

The "Screenwriter" Advantage

In film, they don't build the set until the script is locked. In product design, we often build the set while we are still improvising the lines.

The Narrative Wireframe is the script. It costs nothing to rewrite a sentence. It costs days to rebuild a prototype.

Be the writer first. The designer, second.

Photo by Daria Kraplak on Unsplash