What you’ll make
A short first-run map with one useful result and a way to recover from one mistake.
How long before you get to see your catalog?
A catalog app gets to a private preview sooner
Say you want to see how your printables would look in a shop catalog. The app asks for your shop name, logo, colors, time zone, and a template first. I’d want to see what the catalog looks like before I dig up my logo.
First run
Two ways to see a private draft
- ‘Use sample items’ opens a three-item catalog right away.
- ‘Import a CSV’ uses your own products and opens the same private preview.
- The preview says ‘Private draft’ and the button says ‘Save draft.’ Shop colors and the logo can wait.
Something goes wrong
Give the import a second chance
- Upload a file with no price column.
- Show ‘Your file is missing a price column’ with a link to a sample header.
- Let the person try again or choose ‘Use sample items’ without restarting setup.
Before you start
- Bring the current signup or welcome screens, if you have them. Write down the first useful thing someone should be able to do and any details or permissions that action requires.
Name the first useful result
Write down what a new person should see after the first run. List which answers the app actually needs to show it and pick one mistake you can account for.
Map the screens before building
Open Claude and send the prompt below with your answers. Add screenshots if you have them. Tell it which recovery actions your app already supports.
Map one first-run path and its recovery
Use the details I provide in this chat or in my attachments. Write a short screen-by-screen map from the first screen to my stated result. For each screen give the heading, only the fields it needs, the main action, and what comes next. Include the recovery case I provided and say what stays entered after retry or Back. Move optional setup out of the route. Use a sample route only if my product supports it. Ask if the result or required fields are unclear.
Save the route and the way back
Keep a short map with the heading, action, and destination for each screen. Include one error and the route back to the result.
I describe a catalog that can open with sample items or import a CSV.
The map might end both routes at ‘Private draft.’ A missing price column shows an error with options to retry or use sample items.
Follow both routes yourself
Read the screens in order as if you just arrived. On the error path, choose a recovery option and follow it to the draft. You can do this on paper or in a preview.
- Point to the first useful result on the map.
- Check which fields still need an answer on the first run.
- Follow the error back to a screen you can use.
Optional: Try leaving and coming back
Close the preview halfway through and open it again. Write down what the person should see, which information carries over, and what they can do if they need to start again.
Find the shortest path to a useful first result
Use this with your current flow and a few complete examples to choose what people need before they can get started.
My new user is [person] and the first useful result is [something visible they can finish or see]. Here are [current screens or notes] and [reference captures, source links, and dates]. Compare each flow from the entry screen to that result. List the screen order, required fields, choices, permission requests, and what Back, Skip, and errors do. Give a screen or timestamp for each observation and mark any step you couldn’t see. Make me a proposed route with each required field beside the moment it becomes necessary. Point out which preferences could wait and how someone who skips them reaches the same result. Include one sensible default if the evidence supports it. Give me two observable checks for deciding whether the new path helps, such as fewer required decisions before the preview and whether the final screen names the result.
Build a prototype I can make fail
Use this after choosing a route to get testable success, Skip, Back, and recovery states.
Use [chosen route and sample content] to make a clickable first-run prototype, or a screen-by-screen state table if you can’t produce one. For each screen write the visible heading, labels, and main action. Show where Back goes and what information stays filled in. Send Skip to [destination] and make the first result unmistakable. Add a way I can deliberately trigger [realistic error] with sample data. Write the actual error and recovery copy, and show which inputs remain after a retry. If a permission or field depends on the real app, mark it as a dependency to verify.
Find the first thing to fix in my walkthrough
Use this after following the routes yourself to pick one fix and check it again.
Here’s [my first-run goal], [prototype or sketches], and [what I saw when I followed the main route, Skip, Back, and the error]. Make a short log with route, expected screen, actual screen, and what happened to the answers I entered. Mark anything I could only trace on paper. Pick the first issue that keeps me from reaching or recognizing the result. Give me the smallest fix, the steps I can repeat myself, and the exact screen or saved entry I should see afterward.
Optional worksheet: First-run flow worksheet
Fill this in as you go. Keep this page open while you work. Reloading it clears your answers.
Troubleshooting
What if I can only see one screenshot from a reference?
Use it for what you can see on that screen. Mark the steps around it as unknown and find a recording or try the product if those steps affect your plan.
What if someone skips a step and gets stuck later?
See whether the skipped answer can have a default. If it’s needed for one later action, ask at that point. If it’s needed for the first result, explain why and make it easy to correct.