Le Product Design pour les nuls

Posséder des compétences en Design et s’initier aux bonnes pratiques UX et UI devient indispensable pour contribuer au succès d’un produit. Il ne s’agit pas seulement de faire de jolies interfaces, mais bien de comprendre les besoins des utilisateurs et de leur apporter une solution viable et accessible.

Vous débutez dans l’univers du Produit ? Vous voulez en savoir plus sur le métier de Product Designer, son périmètre d’action, avec qui il travaille, quels sont ses outils au quotidien, le vocabulaire qu’il utilise ? C’est pourquoi Maestro a créé la formation Product Design. Elle s’adresse à tous ceux qui souhaitent s’initier à cette discipline en plein essor.

Sans plus de suspense, découvrons au travers d’exemples, ce qu’est le Product Design. Et qui d’autre que l’expert Arnaud Lissajoux*, UX Designer et Agile Master, pour vous parler avec passion de ce métier bouillant ?

Ce métier s’adresse bien évidemment aux femmes comme aux hommes, mais afin de faciliter la lecture de cet article, nous avons fait le choix du pronom générique « il » pour faire référence au Product Designer.

Replay du MaestriX Le Product Design pour les nuls 🎬

Le Design dans une organisation Produit 🏢

Quelques définitions et outils avant de commencer

Le jargon vous rebute ? Ne vous sauvez pas si vite, voici quelques définitions de base qui vous serviront pour la suite de votre initiation au Product Design.

• Interface utilisateur : dispositif qui permet à un usager d'interagir avec un produit informatique. C’est le point de contact entre l’humain et la machine !
  

• UI Design : design d'interface utilisateur.
  

• UX Design : design d'expérience utilisateur.
  

• Wireframe : maquette de l’interface (ou schéma), en basse fidélité (LOFI, pour Low Fidelity).

• ‍Mockup : maquette de l’interface, en haute fidélité (HIFI, pour High Fidelity).
  Wireframes et mockups servent à prototyper le produit (site web, logiciel ou application mobile). Exemples d’outils de maquettage : Whimsical, Balsamiq, MarvelApp, MockupFlow, Figma, Origami, Invision, Adobe XD, Sketch…
  

• CMS : Content Management System, ou système de gestion de contenu. Un CMS est un logiciel qui permet de concevoir, créer et mettre à jour des sites web dynamiques. Exemple : WordPress et Elementor, WebFlow…
  

• No-code : façon de créer une solution numérique, sans avoir à coder dans un langage informatique. Exemples d’outils no-code : BravoStudio, WebFlow, Glide, Zapier…
  

• A/B testing : consiste à tester avec des utilisateurs deux versions d'une page web ou d'une application, afin de mesurer laquelle donne les meilleurs résultats.
  

• Toutes les autres définitions liées au Product sont regroupées dans le glossaire de Maestro.

À propos des outils, Arnaud nous explique qu’ils évoluent rapidement et permettent aujourd’hui de faire des choses fantastiques. Le no-code, en particulier, révolutionne le domaine du Product. On ira même jusqu’à dire que « le Design mange le Coding ».

En effet, cette discipline révèle toute son importance et prend son envol depuis quelques années. Pour des produits relativement simples, elle peut quasiment se passer de compétences informatiques pour créer une solution utilisable. Si vous n’êtes pas trop calé en tech, vous avez tout de même votre carte à jouer !

La pensée Design en Double Diamant 💎

Pour expliquer ce qu’est le Design, appuyons-nous sur la méthodologie du Double Diamant, illustrée par le schéma ci-dessous 👇

Lorsque l’on fait de la conception centrée sur l’utilisateur, on commence par adopter la posture de la pensée divergente pour ouvrir le champ des possibles. Les activités concrètes qui se cachent derrière cette expression un peu abstraite sont : déterminer quel est le problème auquel on va s’intéresser, le retourner dans tous les sens, faire de la veille, des entretiens utilisateurs, recueillir des données… C’est la phase de Découverte (ou Discovery).

