Consumer Experience

When a consumer scans a product’s QR code or follows a Digital Product Passport link, they are presented with a branded, mobile-first page containing the product’s passport information. This page is the public face of the passport — it is what the end user interacts with.

Scan to Passport

The journey from scan to passport follows a simple flow:

  1. The consumer scans a QR code on the product packaging or label
  2. The scan URL is resolved to the correct product via the tieback resolver
  3. The consumer is redirected to the product’s public passport page
  4. The passport renders with the brand’s visual identity and the published content

The resolver handles GS1 Digital Link paths, fallback identifiers, and custom domains transparently. For details on how resolution works, see Resolver & GS1 Digital Link and Resolver Domain Flow.

What the Consumer Sees

The passport page presents the published content in a structured, readable layout:

  • Brand header — the brand’s logo, name, and visual identity
  • Product identity — product name, images, and key identifiers
  • Content blocks — structured sections covering materials, sustainability, compliance, care instructions, and other relevant product information
  • Passport footer — verification context and platform attribution

Content blocks are displayed in a defined order, grouped by category. Only blocks that contain published data are shown — empty or unpublished sections are omitted automatically.

Mobile-First Design

Passport pages are designed for mobile-first consumption, reflecting the reality that most scans happen on a smartphone:

  • responsive layout that adapts to screen size
  • touch-friendly navigation and interaction
  • optimised loading for mobile network conditions
  • readable typography and accessible contrast ratios

The passport page also renders correctly on tablet and desktop browsers.

Brand-Consistent Presentation

Each passport page is rendered using the brand’s configured visual identity:

  • Brand colours — primary and secondary colours are applied to the passport layout
  • Logo — the brand’s logo appears in the passport header
  • Domain — the passport is served on the brand’s own subdomain or verified custom domain, so the URL reinforces the brand identity

For more on custom domain configuration, see Custom Hostname Setup and DNS Setup Guide.

Unavailable States

Not every scan results in a fully rendered passport. The passport page handles several boundary conditions:

ConditionWhat the consumer sees
No published passportA branded page indicating that passport information is not yet available for this product
Product not foundA generic not-found response from the resolver
Identifier retiredThe resolver falls back to the most recent match — old printed codes continue to work

These states are handled gracefully so that the consumer always receives a coherent response, even when a passport has not yet been published or a product has been updated.

Page Metadata

Each passport page includes appropriate metadata for browser display and social sharing:

  • the browser tab title reflects the product and brand name
  • social sharing previews (Open Graph) are supported so that passport links render correctly when shared in messaging apps and social platforms

Current Consumer Scope

The live consumer experience currently includes:

  • viewing published passport content blocks
  • branded, mobile-first presentation
  • scan-based access via QR codes and Digital Link URLs
  • custom domain support

Some additional consumer-facing capabilities — such as reporting issues, claiming ownership, and digital wallet integration — are planned for future releases and are not part of the current live experience.