Skip to main content

Touchpoint Design Guide

How Relying Parties and EAA Providers design the places where users start sharing or receiving credentials with the d-you Wallet: the d-you Wallet button, the modal that follows it, and QR codes at the point of sale and in print.

Introduction​

Touchpoints are the places where users start an interaction with their d-you Wallet. They cover two use cases:

  • Verification: A Relying Party requests credentials from the user's wallet.
  • Issuance: An EAA Provider issues a credential into the user's wallet.
TouchpointContextEntry point
OnlineWebsite or app of the Relying Party or EAA Providerd-you Wallet button, then a modal with a QR code
Point of sale (POS)A physical counter, for example at a post officeQR code shown on a screen by an employee
PrintPrinted media from EAA Providers, for example a letterPrinted QR code in a d-you Wallet frame

The flows and modal screens in this guide have been tested with users and designed for accessibility. Following them gives users the same experience across every service that uses the d-you Wallet, so they recognize the flow and complete it with confidence. We recommend using the flows and modal screens as described here.

Button and logo assets are available under Downloads.

Best Practices​

  • Place the button where the user makes the decision. Show it on the page where the user logs in, verifies their identity or receives a credential. Don't hide it in menus or secondary pages.
  • Give it equal or greater prominence than comparable options. If you offer other identification or login methods, the d-you Wallet button is at least the same size and in a comparable position.
  • Start the flow only after the user selects the button. Don't open the modal or trigger a wallet request automatically.
  • Use the button type that matches the action. Users should know from the label whether they share data or receive a credential.
  • Explain why you request data. Tell users, next to the button, what information you request and why you need it.
  • Own the process. The wallet interaction is driven by a technical protocol, and some failure points sit on your side of it. Handle them in your service and tell users what comes next.

Button​

Button Types​

Each button type has a fixed label. Use the type that describes what happens when the user selects it.

Use caseLabel (DE)Label (EN)Use when
VerificationVerifizieren mit d-you WalletVerify with d-you WalletThe user proves information about themselves, for example their age or address, as part of a process on your website.
IssuanceHinzufügen zu d-you WalletAdd to d-you WalletThe user receives a credential from you, for example a membership card or a ticket, and stores it in their wallet.

Four d-you Wallet buttons in two groups. Left, the German buttons: "Verifizieren mit d-you Wallet" and "Hinzufügen zu d-you Wallet". Right, the English buttons: "Verify with d-you Wallet" and "Add to d-you Wallet". All four buttons look the same: a black pill shape with the d-you Wallet symbol on the left, then a vertical bar in black, red and gold, then the label on two lines. The action is on the first line in regular weight, and "d-you Wallet" is in bold on the second line.

The two button types in German (left) and English (right).

Anatomy​

The button consists of the following elements. All elements are fixed and appear in every button type.

Annotated "Verifizieren mit d-you Wallet" button. Labels with dotted lines point to each element. Top left: "brand logo" points to the d-you Wallet symbol on the left of the button. Next to it: "german flag, trust anchor" points to the vertical bar in black, red and gold. Right: "action" points to the first line of the label, "Verifizieren mit", and "brand name" points to the second line, "d-you Wallet". Bottom left: "rounded corners" points to the rounded end of the button. Bottom: "solid black as primary backdrop color, grey as outline" points to the button's black fill and grey outline.

The elements of the d-you Wallet button.

#ElementDescription
1ShapePill with fully rounded ends
2Brand logod-you Wallet logo on the left
3Trust anchorVertical bar in black, red and gold
4ActionFirst line of the label, in regular weight, for example "Verifizieren mit"
5Brand name"d-you Wallet" in bold, on the second line
6Fill and outlineDark fill with a light outline

The button has one layout: the two-line pill described above. There is no single-line, compact or logo-only version.

Appearance​

The button comes in one variant, dark, and works on both dark and light backgrounds. On dark backgrounds, the light outline separates the button from the background.

Size​

You can scale the button to fit your layout. Scale it proportionally only, without changing its aspect ratio, and make sure the label stays legible.

Do's and Don'ts​

