My pre-Figma checklist before I design a single screen

Designing screens too early feels productive. It is also how teams ship beautiful interfaces for the wrong problem. Before I open a design tool, I run a short strategy framework that forces clarity. The frames can wait; the thinking cannot.

I say this as someone who loves good interface craft. Craft without strategy is expensive decoration. Strategy without craft is a memo nobody can use. The order matters: decide what must be true, then design the experience that makes those truths visible and actionable.

This is why I start projects without opening Figma. Not as a personality quirk. As risk management. Pixels create false consensus-“we all like this layout”-while the customer, job, and belief gaps remain unnamed.

Why screens without strategy fail quietly

UI work creates artefacts people can react to. Stakeholders argue about spacing. Engineers estimate tickets. Founders feel momentum. Meanwhile nobody has agreed who the product is for when tradeoffs appear. Tradeoffs always appear.

Figma and Linear are excellent tools for building software experiences. They do not decide your ICP. Airbnb’s product clarity did not come from a component library first; it came from a sharp understanding of hosts, guests, and trust. Apple’s onboarding discipline starts from what the customer must believe and feel-not from a screen inventory. Tools amplify intent. They do not invent it.

The five boxes I fill first

1. Customer: who is in, who is out.
2. Job-to-be-done: the progress they want.
3. Current alternatives: what they use today (including doing nothing).
4. Outcome: the measurable change your product creates.
5. Belief gap: what they must believe before they buy or activate.

Box 1: customer: who is in, who is out

Write a primary customer as a decision-maker in a context. Then write exclusions. Exclusions are how positioning becomes real. “Also useful for enterprises, freelancers, and students” is how homepages become airports.

Example: “Head of Customer Success at B2B SaaS companies with 15-60 CSMs, post-Series A, whose renewals depend on messy spreadsheets.” Out: consumer support teams, pure sales tools buyers, enterprises with two-year procurement cycles (for now).

Box 2: job-to-be-done: the progress they want

Jobs are progress, not feature requests. “I need a dashboard” is a request. “I need to walk into a QBR without fearing a surprise churn story” is a job. Design for the job and the dashboard becomes a means, not a destination.

A useful prompt: When ___ happens, I want to ___, so I can ___. Fill it with customer language from interviews-not from your roadmap vocabulary. The Interaction Design Foundation has accessible primers on user-centred framing; the point is not academic purity. The point is designing for progress.

Box 3: current alternatives (including doing nothing)

Your competitor is often a spreadsheet, an agency, a junior hire, or inertia. Map the real alternative stack. If “doing nothing” is cheap and pain is intermittent, your product must create urgency or remove friction dramatically. Otherwise you design a nicer optional tool.

Notion did not only compete with other docs tools; it competed with the messy combination of docs, wikis, and tasks people already tolerated. Stripe competed with painful integration work and brittle payment setups. Name the alternative honestly or your differentiation will target a ghost.

Box 4: outcome: the measurable change

State the change in a way a customer could verify. Time saved. Revenue protected. Errors reduced. Cycle time shortened. Soft outcomes (“feel more aligned”) need observable proxies or they evaporate in sales calls.

Weak: “Better collaboration.” Stronger: “Cut weekly status meeting time by half because blockers are visible without a round-robin.” The second outcome designs onboarding. The first designs posters.

Box 5: belief gap: what they must believe

Before someone buys or activates, they must believe several things: the problem is worth solving now, your approach works, switching cost is manageable, and risk is acceptable. List the gaps. Each major screen or page should close at least one.

Only then do screens make sense

UI becomes a translation layer: each screen should reduce a belief gap or advance a job. If a screen does neither, it is decoration-however lovely the spacing.

• Homepage answers belief gaps for cold traffic.
• Onboarding delivers the first outcome fast.
• Pricing pages resolve risk and value comparison.
• Feature pages map to jobs-not internal modules.
• Empty states teach the next action, not the brand story.

When the five boxes are filled, design stops being improvisation and starts being argument made visible. Wireframes get easier because you know what each frame must accomplish. Critiques get sharper because “I don’t like blue” is no longer the main feedback genre-though someone will still mention blue. People are consistent that way.

A worked example: fictional startup “parcelmind”

Parcelmind wants to build “AI logistics for DTC brands.” Before screens, the boxes:

