Blog
23 avr. 2025 - 8 MIN DE LECTURE
Du mockup au marché : mon processus de design produit de bout en bout

Du mockup au marché : mon processus de design produit de bout en bout

Une analyse détaillée de ma méthodologie de conception itérative, de la recherche initiale à la livraison finale, avec des conseils pratiques pour les designers à chaque étape.

Jay Ho Oh

Jay Ho Oh

Créer des produits numériques performants ne consiste pas à suivre une formule rigide, mais à élaborer un cadre flexible capable de s'adapter aux défis uniques de chaque projet. Après avoir affiné mon approche sur des dizaines de produits, j'ai développé un processus qui offre des résultats constants tout en laissant place à la créativité et à l'itération.

Dans cet article, je vous présenterai mon processus de conception de bout en bout, de la phase de découverte initiale au transfert aux développeurs, en prenant mon travail récent sur l'application EcoTrack comme étude de cas.

Phase 1 : Découverte et recherche

Tout grand produit commence par la compréhension du problème qu'il tente de résoudre. Pour EcoTrack, notre défi était de créer un moyen engageant pour que les utilisateurs suivent leur impact environnemental sans se sentir accablés par la culpabilité ou la complexité des données.

Entretiens utilisateurs

J'ai commencé par mener des entretiens avec 12 utilisateurs potentiels issus de différents segments démographiques, en me concentrant sur leurs habitudes actuelles et leurs attitudes envers la durabilité. Ces conversations ont révélé un aperçu crucial : la plupart des gens voulaient faire des choix respectueux de l'environnement mais se sentaient paralysés par la complexité du calcul de leur impact.

"Je me soucie de l'environnement, mais je n'ai aucune idée de savoir si utiliser un sac en papier est réellement préférable au plastique, ou si ma gourde réutilisable change vraiment quelque chose." — Participant à l'entretien

Analyse concurrentielle

Ensuite, j'ai analysé les applications de durabilité existantes, en créant une matrice de comparaison des fonctionnalités pour identifier les lacunes et les opportunités. La plupart des concurrents se concentraient sur le calcul de l'empreinte carbone, mais ne parvenaient pas à fournir de conseils exploitables ou de renforcement positif.

Définir le succès

Avant d'ouvrir Figma, j'ai collaboré avec les parties prenantes pour définir des indicateurs de succès clairs :

  • Augmenter l'utilisation quotidienne active de 40%
  • Améliorer la compréhension de l'impact environnemental déclarée par les utilisateurs
  • Générer des changements de comportement mesurables dans au moins deux catégories de durabilité

Phase 2 : Idéation et conceptualisation

Une fois le domaine du problème bien compris, je suis passé à la phase créative du processus.

Croquis

Je commence toujours par du papier et un stylo, en explorant rapidement différentes approches sans les contraintes des outils numériques. Pour EcoTrack, j'ai rempli trois carnets de croquis avec des concepts allant d'expériences ludiques à des tableaux de bord riches en données.

Architecture de l'information

En m'appuyant sur les enseignements de la recherche, j'ai élaboré une architecture de l'information centrée sur l'utilisateur, privilégiant la simplicité et les informations exploitables :

  1. Tableau de bord — Aperçu personnalisé avec indicateurs d'impact immédiats
  2. Suivi quotidien — Journalisation simple des activités avec retour immédiat
  3. Parcours d'impact — Visualisation de la progression au fil du temps
  4. Centre d'action — Recommandations personnalisées basées sur le comportement

Principes de design

J'ai établi quatre principes de design fondamentaux pour guider chaque décision :

  • Simplifier la complexité — Traduire l'impact environnemental en unités compréhensibles
  • Célébrer les progrès — Privilégier le renforcement positif plutôt que la culpabilité
  • Favoriser des choix éclairés — Fournir un contexte pour la prise de décision
  • Concevoir pour l'ancrage d'habitudes — Créer des boucles d'interaction satisfaisantes

Phase 3 : Prototypage et tests

Le cadre conceptuel étant établi, je suis passé au cycle itératif de prototypage et de test.

Wireframes basse fidélité

J'ai créé des wireframes axés sur les flux d'utilisateurs et la hiérarchie de l'information, en gardant délibérément le design visuel minimaliste pour concentrer les retours sur la fonctionnalité et la structure.

