Loading project case study
All work

Docebo / 2026

Elemental Prototype Playground

Designed and built a shared discovery system that helps designers, product managers, and engineers turn customer evidence into aligned decisions and realistic product directions faster.

Visit live app Read the case study

Organizational Value

Teams decide together
Shared Decisions
Prototypes match the product
System-Aligned
Research remains reusable
Reusable Learning

01 / Overview

A design-engineering system

I designed and built the Elemental Prototype Playground as a shared product-discovery and design-engineering capability for Docebo, not simply a gallery of demos.

It gives the design organization a repeatable way to turn customer evidence into realistic, reviewable experiences, while giving product and engineering a common artifact for deciding what to build and why.

  • Agentic Build
  • Prototype Planning
  • Design Systems
  • Docebo

Challenge

Why prototypes needed a workflow

Fast AI prototyping can create convincing screens without creating confidence.

Research context gets separated from the work, alternatives disappear once a direction is coded, and one-off implementations drift from the product's components, accessibility expectations, and interaction language. The organization needed the speed of AI-assisted building without sacrificing the evidence, judgment, and product fidelity required for a useful decision.

Approach

From evidence to a build-ready direction

I separated planning from building and connected them through one artifact-backed workflow.

A plan can begin with a guided interview or source material, then makes the reasoning visible across an outcome, opportunities, problems, solutions, and experiments. Selected ideas advance through Brief, Low fidelity, and Medium fidelity; each stage preserves lineage, assumptions, risks, and the decisions still open. Only an explicitly selected medium-fidelity direction becomes a candidate for a separately confirmed build.

04 / Solution

What I built

The homepage makes product explorations discoverable through search, filters, status, and recent activity. Inspecting a prototype shows why it exists, with the outcome, pain points, and opportunities pulled from its linked plan, so nobody reviews a screen without its reasoning. A dedicated Planning area makes work in progress and build-ready directions visible, and inside each workspace a spatial canvas supports opportunity mapping, branching low-fidelity directions, interactive medium-fidelity comparisons, and a clear prototype choice. Every prototype also gets a Prototype Map: each route and state rendered as a live card, with the links between them traced from the real pages and snapshots taken at deploy time. Reviewers can drop comments on any screen, in the map or inside the prototype itself, so critique stays attached to the exact page it is about. A Patterns library turns the pieces teams keep rebuilding, such as the page shell, agent chat prompt, and agent hero, into shared components with live previews, usage guidance, and a ready-to-paste Claude Code prompt, so the next prototype reuses them instead of recreating them.

01 / 05

Every prototype carries its reasoning

Inspecting a prototype shows the outcome, pain points, and opportunities from its linked plan, next to Launch and Open map.

02 / 05

The whole flow on one canvas

The Prototype Map renders every route and state as a live card and traces the links between them from the real pages.

03 / 05

Feedback pinned to the screen

Comment mode, in the map or inside the prototype, keeps each piece of feedback attached to the exact screen it is about.

04 / 05

Patterns teams stop rebuilding

18 shared building blocks, each showing how many prototypes already use it and how many variants it ships.

05 / 05

From pattern to prototype in one prompt

Each pattern has a live preview, guidance on when to use it, and a Claude Code prompt that reuses the shared component.

5 more screens

The rest of the product

Planning in the open

Plans in progress and ready to prototype sit in one place. A new plan starts from a guided interview or existing research.

Evidence before ideas

The Brief maps one outcome to the opportunities and problems behind it, each marked as evidence or inference.

Alternatives side by side

Medium-fidelity directions run side by side, and only the one explicitly selected moves on to a confirmed build.

Grounded in Elemental

The component catalog is generated from Elemental itself, so prototypes build on Docebo's real components.

References for the next idea

An Inspiration library of product references, searchable and filtered by platform.

05 / Impact

What changed

Designers can move from research to critique to working interaction without losing the reasoning between stages.

Product managers and engineers can respond to realistic, system-aligned concepts instead of interpreting abstract handoffs, and review a whole flow on one map instead of clicking through it screen by screen. The Playground now holds 19 prototypes from designers and product managers across the organization, built on 18 shared patterns. For Docebo, it is a repeatable discovery capability that shortens alignment cycles and keeps evidence, alternatives, feedback, and decisions available for future work.

06 / Key learnings

What I learned

A prototype becomes more valuable when the system around it preserves the thinking that produced it.

The biggest improvement was not another fidelity layer; it was making evidence, alternatives, selection, and handoff visible as one continuous workflow. AI accelerates the mechanics of exploration and implementation, while explicit stages and real Elemental components keep product judgment, craft, and accountability in the loop.

PreviousAI Agents & Assistant View all projects