Collections are campaigns, not inventory
A collection controls storytelling and launch presentation; a product controls what can be purchased. Keeping them separate avoids duplicated commercial data.
Loading portfolio
Product and backend / Current
Kilo's Kubicle
The label needed a commerce experience for rotating artist capsules, merchandise, accessories, collectibles, and physical media without becoming a generic product grid. It also needed separation between campaign presentation, sellable products, navigation, inventory state, and media assets.
I designed the storefront and signature collection interaction, then engineered the public site and CMS workflows that operate it. Collections, products, categories, and storage folders remain separate: campaigns control presentation, products control sellable data, categories control discovery, and folders control asset organisation.
- Role
- Product designer / Full-stack engineer
- For
- DZND LTD
- Stage
- Live in production
Walkthrough
Watch it run
Captured from the live storefront at kiloskubicle.com: the capsule deck I designed, the storefront and the four models behind it.
My part
What I built
- Designed the storefront architecture, collection mechanic, product presentation, navigation, responsive behaviour, and parent-label relationship.
- Built CMS workflows for products, collections, categories, media, display order, campaign status, pricing, availability, and settings.
- Implemented product and collection relationships that support changing campaign presentations without duplicated product data.
- Created media controls for focal point, pan, zoom, rotation, fit, cover order, and preview state.
- Developed touch-safe and reduced-interaction behaviour for a pointer-led collection experience.
- Handled standalone-domain routing, canonical metadata, branded sharing assets, and shared administration.
Decisions
The choices that shaped it
The signature interaction has a conventional foundation
The animated presentation enhances discovery, but category and product relationships remain explicit for touch, reduced-motion, and fallback experiences.
Presentation does not rewrite source assets
Focal position and transforms are reversible metadata, allowing one approved image to serve multiple contexts while retaining the original.
Public emptiness is a designed state
Publication conditions prevent half-populated social, collection, or category modules from appearing unfinished.
What has been shown to work
- Validated collection, category, product, and media changes from CMS input through storefront rendering.
- Tested pointer, touch, narrow-screen, and reduced-interaction behaviour.
- Reviewed visibility, sale pause, provisional pricing, stock, empty-category, and coming-soon states.
- Verified standalone-domain routing, metadata, social images, and shared admin access.
- Tested media selection, transforms, preview, unlink, reorder, and protected deletion.
- Ran type checking, linting, production builds, and strict preflight checks.
Phone screens
At phone size
Technical detailOpen the system view
SYSTEM ARCHITECTURE
Kilo's Kubicle system view
I designed the storefront and signature collection interaction, then engineered the public site and CMS workflows that operate it. Collections, products, categories, and storage folders remain separate: campaigns control presentation, products control sellable data, categories control discovery, and folders control asset organisation.The storefront has its own domain and metadata while sharing the label's database, media, users, analytics, and administration.
Collections model campaign presentation; products model sellable data; categories model navigation; folders model physical media location.
CMS records drive composition so launches can be reordered, paused, revealed, or moved without rewriting the storefront.
Media transforms are reversible metadata, preserving original assets for future campaigns.
The collection interaction progressively enhances a clear navigation model and falls back to touch-safe states.
- 01Input / actorconnects toInterface
- 02Interfaceconnects toCore service
- 03Core serviceconnects toOperational boundary
- 04Operational boundaryconnects toState / outcome
Security and privacy
- Payment and order operations remain behind server and administrative boundaries.
- Administrative changes are permission-checked and audit-oriented.
- Permanent media deletion is distinguished from non-destructive unlinking and curation.
- Credentials, customer records, unpublished products, commercial terms, and storage configuration are not exposed.
Built with
Links
More work
eventOSA live ticketing and event operations platform covering public discovery, ticket sales, organiser tools, payouts, offline door scanning and a headless API that other websites use to sell tickets.Live in productionXcroTrustEngineered a four-surface escrow product across public web, consumer mobile, backend services, and operational administration, implementing a supplied design while keeping transaction outcomes and intervention paths server-controlled.Pre-launchNutrifluxA Nigerian-first nutrition mobile app and API combining deterministic health state, structured AI planning, offline-resilient writes, social features, reminders, observability and review-gated safety controls.Pre-launch