Tests utilisateurs (Round 1)

Les tests de wireframes avec 8 participants ont révélé plusieurs enseignements clés :

  • Les utilisateurs voulaient un retour plus immédiat lors de la saisie d'activités
  • La visualisation de l'impact n'était pas intuitive pour la plupart des utilisateurs
  • Les gens étaient confus par la terminologie environnementale technique

Prototypes moyenne fidélité

Sur la base des retours de tests, j'ai affiné le concept et développé des prototypes interactifs avec plus de détails visuels, en me concentrant sur :

  • Visualisation simplifiée des données via des métaphores familières
  • Renforcement positif immédiat pour les activités enregistrées
  • Divulgation progressive d'informations environnementales plus complexes

Tests utilisateurs (Round 2)

Une deuxième série de tests a montré des améliorations significatives de l'ergonomie, tout en soulignant de nouveaux défis :

  • Les utilisateurs voulaient comparer leur impact avec leurs amis ou les moyennes communautaires
  • Les résumés hebdomadaires étaient plus motivants que les statistiques quotidiennes
  • Le processus d'onboarding semblait trop long

Phase 4 : Design visuel et peaufinage

Une fois l'expérience de base validée, je suis passé au design visuel haute fidélité.

Langage visuel

J'ai développé un langage visuel équilibrant accessibilité et crédibilité :

  • Une palette de couleurs inspirée de la nature avec un code couleur fonctionnel clair
  • Une iconographie personnalisée simplifiant les concepts complexes
  • Une typographie privilégiant la lisibilité sur tous les appareils
  • Des micro-interactions apportant satisfaction et renforcement

Design System

Pour garantir la cohérence et faciliter le développement, j'ai créé un design system complet incluant :

  • Une bibliothèque de composants avec états et comportements documentés
  • Des directives de mise en page responsive
  • Des spécifications d'animation
  • Des normes d'accessibilité

Prototype final

Le prototype final a réuni tous les éléments dans une expérience cohérente, que nous avons testée auprès d'un groupe d'utilisateurs plus large avant de passer au développement.

Phase 5 : Implémentation et itération

Le processus de design ne s'arrête pas au début du développement — il évolue.

Collaboration développeurs

J'ai travaillé en étroite collaboration avec les développeurs tout au long de la mise en œuvre, en participant aux revues de code et en ajustant les designs pour répondre aux contraintes techniques tout en préservant l'expérience de base.

Mise en place de l'analytics

Nous avons intégré des outils d'analyse pour suivre nos indicateurs de succès, en mettant en place des tableaux de bord pour surveiller les interactions clés et les parcours utilisateurs.

Itération post-lancement

Après le lancement, nous avons instauré un cycle régulier d'analyse et d'itération :

  • Revues hebdomadaires des retours et comportements utilisateurs
  • Sprints de design bihebdomadaires pour traiter les problèmes émergents
  • Planification mensuelle selon les modèles d'utilisation

Résultats et enseignements

Six mois après le lancement, EcoTrack a dépassé nos indicateurs de succès initiaux :

  • Augmentation de 52% de l'utilisation quotidienne active
  • 78% des utilisateurs déclarent mieux comprendre leur impact environnemental
  • L'utilisateur moyen a adopté 3.4 nouvelles habitudes durables

La leçon la plus précieuse de ce projet a été l'importance de rendre tangibles les concepts abstraits. En traduisant des données environnementales complexes en informations personnelles et exploitables, nous avons créé une expérience qui non seulement a éduqué les utilisateurs, mais les a aussi incités à opérer des changements significatifs.

Conclusion

La conception de produit efficace n'est jamais un parcours linéaire ; c'est un cycle continu d'apprentissage et d'affinement. En restant concentré sur les besoins des utilisateurs tout en maintenant une approche flexible de la résolution de problèmes, nous pouvons créer des produits qui non seulement répondent aux objectifs commerciaux, mais améliorent véritablement la vie des gens.

J'aimerais beaucoup en savoir plus sur votre propre processus de conception et sur la manière dont vous abordez des défis similaires. N'hésitez pas à me contacter pour toute question ou à partager vos expériences dans les commentaires ci-dessous.

Propulsé par Nuxt UI • © 2026