212 Chicken — Crunch in Motion

Le projet

212 Chicken est un site web de restauration construit autour du concept créatif « Crunch in Motion ».

L'objectif était de créer une expérience capable de transmettre l'énergie et la personnalité de la marque dès les premières secondes.

Plutôt que de créer un site de restaurant classique, l'interface repose sur une identité graphique forte, des compositions produits expressives et un système d'animation qui accompagne la navigation.

Le challenge

Le principal défi était de conserver une direction artistique très forte tout en construisant un site simple à utiliser.

Le projet devait notamment permettre aux visiteurs de :

• découvrir la marque ;
• explorer le menu ;
• rechercher un produit ;
• filtrer les catégories ;
• consulter les informations d'un produit ;
• rechercher un restaurant ;
• accéder aux réseaux sociaux ;
• commander lorsqu'un lien de commande vérifié est disponible.

Il fallait également conserver de bonnes performances malgré les visuels et les animations importantes.

Direction créative

La direction artistique repose sur une identité audacieuse et expressive.

La page d'accueil utilise notamment :

• un burger flottant ;
• une composition typographique autour du « 212 » ;
• un ribbon orange ;
• une mise en page très graphique ;
• des transitions et animations liées au scroll.

Le Hero est volontairement traité comme une composition de marque plutôt que comme une simple bannière.

Crunch in Motion

L'animation principale du Hero traduit directement le concept « Crunch in Motion ».

Sur desktop, le scroll ouvre progressivement la composition du burger.

Le pain inférieur, la sauce et les miettes peuvent se déplacer indépendamment du reste de la composition.

La couche typographique « 212 » utilise également un mouvement légèrement décalé afin de renforcer la sensation de profondeur.

Le résultat crée une introduction plus immersive tout en conservant la lisibilité du contenu principal.

Menu

Le site dispose d'une page dédiée à la carte.

Elle regroupe les 25 produits dans une grille unique.

L'utilisateur peut filtrer le menu à travers 9 catégories différentes.

Contrairement à certaines interfaces mobiles utilisant un carousel horizontal, les catégories peuvent revenir à la ligne afin d'éviter un scroll horizontal inutile.

Sur les écrans larges, les filtres peuvent rester visibles pendant la navigation.

Recherche

Une recherche permet de retrouver rapidement un produit dans le menu.

La recherche est insensible aux accents afin de rendre l'expérience plus tolérante aux différentes saisies utilisateur.

Les catégories peuvent également être liées directement via une URL contenant le paramètre ?categorie=.

Cela rend les sections du menu partageables et facilite la navigation directe.

Fiches produits

Les produits peuvent être consultés dans une fenêtre de détail accessible.

L'objectif est de présenter les informations importantes sans obliger l'utilisateur à quitter complètement son contexte dans le menu.

Restaurant finder

Une page dédiée permet également de rechercher les restaurants 212 Chicken.

Tant que les adresses définitives ne sont pas confirmées dans les données du projet, l'interface évite d'inventer des informations.

Elle utilise plutôt une recherche Google Maps.

Cette approche permet de conserver un comportement utile sans afficher de localisation non vérifiée.

Commande

Les boutons de commande sont gérés de manière conditionnelle.

Ils apparaissent uniquement lorsqu'une URL de commande HTTPS vérifiée est configurée.

Le site évite ainsi d'afficher un parcours de commande incomplet ou fictif.

Responsive Design

L'expérience a été pensée pour fonctionner sur plusieurs tailles d'écran.

Une attention particulière est portée à :

• la composition du Hero ;
• les filtres du menu ;
• les dialogs produits ;
• la navigation ;
• le placement des CTA ;
• l'