Client
Omnitech-K
Aperçu du Projet
Le visiteur arrive sur ce qui ressemble à un e-commerce classique : produits, panier, recherche, catégories. Très vite, le ton bascule : les reviews évoquent la dissolution de la personnalité, les warnings annoncent des effets irréversibles, et un agent de support corporate répond avec une politesse glaçante. L'humour satirique est omniprésent, et derrière, il y a un design system complet et un système de codes secrets avec plusieurs couches d'easter eggs pour les visiteurs curieux. Envie de tester tout de suite ? Ouvrez le site et essayez : - d'installer plus de 5 modules, - de trouver les codes ARG disséminés sur le site et tenter d'accéder aux produits prohibés, - le chat support en bas de page (en anglais, aucune IA utilisée), - d'accéder à la page system-status pour voir les stats communautaires.
Client
Omnitech-K
Industrie
Creative coding · E-commerce narratif
Service
Direction artistique & worldbuilding
Design UX/UI & système de composants
Création ARG & easter-eggs
Durée
3 mois de prototype
Le Défi
Trois questions concrètes structurent le projet : - Comment concevoir un site qui se révèle à plusieurs niveaux ? Un visiteur de passage doit profiter du site sans rien manquer d'essentiel. Un visiteur curieux doit trouver des choses cachées. Un visiteur obsessionnel doit pouvoir atteindre une couche encore plus profonde. Sans que les trois expériences se polluent. - Comment tenir un univers narratif sur 1 000+ produits et +30 articles sans devenir répétitif ? Cela demandait de définir plusieurs voix éditoriales distinctes (la division Compliance, l'archive historique, l'équipe Catalog, les citoyens anonymes…) et de les maintenir cohérentes sur l'ensemble. - Comment garder l'esthétique cyberpunk sans sacrifier l'accessibilité ? Le genre adore les contrastes faibles, les animations agressives, les glitchs permanents. Un audit a11y sérieux était une contrainte structurante dès le départ.
La Solution
Côté tech Quelques choix volontaires : - Pas de framework state-management lourd - Des composants de section réutilisables (timeline, prediction-table, glossary, warning-signs, ranked-list…) qui servent à tous les articles. C'est une sorte de mini-MDX maison, pensé pour rester rapide et accessible. - Une bibliothèque de hooks custom (useARG, useCart, useFocusTrap, etc.) Côté design - Un design system minimal mais strict : palette définie (néon, magenta, emerald, amber sur fond noir profond), typographie monospace pour les éléments "terminal", motion tokens (glitch, scanline) tous désactivables via prefers-reduced-motion. - Plutôt que des images produit, j'ai écrit un petit générateur d'ASCII art déterministe par SKU : chaque produit a un visuel unique généré côté client, dans le ton du site, sans coût d'asset. Côté écriture - 52 000 mots organisés en 5 clusters SEO long-tail. Chaque article à une voix éditoriale propre à son cluster. Côté ARG - Un système de 5 niveaux de clearance (NONE => AMBER => GREEN => BLACK => OMEGA) débloqué par 5 codes secrets disséminés dans le site. - Chaque code débloque du contenu réel : des produits cachés, des sections supplémentaires sur les pages produits, des couleurs différentes sur le dashboard.
Le Résultat
Ce qui fonctionne aujourd'hui : - 154 pages générées statiquement, performante sur Lighthouse - 30 articles éditoriaux cross-linkés en pillar/satellites - 5 codes ARG qui débloquent vraiment du contenu, avec une vraie progression - System status qui permet de voir ce que la communauté a découvert sur le site - Des effets visuels que vous ne verrez que sur ce site lors de l'installation des modules - Une nav mobile soignée - 95 tests sur les parties critiques
PORTFOLIO
ComposerDeck V2
ComposerDeck V2
ComposerDeck V2
Refonte UI/UX
Design system
Développement React
Optimisation SEO
Hwigs
Hwigs
Hwigs
Création de site Shopify
Conception de fiches produits sur-mesure
Intégration d'une plateforme de formation interne
Système de gestion de cours, quiz et certificats
Accompagnement technique