Digital Plan Vault
← Back to Design principles

Workshop 11 · Design principles

Cut friction from a signup screen

Draft one simpler signup screen and the message people see after they tap the button. Check that the wording matches what your app really does.

Takes
15–25 minutes for one signup draft
Needs
Claude and a signup screenshot or sketch, with the fields your app needs
Costs
Free in Claude chat with a written sketch or screenshots within plan limits.

What you’ll make

One simpler signup draft with the exact words for what happens after the button.

Would you fill all this out?

A little inventory app with a big signup form

Say you’re trying out an inventory app for your shop. You haven’t even seen the app yet and it wants your name, your shop name, your email, and how much stuff you sell. I’d probably put my phone down right there.

This app can get you in with an email link. Here’s how it looks when we save the shop questions for the part where you actually set up your shop.

Before you start

  • Grab the signup screen and whatever comes right after it. Screenshots or a quick written sketch are fine. If you’re starting from scratch, use the inventory app above for a practice run.
  • Find out what your app needs to create an account. If you’re unsure about a field, mark it to check before you move it.

Fill in your signup details

Type what your form asks for and what happens after the button. If you aren’t sure a field can wait, say so. For the inventory app, email gets people in. The shop name can wait until they set up the shop.

Copy your prompt into Claude

Your answers fill in the prompt below as you type. Copy it into a new Claude chat. If you have a screenshot, attach it before you send. Claude will give you one revised screen and the words for what happens after the button.

Make my signup easier

Help me simplify one signup screen. Use the signup details I provide in this chat or in the attached screenshot.

Give me one recommended draft at phone width. Show the exact heading, labels, helper text, and button wording. Explain in a sentence what you moved and why. Keep anything tied to account creation, consent, or security unless I’ve confirmed it can move. If an essential detail is missing, ask one plain question before assuming how the app works.

Show what the user sees after tapping: the usual next step, an error they can fix, and a failed request if relevant. Keep their input when they can correct it. If I use email links, show where the link goes and how someone can fix the address or resend if the app supports it. Keep “link sent” separate from “you’re in.” End with one thing I can check in the draft myself.

Read the screens in order

Open the reply and read the signup screen first, then the screen after the button. Keep the words that match how your app works. If Claude moved a field your app needs, ask it to put that field back before you use the draft.

Example

In the inventory app, I told Claude that email is the only field it needs and that the link opens Add your first item.

Claude might give me a button that says ‘Email me a signup link,’ followed by ‘Check your inbox.’ That gives me the words for both screens in the order I’ll use them.

Check the signup in three passes

Read the draft or tap through a working preview if you have one. Save the signup screen and its follow-up messages when these three checks pass.

  • Read the button. Does it tell you what happens after a tap?
  • Try a wrong entry. Can you see how to fix it without starting over?
  • Follow the success path. Does it end where the screen said it would?

Optional: Try five versions

If you want to see what changes when you rewrite the button or move a field, copy the first prompt here into the same chat. Compare the five drafts using the worksheet below. The other two prompts can help you pick a version and work through the screens after the button.

Show me five signup screens I can compare

Paste this with your screenshot to get five sketches and a table you can put straight into the worksheet.

Here’s the signup screen: [screenshot, HTML, or link]. The person using it wants to [goal]. The account needs [required fields or “I’m not sure yet”]. The next step today is [what happens]. Use [brand rules] if I attach them.

First, list each field and say which ones the account actually needs now, which can wait, and which need me to confirm. Keep anything tied to security, consent, or account creation until I confirm it can move.

Sketch five different versions, A–E, at phone width. Make each test a different idea, such as clearer button copy, fewer questions, or a better explanation of what happens after tapping. Show the exact labels, button text, and next screen for each. If you can show previews, put them side by side. Otherwise use text wireframes.

End with a table I can paste into my worksheet: version, what changed, field count, next step, and one thing to test. Wait for me to pick.

Help me pick one sketch to finish

Use this once you have the five sketches and know which fields your app actually needs.

Here are my signup sketches: [A–E or refer to the versions above]. These are the fields I confirmed my app needs now: [list].

Set aside versions that remove a required field or leave the next step unclear. For the rest, compare what I have to decide, what I have to type, and what the button tells me will happen next. Pick one to finish and name the tradeoff. Quote the button or line that makes the next step clearer. Suggest one thing I could remove or clarify without changing the signup result. End with a one-sentence reason I can put in my worksheet.

Write the screens after they tap

Paste this after picking a version so you get the actual messages and a route you can follow yourself.

Here’s the version I picked: [sketch and signup method]. After the main button, my app [sends an email link / creates an account / other]. My app can [supported recovery options].

Write the exact screen copy for the first view, invalid input, waiting, a failed request, and success. For each, give me the message, button or link, where keyboard focus should go, and what stays filled in. For email links, show the destination address and cover both a badly formatted address and a valid-looking address with a typo. Show how to edit the address or resend if my app supports it. Keep ‘link sent’ separate from ‘you’re in.’

End with a short walkthrough I can do on my own. Give me the input or action, the screen I should see, and what to fix if the route ends early. Make it usable from sketches, and flag any checks that need a working preview or the real app.

Optional signup comparison worksheet

Use this if you’re comparing five versions. Your answers stay on this page until you leave or reload it.

Start with the form you have
Compare Claude’s five sketches

For each sketch, count the fields and write down what you’d expect after a tap. If you have a preview, add what actually happens.

Walk through your chosen version

Troubleshooting

Claude removed a field I still need. What do I type?

Type: “Keep [field name] on the signup screen. The app needs it to [reason]. Add a short line under the label that tells people why we ask.”

The next screen just says ‘Check your inbox.’ What do I type?

Type: “Show the address where the link was sent. Give people a way to correct the address or resend if my app supports it. Tell them where the link will take them.”

Downloads

Further reading