Étude de cas — E-commerce / Product Design

Cats Kitchen

Repenser une expérience e-commerce de nourriture pour chats autour de la nutrition, de la confiance et de la découverte produit personnalisée.

UX/UI Design Product Design E-commerce Responsive 2026

RôleUX/UI Designer

PérimètreUX Research · Wireframing · UI Design · Responsive · Design System

Cats Kitchen — écran d'accueil desktop et mobile

02 — Le défi

Le défi

L'expérience Cats Kitchen d'origine posait les bases d'une boutique en ligne de nourriture pour chats, mais la découverte produit, l'information nutritionnelle et la prise de décision d'achat manquaient de clarté. La refonte s'est concentrée sur une nutrition plus lisible, une meilleure découverte produit et une expérience d'achat plus rassurante, sur mobile comme sur desktop.

Découverte produit

Trouver la bonne recette demandait trop de navigation et offrait peu de guidage.

Clarté nutritionnelle

Les informations nutritionnelles importantes étaient difficiles à scanner et à comparer.

Confiance à l'achat

L'expérience avait besoin d'une hiérarchie plus forte, de signaux de confiance et d'un accompagnement tout au long du parcours d'achat.

03 — Avant / après

De l'expérience d'origine à la V2

Accueil — Avant / Après

Cats Kitchen — accueil, comparaison avant/après

Fiche produit — Avant / Après

Cats Kitchen — fiche produit, comparaison avant/après

La refonte introduit une hiérarchie plus claire, une transparence nutritionnelle renforcée et une expérience d'achat plus structurée, tout en préservant le concept original de Cats Kitchen.

04 — Structure UX

Structurer l'expérience avant tout

Avant de définir la direction visuelle, j'ai structuré les parcours clés en basse fidélité pour valider la hiérarchie, l'information produit et la navigation.

Hiérarchie produit claire
La nutrition avant la décoration
Une prise de décision guidée

Wireframes Cats Kitchen — accueil, fiche produit, boutique

05 — Expérience responsive

Une expérience, adaptée à chaque écran

Cats Kitchen — accueil desktop et mobile côte à côte

Plutôt que de simplement réduire l'interface desktop, l'expérience mobile réorganise la hiérarchie, la navigation et la découverte produit autour d'interactions plus ciblées.

Navigation desktop persistante Navigation mobile simplifiée Hiérarchie de contenu adaptée Cartes produit responsives

06 — Découverte produit

Faciliter la découverte produit

La découverte produit a été repensée autour des besoins plutôt qu'autour d'un simple catalogue. Les utilisateurs peuvent parcourir par stade de vie ou besoin nutritionnel, rechercher des recettes et affiner progressivement les résultats.

Cats Kitchen — boutique desktop et états mobile (recherche, filtres)

Recherche Filtres Boutique par besoin États de filtres actifs Point d'entrée du Food Finder

07 — Produit & nutrition

La nutrition au centre de l'expérience produit

Plutôt que de cacher l'information nutritionnelle en bas de page, la refonte rend les données les plus utiles visibles immédiatement, tout en gardant l'analyse détaillée accessible par divulgation progressive.

42%Protéine animale

372Kcal / 100 g

0.9%Taurine

Bénéfices Ingrédients Constituants analytiques Guide d'alimentation Avis

Cats Kitchen — fiche produit desktop et mobile, résumé nutritionnel

08 — Food Finder

Quatre questions. Un plan sur mesure.

Choisir la nourriture de son chat peut vite devenir compliqué. J'ai introduit un configurateur guidé, le Food Finder, pour transformer la découverte produit en un parcours de décision court et compréhensible.

Stade de vie

Poids & condition corporelle

Mode de vie

Besoins alimentaires

Food Finder Cats Kitchen — configurateur desktop et mobile en 4 questions

Une seule décision principale par étape permet de garder le parcours concentré et de réduire la charge cognitive. Il s'agit d'un accompagnement nutritionnel et d'une aide à la découverte produit — pas d'un diagnostic vétérinaire.

09 — Recommandations

Des recommandations qui expliquent pourquoi

Questions→ Profil→ Recommandations

Plutôt que de renvoyer une liste de produits sans explication, chaque recommandation communique pourquoi elle correspond au profil du chat et affiche l'information nutritionnelle nécessaire pour comparer les options.

Cats Kitchen — écran de recommandations desktop et mobile

Niveau de correspondance Pourquoi ça correspond Infos nutritionnelles Prix Comparer Box d'essai

10 — Checkout

Un chemin plus serein vers l'achat

Cats Kitchen — parcours de checkout desktop en 4 étapes

Le checkout a été simplifié en quatre étapes claires — informations, livraison, paiement et validation — tout en gardant le résumé de commande visible pendant tout le parcours desktop.

Informations Livraison Paiement Validation

11 — Design System

Construire un système cohérent

Pour garder une expérience cohérente entre commerce, nutrition et personnalisation, j'ai créé un design system réutilisable couvrant les fondations, la typographie, les états d'interaction et les composants produit.

Design system Cats Kitchen — palette de couleurs

Design system Cats Kitchen — typographie

Design system Cats Kitchen — cartes produit

Warm Cream Deep Navy Powder Blue Soft Peach Familjen Grotesk Hanken Grotesk

12 — Résultat final

Une façon plus claire de choisir la bonne nourriture

Cats Kitchen est passée d'une interface e-commerce traditionnelle à une expérience d'achat centrée sur la nutrition, qui aide les utilisateurs à découvrir, comprendre et comparer les produits avec plus de clarté.