• Customer: Ops lead at DTC brands doing £2-15M online, shipping from 1-2 warehouses, currently living in Shopify + spreadsheets.
• Job: Prevent “where is my order?” chaos during peak without hiring another coordinator.
• Alternatives: Spreadsheets, Slack threads, overpaying a 3PL for visibility they still do not trust, doing nothing until Black Friday pain.
• Outcome: Reduce WISMO tickets by 30% in 60 days; same-day anomaly detection on delayed parcels.
• Belief gaps: “AI will hallucinate tracking,” “We’ll need engineering to integrate,” “This is only for huge brands.”

Now screens have jobs. Homepage: prove it is for mid-size DTC, show WISMO outcome, demote enterprise theatre. Onboarding: connect store, show first anomaly in under fifteen minutes. Settings can wait. A settings-first onboarding would be a strategy failure wearing a progress bar.

Try this: fill the boxes in 60 minutes

1. Set a timer. No Figma. One document.
2. Fill each box in bullet form. Force exclusions in box 1.
3. For box 5, list at least five belief gaps and rank by how often they kill deals or activation.
4. Map your current homepage and onboarding: which gaps do they close? Which do they ignore?
5. Choose the single gap to close next. Design only for that until it moves a metric.
6. Only then open a design tool-with the boxes pinned above the canvas.

How this connects to positioning, PMF, and spend

The five boxes are the spine behind repositioning work-see how I’d reposition your startup in 60 minutes. They also prevent the expensive habit of scaling an unclear offer, covered in the most expensive early-stage mistake. And they keep product-market fit conversations honest: fit requires a defined customer and a valued outcome, not a vibe-more in what founders get wrong about product-market fit.

For operators who want external reading on building products that map to real decisions, Harvard Business Review and First Round Review regularly cover strategy-before-execution lessons. Pair them with primary customer conversations. Frameworks are not a substitute for contact with reality-they are a way to remember what you learned.

Turning boxes into an experience map

Once the five boxes exist, map the journey where belief gaps get closed. This is not a forty-lane journey diagram. It is a short sequence:

1. Cold awareness: homepage closes “is this for me?” and “what changes?”
2. First session: onboarding closes “can I get value without pain?”
3. Habit: core loops close “does this keep helping the job?”
4. Expansion: pricing and invites close “is more of this worth it?”

Assign each major belief gap to a step. If three critical gaps are all dumped onto the homepage, the homepage becomes a suitcase that will not close. Spread the argument. That is how customer journeys get redesigned without turning into slideware.

Critique questions that replace “I don’t like it”

When screens finally appear, critique against the boxes:

• Which job does this screen advance?
• Which belief gap does it reduce?
• What would a user do if this screen disappeared?
• Does this serve the primary ICP-or an excluded segment we already refused?
• Where is the proof for the claim this screen makes?

If the room cannot answer, the screen is premature-even if it is pretty. Pretty is not a strategy KPI, however much Behance would like it to be.

Common ways teams fake the framework

• Writing an ICP so broad it includes everyone with a pulse and a browser.
• Listing “competitors” that are logos you envy, not alternatives customers use.
• Stating outcomes nobody can measure (“delight,” “alignment,” “transformation”).
• Filling belief gaps with marketing slogans instead of product behaviours.
• Doing the workshop once, then ignoring the boxes when a big logo asks for a custom detour.

From strategy to launch without losing the plot

The framework is the spine of how I move from strategy into build and launch. Messaging, IA, onboarding, and proof placement should all trace back to the boxes. When something cannot trace back, it is usually politics or habit. For the wider approach, see from strategy to launch and what I’d change in your startup in 30 days.

A one-page strategy template you can reuse

Keep the five boxes on a single page-literally one page-so they stay alive. Title it with the product name and the date. When the page gets longer than one screen, you are collecting essays instead of decisions. Decisions should be short enough to argue about.

• Customer (in / out)
• Job-to-be-done (when / want / so I can)
• Alternatives (including doing nothing)
• Outcome (observable change + timeframe)
• Belief gaps (ranked 1-5 with owners)
• This month’s design priority (one gap, one surface)

Share it with engineering and sales before kick-off. If sales cannot use the outcome sentence on a call, the box is not done. If engineering cannot see which belief gap a ticket closes, the roadmap will drift towards interestingness. Interestingness is a fine hobby. It is a costly product strategy.

When to reopen the boxes mid-build

Reopen them when a new segment shows unexpected pull, when activation stalls after a promise change, or when sales keeps inventing a different story than the homepage. Do not reopen them every time someone has a feature idea-that is how strategy becomes a revolving door. Stability is the point; revision is the exception with a reason.

Fill the boxes. Then design like you mean it. And if someone tries to open Figma mid-sentence during the workshop, gently close the laptop. The pixels will still be there after the thinking. The reverse is less true-unthinking pixels have a long half-life.