DoDon't
Use the unmodified asset from the download packageRecreate, restyle or recolor the button, or change its label, logo, trust anchor or shape
Keep free space around the buttonPlace text, icons or other buttons directly against the button
Use the label that matches the use caseUse "Verifizieren mit" for issuance, or "Hinzufügen zu" for verification
Scale the button proportionallyStretch, crop, flip or rotate the button
Use the complete button with logo and labelUse the logo alone as a button
Show the button as a static elementAnimate the button or add effects such as shadows, glows or reflections
Place the button next to your contentCombine the button with your own logo into a single graphic

Online Flow​

This section describes the recommended flow for touchpoints on the websites and apps of Relying Parties and EAA Providers.

Overview​

  1. The user taps the d-you Wallet button on your website.
  2. The modal opens.
  3. The user chooses one of two actions:
    • Select the d-you Wallet button in the modal, or
    • Scan the QR code with another device.
  4. The d-you Wallet app opens.
  5. The modal shows the Loading state and then the Success state.

Entry​

The user selects the d-you Wallet button on your website or app. The modal opens on top of the current page.

Device Behavior​

The flow is the same on all devices. The QR code and the d-you Wallet button in the modal are always both available, so the user decides which device to continue on.

ActionResult
Select the d-you Wallet button in the modalOpens the d-you Wallet app on this device
Scan the QR code with another deviceOpens the d-you Wallet app on the scanning device

Once the user continues in the wallet app, via the QR code or the button, the modal changes to the Loading state. When the user completes the steps in the wallet, the modal shows the Success state.

Users need the d-you Wallet app to complete the flow. If the app isn't installed on the device, the flow can't continue. Tell users before they start that they need the d-you Wallet app, and offer another way to complete your process.

Verification Flow​

Verification flow from left to right. 1: Initial button "Verifizieren mit d-you Wallet". An arrow leads to 2: Initial overlay with the heading "Jetzt verifizieren", the text "Du nutzt die d-you Wallet auf einem anderen Gerät? Dann scanne diesen QR-Code.", a QR code, the divider "oder", the text "Du nutzt die d-you Wallet auf diesem Gerät?", the button "Verifizieren mit d-you Wallet" and the link "Was ist die d-you Wallet?". From here, the flow splits into two paths. Upper path, if the QR code is scanned with another device: 3: Loading overlay with the heading "Weiter in der d-you Wallet", the text "Folge dort den angezeigten Schritten." and a loading spinner. 4: Success overlay with the heading "Verifizierung erfolgreich!", the text "Du wirst automatisch zurückgeleitet." and a green check icon. Lower path, if the user selects the button in the overlay: the d-you Wallet app opens on the same device.

Verification flow: cross-device via QR code (top) and same device via the button (bottom).

  1. The user selects Verifizieren mit d-you Wallet on your website.
  2. The modal opens with the heading Jetzt verifizieren, a QR code and the same button.
  3. The user continues on one of two paths:
    • Cross-device: The user scans the QR code with another device. The modal shows Weiter in der d-you Wallet, then Verifizierung erfolgreich! once the user completes the steps in the wallet.
    • Same device: The user selects the button in the modal, and the d-you Wallet app opens on this device.

Issuance Flow​

Issuance uses the same modal as verification. Only the heading, the success text and the button type differ.

Issuance flow from left to right. 1: Initial button "Hinzufügen zu d-you Wallet". An arrow leads to 2: Initial overlay with the heading "Jetzt Nachweis hinzufügen", the text "Du nutzt die d-you Wallet auf einem anderen Gerät? Dann scanne diesen QR-Code.", a QR code, the divider "oder", the text "Du nutzt die d-you Wallet auf diesem Gerät?", the button "Hinzufügen zu d-you Wallet" and the link "Was ist die d-you Wallet?". From here, the flow splits into two paths. Upper path, if the QR code is scanned with another device: 3: Loading overlay with the heading "Weiter in der d-you Wallet", the text "Folge dort den angezeigten Schritten." and a loading spinner. 4: Success overlay with the heading "Nachweis erfolgreich hinzugefügt!", the text "Du wirst automatisch zurückgeleitet." and a green check icon. Lower path, if the user selects the button in the overlay: the d-you Wallet app opens on the same device.

