Zomato : une expérience culinaire portée par la personnalité
« Nous ne voulons pas être une application de livraison de repas qui se trouve être drôle. Nous voulons être une marque avec laquelle on prend plaisir à passer du temps. » — Deepinder Goyal, PDG de Zomato
Zomato est la principale plateforme indienne de livraison de repas et de découverte de restaurants, présente dans plus de 1 000 villes en Inde. Mais ce qui fait de Zomato une étude de cas en design plutôt qu’un simple succès commercial, c’est sa volonté d’insuffler une véritable personnalité dans chaque point de contact. Là où les concurrents optimisent pour une efficacité froide, Zomato traite la commande de repas comme une expérience qui mérite d’être agréable. Chaque écran de chargement contient une blague. Chaque message d’erreur fait preuve d’empathie. Chaque illustration raconte une histoire.
Ce n’est pas de la simple fantaisie. La personnalité de Zomato en matière de design est un choix stratégique délibéré qui construit l’affinité avec la marque dans un marché où les coûts de changement sont proches de zéro. Quand trois applications livrent les mêmes plats des mêmes restaurants à des prix similaires, celle qui vous fait sourire gagne l’ouverture supplémentaire. Zomato prouve que la rédaction UX et l’illustration ne sont pas un vernis appliqué après le vrai travail de design — elles sont le travail de design.
Pourquoi Zomato compte
Réalisations clés : - A construit la marque food-tech la plus reconnaissable dans l’un des marchés de livraison les plus compétitifs au monde - A prouvé que la microcopy et le ton de voix sont des avantages concurrentiels durables, pas des luxes - A créé un système d’illustration qui communique universellement à travers la diversité linguistique de l’Inde - A conçu un suivi de livraison qui transforme l’attente en engagement plutôt qu’en anxiété - A maintenu la personnalité de marque à grande échelle sans qu’elle paraisse forcée ou répétitive
Points clés à retenir
- La microcopy, c’est du design d’interface - Les messages d’erreur pleins d’esprit, les écrans de chargement et les états vides de Zomato transforment des moments fonctionnels en opportunités de construction de marque
- Le rouge, c’est l’appétit - Leur rouge tomate n’est pas arbitraire ; il déclenche des réponses de faim et crée une reconnaissance instantanée dans les barres de notifications et les grilles d’applications
- L’illustration transcende les barrières linguistiques - Dans un pays comptant 22 langues officielles, les illustrations ludiques de Zomato communiquent émotion et contexte sans mots
- Le suivi de livraison est du design émotionnel - La carte en temps réel n’est pas un outil logistique ; c’est un système de gestion de l’anxiété qui transforme l’attente passive en attente active
- L’humour exige de la constance - Le ton de Zomato fonctionne parce qu’il est partout, pas saupoudré occasionnellement ; la personnalité est systématique, pas aléatoire
Principes fondamentaux de design
1. Le rouge comme architecture de marque
Le rouge de Zomato n’est pas une couleur unique mais un système. Le rouge tomate principal ancre la marque, tandis que les teintes et nuances créent une hiérarchie à travers l’ensemble de l’interface.
:root {
/* Core brand red */
--zomato-red: #e23744; /* Primary: CTAs, headers, logo */
--zomato-red-dark: #cb202d; /* Pressed states, emphasis */
--zomato-red-light: #f9e5e7; /* Backgrounds, tags, badges */
/* Supporting palette */
--zomato-gold: #eea61b; /* Ratings, premium, Gold membership */
--zomato-green: #3ab757; /* Veg indicator, success states */
--zomato-green-dark: #1a8d37; /* Pure veg restaurants */
/* Surfaces */
--zomato-white: #ffffff;
--zomato-gray-50: #f8f8f8; /* Page backgrounds */
--zomato-gray-100: #f0f0f0; /* Card backgrounds */
--zomato-gray-400: #9c9c9c; /* Secondary text */
--zomato-gray-700: #3e4152; /* Primary text */
--zomato-gray-900: #1c1c1c; /* Headings */
}
/* The veg/non-veg indicator is a critical cultural design element */
.food-indicator {
width: 18px;
height: 18px;
border: 2px solid;
border-radius: 2px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.food-indicator.veg {
border-color: var(--zomato-green);
}
.food-indicator.veg::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--zomato-green);
}
.food-indicator.non-veg {
border-color: var(--zomato-red);
}
.food-indicator.non-veg::after {
content: '';
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid var(--zomato-red);
}
Insight design : Le carré vert avec cercle vert (végétarien) et le carré rouge avec triangle rouge (non-végétarien) sont imposés par la réglementation alimentaire indienne, mais Zomato les élève du simple respect réglementaire au rang d’éléments de design à part entière. Ils apparaissent de manière proéminente sur chaque élément du menu, respectant l’importance culturelle des préférences alimentaires en Inde.
2. Le système de cartes restaurant
Les cartes restaurant de Zomato sont denses en information tout en restant facilement lisibles, combinant photographie culinaire, notes, temps de livraison et indicateurs de prix en une seule unité consultable d’un coup d’œil.
/* Restaurant card */
.restaurant-card {
background: var(--zomato-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
transition: box-shadow 200ms ease;
}
.restaurant-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* Hero image with overlays */
.card-image {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Discount badge: top-left */
.discount-badge {
position: absolute;
bottom: 12px;
left: 12px;
background: #2c365e;
color: white;
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
font-weight: 700;
line-height: 1.2;
}
.discount-badge .amount {
display: block;
font-size: 17px;
}
/* Delivery time: bottom-right */
.delivery-time {
position: absolute;
bottom: 12px;
right: 12px;
background: rgba(255, 255, 255, 0.95);
padding: 4px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 600;
}
/* Card content */
.card-content {
padding: 12px 16px;
}
.restaurant-name {
font-size: 17px;
font-weight: 700;
color: var(--zomato-gray-900);
margin: 0;
}
/* Rating badge */
.rating-badge {
display: inline-flex;
align-items: center;
gap: 4px;
background: var(--zomato-green-dark);
color: white;
padding: 2px 6px;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
}
.card-meta {
display: flex;
align-items: center;
gap: 8px;
color: var(--zomato-gray-400);
font-size: 13px;
margin-top: 4px;
}
.card-meta .separator {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--zomato-gray-400);
}
ANATOMIE D'UNE CARTE RESTAURANT :
┌─────────────────────────────────────┐
│ [ PHOTOGRAPHIE CULINAIRE ] │
│ [ ] │
│ [ -60% ] [ 25 min ] │
│ [ jusqu'à ₹120 ] │
├─────────────────────────────────────┤
│ Paradise Biryani │
│ ★ 4.3 · Biryani, Nord-Indien │
│ ₹300 pour deux · 2,5 km │
└─────────────────────────────────────┘
3. La microcopy pleine d’esprit comme système de design
La rédaction UX de Zomato n’est pas décorative — c’est un système de design avec des règles cohérentes.
États vides :
Panier vide :
"De bons petits plats sont toujours en préparation ! Allez-y, commandez quelque chose de délicieux depuis le menu."
Aucun restaurant à proximité :
"On dirait qu'on n'a pas encore de restaurant ici. Mais bon, on grandit chaque jour."
Recherche sans résultat :
"On n'a pas trouvé ce que vous cherchez. Mais on a trouvé 847 autres raisons de manger."
États de chargement :
Commande en cours de validation :
"Patience ! On cherche le chef le plus rapide en cuisine."
Recherche de restaurants :
"Recherche des meilleurs plats autour de vous... *roulement de tambour dramatique*"
Paiement en cours :
"On compte votre argent... non, on plaisante, on traite votre paiement."
Notifications push (là où Zomato excelle vraiment) :
"On sait que vous avez faim. On le sait toujours."
"Votre repas voyage plus vite que votre motivation un lundi."
"Plot twist : le dîner peut aussi se commander pour le déjeuner."
"Notre livreur est en route. Essayez de ne pas fixer la carte tout le temps. (On sait que vous le ferez.)"
Le principe de design : Chaque moment de friction ou d’attente est recadré comme un moment de connexion. L’humour obéit à des règles : il est autodérisoire (Zomato plaisante sur elle-même, pas sur l’utilisateur), il est contextuel (la blague est liée à l’état actuel) et il est culturellement pertinent (les références parlent au public millennial et Gen-Z indien).
Patterns de design à emprunter
Suivi de livraison en temps réel
L’écran de suivi de livraison de Zomato est l’un des écrans les plus fixés du design mobile indien. Il transforme l’anxiété de l’attente en engagement actif.
ANATOMIE DU SUIVI DE LIVRAISON :
┌─────────────────────────────────────┐
│ [VUE CARTE] │
│ │
│ 🏪 ─────── 🛵 ──────── 🏠 │
│ Restaurant Livreur Chez vous │
│ │
├─────────────────────────────────────┤
│ Arrivée dans 12 minutes │
│ ████████████░░░░░░ 65% │
├─────────────────────────────────────┤
│ ✓ Commande confirmée 16h02 │
│ ✓ Restaurant en préparation 16h05 │
│ ✓ Repas prêt 16h18 │
│ → Livreur a récupéré 16h22 │
│ ○ En route │
│ ○ Bientôt arrivé │
├─────────────────────────────────────┤
│ Livreur : Rahul │
│ [Appeler] [Discuter] [Pourboire] │
└─────────────────────────────────────┘
Décisions de design clés : - La carte est l’élément principal, occupant la moitié supérieure de l’écran - La barre de progression fournit un état d’avancement en un coup d’œil sans avoir à lire le texte - Chaque étape porte un horodatage, convertissant une attente vague en progression concrète - Le livreur a un nom, une photo et des options de contact, humanisant la chaîne logistique - Des micro-animations maintiennent l’écran vivant : l’icône du livreur se déplace le long de l’itinéraire, la barre de progression pulse doucement
Insight en design émotionnel : L’écran de suivi convertit l’attente passive (vérifier l’heure, s’inquiéter) en observation active (suivre la carte, voir la progression). C’est la même psychologie que regarder une barre de progression pendant le téléchargement d’un fichier — l’information ne change pas le résultat, mais elle transforme l’expérience émotionnelle de l’attente.
Le système d’illustration
Zomato utilise un style d’illustration cohérent dans toute l’application : convivial, légèrement cartoon, aux couleurs chaudes et culturellement ancré en Inde. Ces illustrations apparaissent dans les états vides, l’onboarding, les erreurs et les célébrations.
Lignes directrices d’illustration (déduites de leur système) : - Traits arrondis et chaleureux (pas d’angles vifs) - Tons de peau indiens et contexte culturel (personnes mangeant avec les mains, plats thali, chai) - La nourriture est toujours dessinée de manière appétissante (couleurs chaudes, vapeur, textures) - Les personnages montrent des émotions exagérées (faim, joie, surprise) - Les arrière-plans sont minimaux ou absents, laissant le personnage porter le message
Pourquoi c’est important en Inde : Avec 22 langues officielles et des centaines de dialectes, la communication textuelle a ses limites. Les illustrations de Zomato communiquent universellement. Un dessin d’une personne savourant un biryani avec bonheur transcende la langue d’une manière que même la meilleure microcopy traduite ne peut égaler.
Le verdict
Zomato démontre que la personnalité n’est pas l’opposé de l’utilisabilité — c’est une dimension de l’utilisabilité. Quand chaque application de livraison propose les mêmes restaurants à des prix similaires, l’expérience elle-même devient le produit. L’identité rouge de Zomato, sa microcopy pleine d’esprit, ses illustrations culturellement ancrées et son design de suivi émotionnellement intelligent créent une application que les gens apprécient d’utiliser, et pas seulement qu’ils tolèrent d’utiliser. La leçon de design est claire : dans les marchés banalisés, le plaisir est le différenciateur.
La leçon plus profonde porte sur la cohérence. La personnalité de Zomato fonctionne parce qu’elle est systématique. Le ton de voix a des règles. Le style d’illustration a des lignes directrices. La palette rouge est appliquée avec une hiérarchie. L’humour à grande échelle exige la même rigueur que n’importe quel autre composant d’un système de design — peut-être même davantage, car une blague qui tombe à plat est pire que pas de blague du tout.
Idéal pour apprendre : Comment construire un système de design porté par la personnalité qui s’adapte à travers les langues et les cultures, et comment transformer des moments UX fonctionnels (chargement, attente, erreurs) en opportunités de construction de marque.
Questions fréquentes
Comment Zomato maintient-elle un humour cohérent à travers des millions de notifications ?
Zomato dispose d’une équipe de contenu dédiée qui rédige la microcopy selon des directives explicites : l’humour doit être autodérisoire (plaisanter sur Zomato, pas sur l’utilisateur), contextuel (en lien avec l’état actuel de l’application) et culturellement pertinent (les références doivent parler à la cible démographique). L’équipe maintient un guide de ton avec des exemples de ce qui fonctionne et de ce qui dépasse les limites.
Pourquoi l’indicateur végétarien/non-végétarien est-il si proéminent dans le design de Zomato ?
Les indicateurs cercle vert (végétarien) et triangle rouge (non-végétarien) sont imposés par la réglementation alimentaire indienne, mais Zomato les élève au rang d’éléments de design à part entière car les préférences alimentaires sont culturellement significatives en Inde. Environ 30 à 40 % des Indiens sont végétariens, et de nombreux utilisateurs filtrent exclusivement selon ce critère. Rendre l’indicateur grand et visible est à la fois culturellement respectueux et fonctionnellement essentiel.
Comment le suivi de livraison réduit-il l’anxiété liée à la commande ?
L’écran de suivi convertit l’attente passive en engagement actif grâce à trois mécanismes : une carte en temps réel montrant la position du livreur, une barre de progression fournissant l’état d’avancement en un coup d’œil, et des étapes horodatées convertissant une attente vague en jalons concrets. Le livreur est humanisé avec un nom, une photo et des options de contact. Cela transforme l’expérience émotionnelle de « quand est-ce que ça arrive ? » en « je le vois arriver ».
Qu’est-ce qui rend les cartes restaurant de Zomato efficaces ?
Chaque carte concentre cinq signaux décisionnels dans une seule unité consultable d’un coup d’œil : photographie culinaire (déclencheur d’appétit), badge de note (signal de qualité), temps de livraison (urgence), fourchette de prix (adéquation au budget) et distance (praticité). La hiérarchie privilégie d’abord la photographie (émotionnel), puis le nom et la note (rationnel), puis les métadonnées (pratique), correspondant à la séquence de prise de décision de l’utilisateur.
Ressources
- Site web : zomato.com
- Application : Disponible sur iOS et Android
- Blog design : Le blog d’ingénierie de Zomato couvre les décisions relatives au système de design
- Réseaux sociaux : @zomato sur Twitter/X pour leur voix légendaire sur les réseaux sociaux