For the complete documentation index, see llms.txt. This page is also available as Markdown.

Part 2. Design user journeys

Now it’s time to think about the story that you want your prototype to tell and the user journeys you want to show.

The three journeys

Most credential prototypes will the same three key journeys:

  • Receive. The holder gets issued a credential into their wallet.

  • Store. The holder can see their wallet and what they have in it.

  • Present. The holder proves to a verifier that they have the information.

The screens

Thinking about those journey we can settle on these 3 main screens:

  • Onboarding, where the employee creates a wallet and their badge arrives in it.

  • Wallet, used by the employee. Unlock with the passkey, see the badge.

  • Verification, the event registration page, which hands off to the wallet for consent and receives the result.

There is no issuer screen. The employee triggers onboarding and issuance happens in the background, which is how this works in production too, where the employer's HR system calls the API rather than someone filling in a form.

Example prompt

These are the placeholder values that you will change to match your use case.

Placeholder
Employee badge example

{{ISSUER}}

Quotient, an employer

{{HOLDER}}

a new employee

{{CREDENTIAL}}

employee badge

{{CREDENTIAL_FIELDS}}

employer name, employee ID, full name, role, employment status, valid from, valid until

{{ONBOARDING_TRIGGER}}

an email from HR on the employee's first day

{{VERIFIER}}

Event Platform, an online event platform

{{VERIFIER_SURFACE}}

event registration page

{{VERIFIER_GOAL}}

enter a members-only event

{{DISCLOSED_FIELDS}}

employer name, employment status

{{WITHHELD_FIELDS}}

full name, employee ID, role

{{SAMPLE_DATA_REGION}}

UK company and personal names

prompt for the design

Handing over for implementation

Hand over directly from Claude Design to Claude Code. That is the shortest path and there is nothing to move between tools.

If you are designing somewhere else, export the prototype as HTML and put it in the project directory instead. Either way, the prompts in Part 3 assume the design is readable in the working directory, and that it is treated as a visual reference rather than a starting codebase.

Last updated

Was this helpful?