Digital Product Passports

A two-sided SaaS platform that helps skincare brands publish trusted product information, and gives shoppers a clearer way to understand what they scan.

Role

Lead Product Designer

Client

Product ID · Skincare brands

Industry

B2B SaaS · Retail · DPP

I led product design for a Digital Product Passport platform, a brand-facing workspace connected to a consumer passport opened from a QR code. I reframed it from a compliance document into a configurable publishing system: a stable informational foundation for shoppers, and modular value for brands.

Ran discovery on both sides: dogfooding real skincare decisions, plus user, brand and retailer interviews.
Synthesis reframed it from a compliance document into a configurable publishing system, stable for shoppers, modular for brands.
Chose a modular passport + AI assistant model and productized repeated client work into reusable templates and a block library.
Designed activation around a real outcome, publish the first product and get a QR, from scratch or from sample data.
Shipped a two-sided MVP end to end: workspace, catalog operations, publishing, QR and the consumer passport.

Turning repeated client work into a product

Before the self-service console existed, we designed and assembled product pages for individual clients.

Choosing a customer-facing product page template

A library of modular content blocks

Beyond standard product information, brands kept asking for the same kinds of storytelling, trust and commerce moments.

Standard interactive label passport — Standard interactive label: description, ingredients, warnings, usage and how to store.

Authenticity check block — Authenticity: a verified check and expiry, so shoppers trust what they scan.

Brand storytelling: hero imagery and the brand's history above the essentials.

Sustainability block — Sustainability: materials, disposal guidance and recycling labels.

A two-sided system built around one product record

The product record became the bridge between operational data and the consumer experience.

Designing the first session around a real outcome

The activation goal wasn't "finish onboarding. " It was "publish the first product and receive a usable QR code.

Onboarding welcome screen — 1 · Welcome: profile the workspace as brand, multi-brand or retailer.

Onboarding company name step — 2 · Company name.

Onboarding category step — 3 · What the company makes, tailoring defaults.

Onboarding category refinement step — 4 · Refining the category so terminology and defaults fit.

Onboarding completion screen with Studio trial ready and dashboard next — 5 · Trial ready: dashboard access after setup.

Path 1: create the first product

The main screen made the two activation paths explicit: create a real product from scratch, or explore the platform with sample data.

Set up first product or explore sample data — The branch point: add your first product from scratch, or explore with sample data.

Add first product form — From scratch: add the first product with only what's needed to publish.

Live passport preview — A live preview of the customer-facing passport.

Path 2: explore with sample data

The second path let teams inspect a populated workspace before committing their own catalog.

Sample data option — Or start from sample data to inspect a populated catalog first.

Sample product detail — A ready-made sample product shows the end result before real setup.

Scaling from one product to a working catalog

After activation, the design shifts from guided creation to operational efficiency. The product library becomes the control surface for finding, comparing and changing passport states across a catalog.