Issuance flow: cross-device via QR code (top) and same device via the button (bottom).

  1. The user selects Hinzufügen zu d-you Wallet on your website.
  2. The modal opens with the heading Jetzt Nachweis hinzufügen, a QR code and the same button.
  3. The user continues on one of two paths:
    • Cross-device: The user scans the QR code with another device. The modal shows Weiter in der d-you Wallet, then Nachweis erfolgreich hinzugefügt! once the user completes the steps in the wallet.
    • Same device: The user selects the button in the modal, and the d-you Wallet app opens on this device.

Relying Parties and EAA Providers build the modal themselves. We recommend following this specification, since it reflects the user-tested and accessible version of the flow. On mobile, the modal fills the screen and uses the same elements and texts as on desktop.

Anatomy​

Verification modal with spacing measurements in pixels. The modal is 500 wide and 651 high, with an inner padding of 16 on the left and right. The close icon sits 12 from the top edge and 16 from the right edge. Vertical spacing from top to bottom: 16 between the heading "Jetzt verifizieren" and the text above the QR code, 16 between that text and the QR code, 250 for the QR code on its white background, 24 between the QR code and the divider "oder", 24 between the divider and the text "Du nutzt die d-you Wallet auf diesem Gerät?", 16 between that text and the button, 54 for the height of the button "Verifizieren mit d-you Wallet", 24 between the button and the link "Was ist die d-you Wallet?", and 24 between the link and the bottom edge of the modal.

Modal anatomy with spacing in pixels.

From top to bottom:

#ElementVerification (DE / EN)Issuance (DE / EN)Notes
1Close✕ icon✕ iconTop right corner. Closes the modal and cancels the flow.
2HeadingJetzt verifizieren
Verify now		Jetzt Nachweis hinzufügen
Add credential now
3Other-device textDu nutzt die d-you Wallet auf einem anderen Gerät? Dann scanne diesen QR-Code.
Using the d-you Wallet on another device? Then scan this QR code.		Du nutzt die d-you Wallet auf einem anderen Gerät? Dann scanne diesen QR-Code.
Using the d-you Wallet on another device? Then scan this QR code.
4QR codeQR codeQR codeOn a white background with rounded corners. Recommendation is to add a QR code accessible alternative.
5Divideroder
or		oder
or		Horizontal lines with the text in the middle
6This-device textDu nutzt die d-you Wallet auf diesem Gerät?
Using the d-you Wallet on this device?		Du nutzt die d-you Wallet auf diesem Gerät?
Using the d-you Wallet on this device?
7d-you Wallet buttonVerifizieren mit d-you Wallet
Verify with d-you Wallet		Hinzufügen zu d-you Wallet
Add to d-you Wallet		Same button type that opened the modal. Opens the wallet on this device.
8Info linkWas ist die d-you Wallet?
What is the d-you Wallet?		Was ist die d-you Wallet?
What is the d-you Wallet?		Opens the d-you Wallet website
9Background color#E8E8E8
10FontInter (SIL OFL 1.1)

States​

After the user scans the QR code, the modal replaces its content with the Loading state, then the Success state. If the user selects the d-you Wallet button instead, the wallet app opens on the same device.

StateShown whenElementVerification (DE / EN)Issuance (DE / EN)
DefaultThe modal opensSee Anatomy
LoadingThe QR code was scanned and the user continues in the wallet appHeadingWeiter in der d-you Wallet
Continue in the d-you Wallet		Weiter in der d-you Wallet
Continue in the d-you Wallet
TextFolge dort den angezeigten Schritten.
Follow the steps shown there.		Folge dort den angezeigten Schritten.
Follow the steps shown there.
SuccessThe user completed the steps in the wallet appHeadingVerifizierung erfolgreich!
Verification successful!		Nachweis erfolgreich hinzugefügt!
Credential added successfully!
TextDu wirst automatisch zurückgeleitet.
You will be redirected automatically.		Du wirst automatisch zurückgeleitet.
You will be redirected automatically.

POS and Print​

Outside your website or app, users start the flow by scanning a QR code, either on a screen at a point of sale or on printed media. Both use the same d-you Wallet QR code frame.

QR Code Frame​

QR code frame with spacing measurements in pixels. A white frame with rounded corners contains a QR code at the top and the branding "Hinzufügen zu d-you Wallet" below it. The branding consists of the d-you Wallet symbol, the vertical bar in black, red and gold, and the two-line label. The QR code sits 8 from the top edge and 8 from the left edge of the frame. The space between the QR code and the branding is 16, and the space between the branding and the bottom edge of the frame is 12.