Ensuite, on synthétise les recherches, on les analyse et on referme le scope pour définir la cible que l’on souhaite adresser. C’est la phase de Définition. La solution que l’on va développer par la suite devra répondre aux besoins de cette cible bien précise.

La phase suivante, de prototypage, consiste à concevoir les maquettes du produit et éventuellement à le développer à minima. C’est l’occasion d’essayer des alternatives pour vérifier ses hypothèses et voir ce qui fonctionne le mieux. Là encore, on ouvre le champ des possibles.

Rapidement, on met le produit entre les mains des utilisateurs (phase de Delivery), on le teste et on l’améliore par itérations successives.

Bien sûr, il existe des outils pour effectuer tout cela. Équipez-vous de la Product Toolbox de Maestro, hyper complète !

Les différents métiers du Design 💼

UX Designer

L’UX Designer va principalement intervenir dans les premières phases du processus Design (Discovery & Definition). Son rôle est moins prépondérant dans la phase de Delivery.

Il a pour mission de comprendre les besoins des utilisateurs, grâce aux réalisations suivantes :

• user interviews (entretiens avec les potentiels utilisateurs) ;
• personas (définition des utilisateurs cibles) ;
• customer journey map (parcours utilisateurs) ;
• wireframe LOFI (maquettes basse fidélité) ;
• tests utilisateurs (avec l’outil Maze, par exemple).

UI Designer

Le travail de l’UI Designer est complémentaire de celui d’UX Designer. Son rôle va prendre de l’importance dans le process Design à mesure que l’on entre dans les phases de prototypage et de test.

Ses activités vont au-delà du maquettage :

• content curation (veille stratégique) ;
• data-driven design (conception basée sur l’analyse des données) ;
• moodboard (planche de tendances) ;
• mocking (du LOFI au HIFI) ;
• A/B testing.

Product Designer

Le Product Designer a un rôle plus transverse et va superviser les activités tout au long du process de Design. Il va éventuellement encadrer une équipe composée de différents profils d’UX et UI Designers, plus ou moins spécialisés dans les domaines UX research, interaction design, experience design, UX writing... Attention, spoiler : de nouveaux métiers sont en train de s’imposer.

Vous pouvez vous inspirer de parcours tels que celui de Noémie Catel, actuellement Senior Product Designer chez Algolia et intervenante pour Maestro.

Ou encore, de celui de Pantéa Négui, Product Design Lead chez Heroes Jobs et Headmaster de notre formation en Product Design.

Les compétences soft et hard du Product Designer 💪

En tant que Product Designer (en devenir), vous pouvez constituer votre bagage de compétences avec un mix des soft skills et hard skills suivantes :

Les softs skills

• L’empathie : qui vous donnera la capacité de vous mettre à la place des utilisateurs et de comprendre leurs besoins, attentes, désirs, douleurs, etc.
  

• L’esprit d’équipe et la posture managériale : pour travailler avec votre Product Team dans les meilleures conditions.
  

• La communication orale et écrite : faire passer les bons messages, aux bonnes personnes, au bon moment, c’est hyper important.
  

• La curiosité : qualité indispensable pour continuer à progresser et à innover.
  

• Le pragmatisme : « Less is more », comme le résume si bien Arnaud.
  

• Le mindset agile : vous êtes en parfait accord avec les valeurs de l’agilité, notamment l’adaptation au changement.
  

• La culture produit : vous avez l’habitude d’identifier des problèmes, y trouver des solutions et itérer pour les améliorer.

Les hard skills

• La recherche utilisateur : vous faites des études quantitatives et qualitatives et analysez les résultats pour en tirer des enseignements et définir la problématique à résoudre.
  

• La facilitation : animer des workshops, des brainstormings, susciter l’adhésion des parties prenantes… vous prenez plaisir à animer et créer des synergies entre les participants pour faire émerger la magie de l’intelligence collective.
  

• La conception de produit : qui se matérialise par la réalisation de maquettes de solution en basse fidélité pour représenter le parcours de l’utilisateur.
  

