dcode:jtbd-copy

JTBD Copy

Rewrite UI copy so every element reflects the user's job, not the feature's structure.

For designers who think: "This form says 'Custom message'... but what is the user actually doing here?"

Core Principle

UI copy that mirrors the system's model ("Submit form", "Custom message field") forces users to translate. Copy that mirrors the user's job ("Send this to your client", "Personal note") makes the next step feel obvious.

When to Use

• Writing copy for a new feature
• Reviewing existing UI for clarity
• A form, flow, or page feels functional but cold
• Users drop off or hesitate mid-flow
• Copy was written by engineers and needs a design pass

The Framework

1. State the Job

Before touching any copy, write one sentence: "The user is trying to [job]."

Example: "The user is trying to get their client set up on a product so they can earn their commission."

This sentence becomes the filter for every word on the screen.

2. Audit Every Element

Walk through each UI element and ask: "Does this reflect the job, or the system?"

3. Apply the Hierarchy

Not all elements need the same treatment:

1. Header -- Frame the job. This is the "you are here" signal.
2. Primary CTA -- Name the outcome, not the action. "Get my results" not "Submit."
3. Helper text -- Explain why this field matters to the job, not what format to use.
4. Labels -- Use the user's language, not the system's field names.
5. Secondary actions -- Demote anything that isn't the main job path.

4. Check for Cognitive Gaps

A cognitive gap is where the user's mental context shifts without warning. Common gaps:

Instructions

When writing new copy:

1. State the job in one sentence.
2. Write the header first. It frames everything below.
3. Write the primary CTA. Name the outcome.
4. Fill in labels and helpers. Each one should connect back to the job.
5. Demote secondary actions. Text links, not buttons.
6. Read the flow aloud. Does it sound like someone helping you get a job done, or a system asking for inputs?

When reviewing existing copy:

1. State the job. If you can't, that's the first problem.
2. Build a table. List every UI element with its current copy.
3. Flag system-framed copy. Anything that describes the feature instead of the job.
4. Propose rewrites. Show before/​after for each element.
5. Highlight cognitive gaps. Where does the user lose the thread?

Output format for reviews:

Job: "[user's job statement]"

| Element | Current | Proposed | Why |
|---------|---------|----------|-----|
| Header | (none) | "Send this to your client" | Frames the job |
| Field | "Custom message" | "Personal note" | User's language |
| Helper | (none) | "Builds trust and shows this comes from you" | Connects to job |
| CTA | "Submit" | "Send to client" | Names the outcome |

Common Mistakes