QR code frame with spacing in pixels.

Anatomy​

From top to bottom:

  1. Frame: White background with rounded corners
  2. QR code: Centered in the upper part of the frame, 8px from the top and side edges
  3. Branding: d-you Wallet logo, trust anchor and two-line label, 16px below the QR code and 12px above the bottom edge. Available under Downloads.

Label​

As with the button, the label matches the use case: Verifizieren mit d-you Wallet (Verify with d-you Wallet) for verification, Hinzufügen zu d-you Wallet (Add to d-you Wallet) for issuance.

Two QR code frames side by side. Both have a white background with rounded corners, a QR code at the top and the branding below it: the d-you Wallet symbol, the vertical bar in black, red and gold, and a two-line label. The left frame reads "Verifizieren mit d-you Wallet", the right frame reads "Hinzufügen zu d-you Wallet".

QR code frames for verification (left) and issuance (right).

Variants​

VariantUsed forAppearance
On screenPOSWhite frame, as described above
PrintPrinted QR codes from EAA ProvidersWhite frame with a 2px solid black outline on the outside, for placement on white backgrounds

Do's and Don'ts​

DoDon't
Always show the QR code inside the d-you Wallet frameShow the QR code without the frame
Keep the original colors and proportions of the frameChange the colors or proportions of the frame
Keep the frame free of other contentAdd your own logo or other elements inside the frame

POS​

POS touchpoints are used at a physical counter, for example at a post office. An employee shows a QR code on a screen, and the user scans it to share credentials from their d-you Wallet.

Left: a POS screen, for example a tablet at a counter, with the heading "Daten bestätigen", the text "Scanne den Code mit deiner d-you Wallet App." and a QR code in the d-you Wallet frame labeled "Verifizieren mit d-you Wallet". At the bottom of the screen are a back button and two other buttons. Right: four QR code frames in two rows. Top row in German: "Verifizieren mit d-you Wallet" and "Hinzufügen zu d-you Wallet". Bottom row in English: "Verify with d-you Wallet" and "Add to d-you Wallet".

Example of a POS screen (left) and the QR code frames in German and English (right).

Display​

Always show the QR code on a screen, in the on-screen variant of the QR code frame. The type of screen is up to you, as long as the user can see and scan the code.

Flow​

  1. The employee starts the request in their system.
  2. A QR code appears on the screen.
  3. The user scans the QR code with their phone.
  4. The user reviews the request in the d-you Wallet and confirms.
  5. The employee's system shows the result.

Print​

EAA Providers can print the QR code, for example in a letter, as an additional way for users to add a credential to their d-you Wallet. Where you use it is up to you. Use the print variant of the QR code frame, with its 2px black outline, when printing on white.

Left: example letter from a fictional company "FIRMA" with the subject "Ihre digitale FIRMA Mitgliedskarte". Next to the letter text is a QR code in the d-you Wallet frame with a thin black outline, labeled "Hinzufügen zu d-you Wallet". Right: two QR code frames for print. The left one reads "Add to d-you Wallet", the right one "Hinzufügen zu d-you Wallet".

Example of a printed QR code in a letter (left) and the QR code frames for print in English and German (right).

Accessibility​

The following points are specific to touchpoints. For the legal framework and general requirements, see the Accessibility Design Guidelines.

Button​

  • Give the button an accessible name that matches its visible label, for example "Verifizieren mit d-you Wallet".
  • Make sure the button is reachable and operable with the keyboard.
  • Move focus into the modal when it opens, and return it to the button when it closes.
  • Keep focus inside the modal while it's open.
  • Let users close the modal with the Escape key.
  • Announce state changes (Loading, Success) to screen readers.
  • Provide an accessible alternative to the QR code, since not every user can scan it.

Downloads​

Download the d-you Wallet asset package (ZIP, 364 KB)

The package contains every button type and QR code frame label, in German and English:

FolderContentsUse for
svg/button, png/buttonThe d-you Wallet button, in the Verify and Add typesOnline touchpoints, see Button
svg/lockup, png/lockupThe d-you Wallet branding for the QR code frame, in the Verify and Add typesPOS and print, see QR Code Frame

Use SVG where your platform supports it, since it scales without losing sharpness. PNGs come in 1x, 2x and 3x resolutions for high-density screens.