Leafbay
Direction artistique, UX/UI Design, Modélisation 3D, Développement WordPress
Janvier 2024 → Mars 2024 (3 mois)
Projet réalisé en équipe de 4 étudiants BUT MMI
Comment transposer l'identité visuelle et l'expérience « cosy » d'un univers vidéoludique (Animal Crossing) dans une plateforme e-commerce fonctionnelle, tout en garantissant une expérience utilisateur (UX) fluide et performante ?
Comment transposer l'identité visuelle et l'expérience « cosy » d'un univers vidéoludique (Animal Crossing) dans une plateforme e-commerce fonctionnelle, tout en garantissant une expérience utilisateur (UX) fluide et performante ?
Problématique centrale
Le Contexte & Le Défi
Le projet Leafbay est né d'une volonté d'interdisciplinarité : allier la modélisation 3D, le développement web et la stratégie marketing.
- Le Défi : Maintenir l'équilibre entre un design très marqué (codes visuels du jeu) et les standards de navigabilité d'une boutique en ligne moderne.
- Ma Mission : Concevoir l'identité, modéliser les produits emblématiques en 3D et développer une interface WordPress sur mesure.
- Projet interdisciplinaire : design, développement, audiovisuel
- Univers de référence : Animal Crossing: New Horizons
Stratégie UI/UX : L'ADN « Animal Crossing »
Pour répondre à la problématique de l'immersion, la direction artistique a été le premier levier.
- Typographie & Couleurs : Utilisation des polices FinkHeavy pour le caractère ludique et Nunito pour la lisibilité des textes longs.
- Interface Intuitive : Conception de wireframes et de maquettes respectant les mécaniques du jeu tout en proposant un parcours d'achat classique (Panier, Recherche, Mon Compte).
- Wireframes basse fidélité → maquettes haute fidélité sur Figma
- Prototypage interactif et tests utilisateurs
Maquette haute fidélité de la plateforme
Solution Technique : Entre 3D et Développement Web
L'immersion passe par la qualité des visuels et la réactivité du site.
- Modélisation 3D (Blender) : Création d'objets iconiques comme la hache, le distributeur automatique (ATM) ou la Boutique de Tom Nook pour donner corps au catalogue.
- Développement sur mesure (WordPress & JS) : Création d'un thème enfant Astra pour une personnalisation totale sans perte de données.
- Intégration de scripts JavaScript pour une recherche en temps réel et un carrousel d'articles dynamique.
- Gestion du panier via le localStorage pour une expérience d'achat fluide.
Résultats & Analyse
Une plateforme complète : de la soumission d'un produit par l'utilisateur à sa mise en vente, le cycle e-commerce est respecté.
- Identité Cohérente : Le site Leafbay ne se contente pas de vendre des objets, il prolonge l'expérience du jeu dans un navigateur web.
- Compétences Validées : Maîtrise de la chaîne de production digitale — du wireframe Figma au déploiement sécurisé sur O2Switch.
- Site fonctionnel livré dans les délais
- Interface immersive validée par les utilisateurs tests
- Vidéo promotionnelle 3D entièrement réalisée de la conception à la post-production
Modèle 3D de la Boutique de Tom Nook — pièce maîtresse du catalogue Leafbay
ATM modélisé sur Blender — intégré dans l'univers e-commerce
La hache, outil emblématique d'Animal Crossing, modélisée en 3D
Élément décoratif 3D pour l'ambiance visuelle du site
Rendu 3D intégré dans l'identité visuelle Leafbay
- Maîtrise du pipeline 3D complet (modélisation → rendu → intégration web)
- Concevoir une solution cohérente à un problème de design et de développement
- Adaptation d'un univers vidéoludique en plateforme e-commerce fonctionnelle
- Gestion de projet en équipe avec méthodologie agile
- Production audiovisuelle de A à Z (sound design, animation, montage)
Design
Front-end
Back-end
Production
