Étude de cas
Chez Nino
Un site vitrine pour un service de livraison nocturne, conçu par Capo Studio pour démontrer une identité visuelle « néon nocturne » — commande simplifiée à l'extrême, entièrement gérée sur WhatsApp.
Site vitrine
3 à 4 jours
4 pages
Sur devis gratuit
Délai de conception et de développement, contenus fournis. Sur un projet client, il faut y ajouter la collecte des textes et photos et les allers-retours de validation — comptez de quelques jours à 1 à 2 semaines selon le projet. Voir le détail des délais
Chez Nino, un service de burgers et desserts qui livre Lille jusqu'au bout de la nuit
Pour cette étude de cas, nous avons imaginé une petite équipe de livraison nocturne à Lille & alentours : burgers, plats italiens et desserts maison, préparés chaque soir pour ceux qui ont une envie bien après l'heure du dîner — sans jamais avoir eu de site pour le faire savoir au-delà du bouche-à-oreille et des réseaux sociaux.
Le besoin n'était pas de construire un système de commande en ligne complet, mais de donner une vitrine mémorable à une activité qui vit la nuit — et de transformer chaque visite en message WhatsApp.
Se démarquer du fast-food générique
Le secteur de la livraison nocturne est saturé d'applications au design interchangeable : une identité visuelle forte devient le seul vrai signe distinctif.
Rassurer sur les horaires tardifs
« Livré à 2h du matin » doit se lire en un coup d'œil, sans obliger le visiteur à chercher l'information dans un pied de page.
Commander sans friction, sans compte
Pas besoin d'un panier ni d'un système de paiement en ligne : un bouton WhatsApp direct suffit pour ce volume de commandes.
Clarifier la zone de livraison
Avant de commander tard le soir, le client veut être sûr d'être livré — la zone doit être visible sans avoir à la demander.
Mettre en avant les best-sellers
Face à un menu large, les tags « Best-seller » et « Nouveau » orientent le choix au lieu de laisser un visiteur indécis abandonner.
Être irréprochable sur mobile
Une commande à 1h du matin se fait presque toujours depuis un téléphone, souvent d'une seule main.
Ce que le projet devait accomplir
Six objectifs ont guidé les choix de design et de contenu, du premier écran jusqu'au bouton de commande.
Identité néon nocturne
Fond quasi noir, magenta et cyan fluorescents, lettrage à effet néon — une direction artistique à l'opposé de tous les autres démonstrateurs du portfolio.
Commande 100% WhatsApp
Un bouton flottant et plusieurs appels à l'action ramènent toujours vers une conversation WhatsApp pré-remplie, sans panier ni création de compte.
Menu par catégories
Burgers, plats et desserts maison organisés en catégories claires, chaque plat avec prix, description courte et tag Best-seller ou Nouveau.
Horaires toujours visibles
Un bandeau défilant en continu rappelle les horaires de livraison (20h–3h) sur chaque page, sans jamais quitter l'écran.
Responsive de bout en bout
Navigation, menu et page de commande pensés et testés au même niveau d'exigence sur mobile que sur desktop.
SEO & métadonnées
Métadonnées, sitemap, robots.txt et image Open Graph dédiées à ce projet.
Accueil → menu → à propos → commander
Chaque capture ci-dessous provient directement de l'application en cours d'exécution, pas d'une maquette.
Première impression
« Ouvert quand la ville dort » — le ton est donné dès le premier écran
Un slogan qui flashe en néon, un badge « Livraison 20h – 3h » toujours visible, et directement une mise en avant du best-seller (Cup Nutella-Banane) — pas de texte de présentation à lire avant de comprendre l'offre.
Le visiteur sait en un écran ce qu'il peut commander et jusqu'à quelle heure.
Le menu
Burgers, plats et desserts maison, classés et tagués
Trois catégories (burgers, plats, desserts maison), chaque plat avec sa photo, son prix et un tag « Best-seller » ou « Nouveau » quand il s'applique — pensé pour guider un choix rapide plutôt que pour être lu en entier.
Un visiteur indécis se dirige directement vers ce qui plaît déjà aux autres clients.
À propos
L'histoire de la maison, en quelques lignes seulement
Pas de longue histoire de fondateur : une équipe, une ville, une promesse — de quoi humaniser la marque sans retarder la commande.
Assez de contexte pour rassurer, sans détourner du geste d'achat.
La commande
Un seul chemin : WhatsApp
Numéro affiché, gros bouton « Commander sur WhatsApp », horaires et zone de livraison rappelés juste en dessous, réseaux sociaux en bas de page — tout ce qu'il faut pour passer commande, rien de plus.
Aucune friction : le client commande comme il écrirait à un ami.
Un menu et une commande pensés pour être utilisés en pleine nuit, sur mobile
Une envie à 1h du matin se commande presque toujours depuis un téléphone — l'expérience mobile devait être irréprochable, pas seulement fonctionnelle.
Accueil
Menu
Commander
Une cuisine de nuit ne gère pas un catalogue, elle gère un service
Les commandes arrivent par WhatsApp entre 20h et 3h, un plat tombe en rupture au milieu du coup de feu, et la vraie question du soir est « est-ce qu'on ouvre ? ». L'espace de gestion est construit autour de ces trois réalités, pas autour d'un back-office générique.
Quatre chiffres à l'ouverture, choisis pour ce qui se décide pendant le service : ce qui est encore en cuisine, ce qui est parti en livraison, ce qui est réellement encaissé, et le panier moyen — le seul indicateur qui dit si les offres fonctionnent.
Commandes
Chaque commande WhatsApp suivie de la réception à la livraison
Heure, quartier, téléphone cliquable, lignes détaillées avec quantités et total. Le statut se change en une sélection : reçue, en cuisine, en livraison, livrée.
La note du client — « sans oignons », « client injoignable » — est affichée en évidence plutôt que repliée : c'est elle qui fait rater une commande quand on ne la voit pas.
La carte
Un plat en rupture disparaît du site, tout de suite
Intitulés, descriptions et prix s'éditent directement dans la liste. Un bouton bascule chaque plat entre disponible et en rupture, et le site public cesse aussitôt de le proposer.
C'est le geste le plus fréquent d'un service de nuit — les buns ou la pâte à cookie viennent à manquer bien avant 3h. Un back-office qui demande trois écrans pour ça ne sera pas utilisé.
Paramètres
« On ouvre ce soir ? » — un bouton, et tout le site suit
Fermer la cuisine désactive le bouton de commande, change le bandeau défilant et remplace la pastille WhatsApp par l'heure de retour. Horaires, délai annoncé, zone, quartiers livrés, minimum de commande et frais se règlent au même endroit.
Rien de pire qu'un client qui écrit sur WhatsApp un soir de fermeture : il n'a pas de réponse, et il ne revient pas.
Connexion et offres du moment
Deux écrans complémentaires : le contrôle d'accès, et les formules mises en avant sur la page d'accueil.
Accès protégé, mot de passe affiché puisque la démonstration est faite pour être visitée.
Les formules qui font monter le panier moyen, éditables sans rappeler son prestataire.
Utilisable une main dans la farine
Personne ne tient un service de nuit assis devant un ordinateur. Le menu passe en barre horizontale, les cartes s'empilent, et l'état du service reste affiché en permanence : les mêmes informations, sur l'écran qui est réellement à portée.
Un back-office pensé pour le desktop uniquement est un back-office qui ne sert qu'au bureau — c'est-à-dire jamais, dans ce métier.
Un site utilisable par le plus grand nombre
Une commande se passe souvent tard, fatigué, d'une seule main — les conditions dans lesquelles un site mal conçu devient impraticable pour tout le monde, pas seulement pour les personnes en situation de handicap.
Utilisable au clavier
Le menu mobile annonce son état d'ouverture, la page en cours est signalée dans la navigation, et chaque lien reste atteignable sans souris — utile bien au-delà du handicap, ne serait-ce qu'à une main dans le métro.
Lisible malgré le néon
Le magenta et le cyan restent des accents : titres courts, badges, boutons. Le texte que l'on lit vraiment est en blanc plein sur fond quasi noir, jamais en couleur fluorescente.
Animations désactivables
Flicker néon, bandeau défilant et apparitions au défilement se coupent automatiquement si le visiteur a activé « réduire les animations » dans les réglages de son téléphone.
Images décrites, décors ignorés
Chaque photo de plat porte sa description ; les lueurs et éléments purement décoratifs sont masqués aux lecteurs d'écran plutôt que lus à voix haute.
Rapide même en 4G, à 1h du matin
Une envie nocturne ne supporte pas l'attente : si le menu met trois secondes à s'afficher, le client est déjà sur l'application de livraison d'à côté.
Pages pré-calculées
Le site est entièrement statique : le HTML est généré à la publication puis servi depuis un CDN, sans base de données à interroger au moment de la visite.
Images converties à la volée
Les photos passent par l'optimiseur d'images de Next.js : conversion automatique en WebP ou AVIF selon le navigateur, et place réservée à l'avance pour éviter que le texte ne saute pendant le chargement.
Polices auto-hébergées
Les polices sont servies depuis le domaine du site plutôt que depuis Google : une requête externe en moins, et pas de clignotement de texte au premier affichage.
Référencement et partage
Sitemap, robots.txt, métadonnées et image de partage social sont générés par le code — un lien envoyé sur WhatsApp ou Instagram affiche toujours la bonne vignette.
Ce qui existe déjà sur le projet
Cette solution peut évoluer selon vos besoins
Voici des exemples d'évolutions courantes pour ce type de projet, non incluses dans la démonstration.
Une enseigne lumineuse, pas une carte de restaurant
Fond quasi noir et lettrage néon magenta/cyan — une esthétique d'enseigne de nuit plutôt que de site vitrine chaleureux, pour incarner une activité qui ne vit qu'après la tombée du jour.
Nuit profonde
Fond principal sur tout le site
Magenta néon
Accent principal — CTA, mot-clé du slogan, best-sellers
Cyan néon
Accent secondaire — liens, badges, alternance des prix
Blanc
Texte principal sur fond sombre
Une stack volontairement légère
Un service de livraison qui commande sur WhatsApp n'a pas besoin d'un panier ni d'une base de données pour convertir.
Next.js 16 & React 19
App Router, Server Components par défaut, Turbopack — composants client uniquement pour les animations néon et le bandeau défilant.
Tailwind CSS 4
Design tokens dédiés à l'identité « néon nocturne » : fond quasi noir, dégradés magenta/cyan, aucune référence à une charte diurne.
Framer Motion
Flicker néon sur le slogan, ticker défilant en boucle, micro-interactions au survol des boutons et cartes.
Commande via WhatsApp
Chaque appel à l'action ouvre une conversation WhatsApp pré-remplie (wa.me) — pas de panier, pas de compte client.
Aucun backend
Contenu statique et espace de gestion en localStorage : pas de base de données, pas de paiement en ligne — donc rien qui puisse tomber en panne le jour où un prospect ouvre la démonstration.
D'autres projets à explorer
Chaque étude de cas correspond à un site réellement en ligne, que vous pouvez visiter en un clic.
Vous êtes restaurateur et voulez une vitrine à votre image ?
Capo Studio conçoit des sites vitrines sur mesure, pensés pour transformer une visite en commande.
- Devis gratuit
- Sans engagement
- Réponse sous 24h ouvrées