> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://tieback.io/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://tieback.io/docs/_mcp/server.

# Consumer Experience

> What consumers see when they scan a product: a branded, mobile-first Digital Product Passport with localised content, guidance, and disclaimers.

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 **tie*back*** resolver
3. The consumer is redirected to the product's public passport page
4. The passport renders with the brand's visual identity, the published content, and any linked market-specific localisation

The resolver handles GS1 Digital Link paths, fallback identifiers, and custom domains transparently. For details on how resolution works, see [Resolver & GS1 Digital Link](/product-module/resolver-gs-1-digital-link) and [Resolver Domain Flow](/domains-custom-hostnames/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
* **Market-specific content**: recycling guidance, disclaimers, and supplementary information tailored to the consumer's market, when a Market Pack is linked
* **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.

## Localised Passport Rendering

When a passport has a linked Market Pack, the consumer experience is enhanced with market-specific content:

* **Recycling guidance**: clear, actionable instructions for the target market's waste management systems, covering the product and up to 14 material categories
* **Disclaimers**: region-specific legal and compliance notices
* **Locale formatting**: dates, numbers, and measurements rendered according to the market's conventions
* **Language**: content presented in the consumer's preferred language, when translations are available

The localised content is additive: it supplements the base passport content without replacing it. The consumer sees a unified experience that combines the brand's core product information with the relevant market-specific context.

See [Localisations Overview](/localisations/overview) for details on how Market Packs and multilingual content work.

## 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
* **Theme**: the passport uses the brand's selected curated theme for layout, typography, and visual styling
* **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](/domains-custom-hostnames/custom-hostname-setup) and [DNS Setup Guide](/domains-custom-hostnames/dns-setup-guide).

## Unavailable States

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

| Condition                 | What the consumer sees                                                                    |
| ------------------------- | ----------------------------------------------------------------------------------------- |
| **No published passport** | A branded page indicating that passport information is not yet available for this product |
| **Product not found**     | A generic not-found response from the resolver                                            |
| **Identifier retired**    | The resolver falls back to the most recent match, so 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

## Related Docs

* [Resolver & GS1 Digital Link](/product-module/resolver-gs-1-digital-link)
* [Resolver Domain Flow](/domains-custom-hostnames/resolver-domain-flow)
* [Localisations Overview](/localisations/overview)
* [Market Packs](/localisations/market-packs)
* [Custom Hostname Setup](/domains-custom-hostnames/custom-hostname-setup)
* [Domain Architecture](/domains-custom-hostnames/domain-architecture)
* [Passports Overview](/passports/overview)
* [Publication Lifecycle](/passports/publication-lifecycle)
* [Brand Setup & Readiness](/passports/brand-setup-readiness)
* [Product Safety and Recall Overview](/product-safety-and-recall/overview)
* [Recall Consumer Experience](/product-safety-and-recall/consumer-experience)