A tactile mystery brand needed an online store that preserved intrigue without obscuring purchase decisions.
Itz Confidential / Client workBrand × product × engineering
Buying the game should feel like
entering the case.
I owned the brand, experience, interaction design, and production build for a detective-game company—turning a conventional catalogue into an immersive narrative-commerce product.
Brand expression, product UX, interaction design, frontend, and launch.
Turn commerce navigation into a case-file investigation with progressively clearer information.
A responsive Next.js storefront, detective portal, event pages, metadata, and performance fallbacks.
One coherent world spanning discovery, purchase, play, submission, and events.
01 / The brief
The storefront opens like a case file.
Itz Confidential sells physical mystery games, but the real product begins before the box arrives. The website had to establish atmosphere, explain unfamiliar cases, support confident purchase decisions, and carry the fiction into post-purchase submissions and real-world events.
6Playable mystery cases in the live catalogue
3Connected journeys: discover, purchase, investigate
1Brand language across commerce and live events
02 / Narrative interaction
The brand is not decoration.
It is the navigation model.
Case cards behave like evidence pinned to an investigation board. A continuous red thread turns page movement into a visual relationship between clues, while typewritten summaries, stamps, tape, monochrome imagery, and paper dossiers make browsing feel native to the fictional world.
Enter in character
Visitors are addressed as detectives rather than customers.
Browse evidence
Cases appear as physical files positioned across an investigation board.
Reveal detail
Inspecting a case opens a focused dossier without breaking the scene.
03 / Commerce architecture
Atmosphere earns attention.
Structure earns the decision.
The experience gradually moves from intrigue to comparison. Each case exposes its premise, difficulty, player count, and price before the Suspect Lineup brings individual products and bundle offers into one purchase surface. The fiction stays intact, but the commercial information becomes increasingly explicit.
04 / Beyond purchase
The experience extends beyond the box.
The detective portal gives players a route to verify conclusions and submit an official assessment. A separate events experience translates the product into corporate get-togethers and live mystery formats, extending one identity across direct commerce, play, support, and event sales.
SolvePlayers investigate the physical evidence
SubmitThe detective portal receives their final theory
GatherEvents turn the format into a shared live experience
05 / Design engineering
A cinematic surface still needs
production discipline.
I built the experience as a typed Next.js product with responsive layouts, motion-aware interactions, dynamic loading for heavier commerce surfaces, mobile performance fallbacks, structured product data, generated social previews, and indexable case content.
Next.js + TypeScript
Reusable case data powers both the product interface and structured product metadata.
Framer Motion
Intro, dossier transitions, and narrative reveals reinforce the world without blocking core information.
Adaptive effects
The red-thread and texture system use throttling and mobile fallbacks to protect responsiveness.
SEO + social metadata
Sitemaps, robots directives, JSON-LD products, and generated Open Graph imagery support sharing and search.
06 / Outcome
One world across product,
commerce, and community.
The final experience makes the business feel like an investigation from the first impression through case selection, purchase, play, assessment, and events. According to the live brand story, Itz Confidential has delivered more than 5,000 case files and became the top-selling stall at Horror Con.
5,000+Case files delivered, reported by the brand
6Distinct mysteries presented through one system
#1Top-selling stall at Horror Con, reported by the brand
What I would improve next: bring checkout fully into the branded experience, instrument the case-to-purchase funnel, add structured testimonials near the decision point, and test whether visitors understand the physical product before the atmosphere asks them to explore.
Next case study
Naksha StudioA team inside the terminal.