Design pass before you ship

Build-along · ~20 min at your own keyboard

Your tool works. Now look at it the way a stranger will. A new user does not know which button matters, what a gray box means, or why the screen says 'Item 1'. Small things stop them, and they will not tell you. They just stop using it. A design pass is a short list of checks you run before anyone else sees the tool. You do not need taste or design training. You need the list, a phone, and twenty minutes. Run all ten checks. Most first builds fail four or five. Pick the five that matter most to your users and fix those. Write down each change and why you made it. The reason is the part that teaches you. Next time you will build it right the first time.

Ladder · Level 5The long version: Building with AI ↗

Your starter: Ten-point design check

Checklist

Make it yours: Run every check on your own tool and mark it pass or fail with what you saw. Then pick five fails, fix them, and write each change with its reason. The list alone does not pass.

DESIGN CHECK (run it on a phone, one screen at a time)
Mark each one PASS or FAIL, and write what you saw.

1. One job per screen. Each screen does one thing. You can say what in five words.
2. The thing they came for comes first. The main list or the main button is at the top, not under a welcome message.
3. Reads on a phone. No zooming, no sideways scrolling, and buttons are big enough for a thumb.
4. Real words, no placeholders. No lorem ipsum, no "Item 1", no "John Doe", no "Description goes here".
5. One accent color. One strong color, used only for the main action. Everything else is quiet.
6. Buttons say what happens. "Mark done" and "Add job", not "Submit" or "OK".
7. Errors say what to do next. "Add a date to save this job", not "Invalid input".
8. No stock AI phrases. Words like "unlock", "seamless", "elevate" or "your journey" read as filler. Write what the tool does.
9. Empty screens say how to start. A blank list says "No jobs yet. Tap Add job to add one."
10. It sounds like you. Read every label and message out loud. Would you say it to a customer?

FIVE CHANGES
1. Check:
   Before:
   After:
   Why:

The coach checks that what you paste back is your own work. The starter pasted back unchanged won't pass.

Do this

0/6

Checkpoints

▸You should now see the ten checks marked pass or fail for your own tool, with a note on what you saw.
▸You should now see five changes made in your tool, each checked on your phone.
▸You should now see a numbered list of five changes, each with its check, before, after and a reason.

The three ways this goes wrong

All five changes are colors and fonts. — Colors are one check out of ten. Look again at the checks about buttons, errors, empty screens and placeholder words. Those are the ones that stop people.
You wrote five changes you plan to make, but you have not made them. — This lesson is the changes, not the plan. Make each one in the builder, check it on your phone, then write it down.
A change broke something that worked, such as a button that no longer saves. — Say 'Undo the last change.' Then ask for a smaller version of the same change. Run your three done checks from the spec again before you move on.

Share what happened

Paste your five changes, numbered 1 to 5. For each: the check it fixes, what it was before, what it is now, and why you changed it. Add a short note on how you checked it on your phone.

Strip API keys, passwords, and tokens before you paste. Swap them for [KEY].

🔒 Don't paste confidential, personal-health, or payment info.