• Le Design d’interface : concevoir des maquettes en haute fidélité en tenant compte de la charte graphique (couleurs, formes, typographie, espaces, structure, animations, etc).
  

• La rédaction UX (UX writing) : quels sont les bons mots pour guider naturellement les utilisateurs au travers des fonctionnalités et leur faire adopter le produit ?

• Le product ownership : création d’une roadmap, rédaction des user stories et priorisation, analyse data-driven... tout cela vous est (ou va devenir) familier !
  

• Le développement : vous avez les notions suffisantes pour comprendre et dialoguer avec vos collègues développeurs.

Cas pratique de Product Design : 5 étapes pour créer une application mobile touristique 📱

‍

Chez Maestro, on aime le concret. Alors pour comprendre ce qu'est le Design, rien de mieux que de l'illustrer par un cas pratique.

L'objectif ? Aider le site Tourdumondiste à créer une application mobile permettant de voyager dans le monde, même pendant la crise du Covid-19.

Pour aboutir à une solution, l’équipe passe par les 5 étapes du processus Design Thinking, que nous allons détailler l’une après l’autre.

1/ Empathie 🗣

Dans cette première étape, l’équipe Design se met à la place des utilisateurs et essaye de répondre à ces questions : qu’ont-ils en tête, que disent-ils du site actuel, quels sont les problèmes qu’ils rencontrent, quelles sont leurs craintes, leurs attentes… ?

Les livrables à produire :

• les guides d’entretiens utilisateurs ;
• l’empathy map ;
• les user personas.

2/ Définition 🤔

La 2e étape consiste à prendre de la hauteur, puis à formuler précisément la problématique, pour finalement s’accorder sur une définition : « Comment peut-on concilier passion pour le voyage et crise sanitaire ? ».

3/ Idéation 💡

Enfin, vient le moment de générer un maximum d’idées de solutions pour répondre au problème préalablement défini.
Les quelques règles à respecter pour un workshop d’idéation efficace sont :

• liberté de parole de chacun des participants ;
• rechercher la quantité d’idées plutôt que la qualité ;
• pas de censure, les idées farfelues sont les bienvenues ;
• on peut dessiner ses idées ;
• on reste focus sur le problème à résoudre ;
• ...

L’équipe retient ensuite les idées les plus pertinentes et adaptées, grâce à des méthodes de priorisation.

4/ Prototypage ✍️

L’objectif de la 4e étape est d’arriver à un prototype de solution. Pour ce faire, l’équipe peut réaliser ces travaux intermédiaires :

• le moodboard d’inspirations ;
• le design system (des exemples de design systems sont disponibles en ligne) ;
• le diagramme de user flow (pour représenter les interactions de l’utilisateur avec le produit) ;
• les wireframes ;
• les mockups.

5/ Boucle itérative : test - amélioration du prototype produit 🔄

Pour finir le cas pratique, l’équipe va transformer les maquettes Figma en une application mobile native avec le génial outil BravoStudio. Mais le travail ne s’arrête pas là ! On fait tester le produit aux utilisateurs-testeurs puis on recueille leurs feedbacks pour améliorer sans cesse le produit…

‍

‍

‍

Empathy map, personas, guide d'interviews, design system, prototypes : ce sont tous des livrables que vous pourrez approfondir dans la formation Product Design ! À l’issue des 8 semaines (en cours du soir et 100% en ligne), vous saurez construire un produit digital en suivant les étapes du Design Thinking et en appliquant les méthodologies et outils qui font référence aujourd’hui. Chez Maestro, on apprend en pratiquant ! Chaque session s’appuie sur des études de cas comme celle que nous venons d’étudier dans cet article. Cela promet d’être passionnant !

‍
>> Postulez maintenant pour rejoindre la prochaine promo <<

* Arnaud Lissajoux est entrepreneur au sein du collectif Poppa et intervenant / Headmaster chez Maria Schools, qui regroupe les écoles Lion et Maestro.