ENJEUX DE LA MISSION
Face au manque d'options pour commander des repas à la fois sains, rapides et adaptés aux intolérances alimentaires, ce projet explore la conception d'une application fluide, personnalisable et inclusive.
RÔLE
Product Designer
J'ai mené l'ensemble du processus de conception : de la recherche exploratoire appuyée sur une analyse comparative du marché, à la définition des besoins utilisateurs, en passant par l'idéation, les wireframes, le prototypage haute fidélité, les test utilisateurs et la conception de l'interface finale.
RÉSULTAT
→ Un parcours de commande plus rapide, épuré et rassurant.
→ Une interface adaptée aux besoins alimentaires spécifiques.
→ Un système de personnalisation simple à configurer, sans surcharge cognitive
→ Un UI kit modulable, pour la scalabilité produit
→ Un parcours de commande plus rapide, épuré et rassurant.
→ Une interface adaptée aux besoins alimentaires spécifiques.
→ Un système de personnalisation simple à configurer, sans surcharge cognitive
→ Un UI kit modulable, pour la scalabilité produit
ANNÉE
2025
2025
RECHERCHE UTILISATEUR
Une première phase exploratoire m'a permis d'identifier un segment d'utilisateurs concernés par des intolérances alimentaires. J'ai ensuite mené une recherche qualitative auprès d'un panel ciblé de 6 personnes, afin de comprendre leur habitudes, leurs contraintes et leurs frustrations. Ces enseignements ont permis de poser des hypothèses claires et de structurer un premier profil utilisateur.
COMPRENDRE LES BESOINS CLES
Sur la base des retours utilisateurs, un persona principal a été défini pour incarner les besoins identifiés : une femme active, soucieuse de sa santé et celle de sa famille et confrontée aux contraintes alimentaires d'un de ses enfants.
USER JOURNEY MAP
Cartographie du parcours de notre persona, de la prise de conscience du besoin à la validation d'une commande. Cette visualisation a guidé les priorités fonctionnelles.
PREMIERS JALONS VISUELS
Avant d’entamer les tests utilisateurs, plusieurs wireframes papier ont été explorés pour tester différentes structures et hiérarchies d’information.
Avant d’entamer les tests utilisateurs, plusieurs wireframes papier ont été explorés pour tester différentes structures et hiérarchies d’information.
Un tri a été effectué pour ne conserver que les versions les plus pertinentes, ensuite digitalisées pour simuler l’ensemble du parcours : filtre, fiche produit, ajout au panier, validation.
TESTS UTILISATEURS - METHODOLOGIE & ENSEIGNEMENTS
Un premier round de tests utilisateurs a été mené sur les prototypes basse, permettant d'identifier plusieurs axes d'optimisation. Ces tests ont mis en lumière des besoins de clarification (filtres, étapes de validation), de personnalisation du panier, et de meilleure lisibilité des interfaces. Le design a ensuite été ajusté en conséquence, pour améliorer l'expérience globale.
Les retours ont notamment mis en évidence :
→ Une confusion sur l’emplacement des filtres
→ Un besoin de tri par catégorie, prix ou notes
→ Une confusion sur l’emplacement des filtres
→ Un besoin de tri par catégorie, prix ou notes
Le parcours global a été jugé fluide, mais quelques ajustements sont à prévoir pour renforcer l’intuitivité.
Un extrait est présenté ci-dessous.
Un extrait est présenté ci-dessous.
DIAGRAMME D'AFFINITE - SYNTHESE COLLECTIVE
Un tri des retours a été effectué sous forme de diagramme d’affinité, permettant de regrouper les observations selon des thématiques récurrentes. Cette méthode a permis de faire émerger six clusters de feedback significatifs :
→ Filtres par intolérances
→ Filtres avancés (prix, catégories, notes)
→ Funnel de commande (navigation)
→ Ajout au panier et CTA
→ Orientation saine & confiance
→ Historique & personnalisation
→ Filtres par intolérances
→ Filtres avancés (prix, catégories, notes)
→ Funnel de commande (navigation)
→ Ajout au panier et CTA
→ Orientation saine & confiance
→ Historique & personnalisation
SITEMAP - STRUCTURATION DE L'ARCHITECTURE FINALE
Suite à l’analyse du diagramme d’affinité, le sitemap a été structuré pour répondre aux besoins utilisateurs identifiés : un accès rapide aux filtres d’intolérances, une navigation claire, et un parcours fluide jusqu’à la commande.
Cette structure en 6 sections principales permet d’anticiper les futurs écrans, tout en priorisant la personnalisation et la simplicité d’usage.
USER FLOW
Le User Flow ci-dessous illustre le parcours optimisé d’un utilisateur, de l’ouverture de l’application jusqu’à la validation de sa commande.
Il intègre les ajustements issus des tests utilisateurs, notamment une simplification de l’accès aux paramètres d’intolérances.
Ce flow m’a permis de clarifier les écrans clés à concevoir et d’anticiper les points de friction ou de décision à chaque étape du parcours.
Il intègre les ajustements issus des tests utilisateurs, notamment une simplification de l’accès aux paramètres d’intolérances.
Ce flow m’a permis de clarifier les écrans clés à concevoir et d’anticiper les points de friction ou de décision à chaque étape du parcours.
AVANT/APRES - AJUSTEMENT DU DESIGN
Sur la base des retours utilisateurs, plusieurs écrans ont été ajustés pour clarifier :
→ L’accès aux filtres
→ La hiérarchie des informations sur les fiches plats
→ L’action d’ajout au panier
ITERATION SUR LES MAQUETTES HAUTE FIDELITE
Suite au premier test utilisateur, des maquettes haute fidélité ont été créées pour intégrer les retours et affiner le parcours. Un second test a ensuite permis de valider ces écrans et d’identifier trois points d’ajustement :
→ Meilleure distinction entre recherche et filtres,
→ Ajout d’un chevron pour clarifier la liste des filtres d’intolérances,
→ Renforcement de la réassurance visuelle sur les plats compatibles.
ITERATION SUR LES MAQUETTES HAUTE FIDELITE
Un prototype haute fidélité a été conçu pour simuler l’ensemble du parcours utilisateur, de la recherche au paiement.
ACCESSIBILTE
→ Contrastes conformes WCAG 2.1
Lisibilité assurée pour tous les profils utilisateurs, y compris en environnement lumineux ou pour les malvoyants.
→ Contrastes conformes WCAG 2.1
Lisibilité assurée pour tous les profils utilisateurs, y compris en environnement lumineux ou pour les malvoyants.
→ Éléments interactifs ergonomiques
Tailles et espacements respectant les recommandations pour limiter les erreurs de clic, notamment pour les personnes ayant des troubles moteurs.
→ Pictogrammes accompagnés de texte
Meilleure compréhension pour les utilisateurs neurodivergents ou en situation de handicap cognitif.
MÉTHODES
Recherche utilisateur, Persona, User Journey, SiteMap, Information de l’architecture, Wireframes, Ateliers d’idéation, Brainstorming, Workshop, Benchmark, Prototypes fonctionnels, Pattern librairie, Accessibilité (RGAA / A11Y)
OUTILS
Figma, Figjam, Google Forms.
