Personal Projects / 2026
Docebo Concept Gallery
Designed and built a gallery that turns research briefs and opportunity maps into connected, interactive Docebo concept prototypes.
Design Highlights
Overview
Prototype Playground is a personal design-engineering workspace for turning research signals, design briefs, opportunity solution trees, and AI-assisted coding sessions into browsable interactive prototypes. It functions as a living gallery of product concepts: each prototype has metadata, fidelity, archetype, rationale, tags, related variants, and a routed preview shell. The current gallery includes Docebo learning, admin, creator, skill-management, and AgentHub explorations.
Challenge
Design strategy work often gets trapped in documents, static mockups, or one-off prototypes that are hard to compare, revisit, or reuse. AI-assisted prototyping increases output speed, but without a shared gallery and metadata model the work can become disposable. I needed a lightweight system that could preserve design intent, show progression from lo-fi to hi-fi, and make prototypes useful as a portfolio, critique, and stakeholder-alignment artifact.
Approach
Built the playground as a Vite and React single-page application with a structured prototype registry. Each prototype ships as a self-contained route with its own data, metadata, and fidelity label, while the gallery provides sorting, thumbnails, related prototype families, and detail context. The workflow starts from research and opportunity framing, then uses AI coding agents to rapidly produce interaction models using shared components, realistic domain content, and documented design rationale.
Solution
The system includes a gallery home page, routed prototype shell, metadata-driven cards, related prototype navigation, and a growing set of Docebo concept prototypes. The prototypes demonstrate learner orientation, creator studio workflows, admin Mission Control, skill-management manager actions, and an AgentHub supervision layer. Screenshots from the gallery and prototypes are used directly as portfolio thumbnails and design highlights so the project can present both the system and the work it contains.
Impact
Created a repeatable path from design research to interactive artifacts instead of static deliverables. The playground makes it easier to compare concepts, preserve rationale, and show how AI-assisted design engineering can produce credible product explorations quickly. It also demonstrates a practical leadership workflow: use research briefs to frame opportunities, use prototypes to pressure-test interaction models, and use a gallery to make the work durable and shareable.
Key Learnings
AI prototyping is strongest when it is constrained by real product context, realistic content, and a reusable component system. A prototype gallery is more valuable than isolated demos because it captures progression, rationale, and relationships between variants. The biggest design challenge is not making AI generate UI quickly — it is building enough structure around the work that teams can critique it, learn from it, and decide what to do next.