Un user flow (ou flux d’utilisateur) est une suite d’étapes qu'un utilisateur effectue pour atteindre un objectif précis lorsqu’il utilise un site internet, une application, un logiciel…

Le but du user flow est de représenter de façon graphique les différents chemins et actions qu’il est possible d’emprunter et d’effectuer pour la réalisation de cet objectif. Il décrit chaque étape franchie par l’utilisateur, du point d’entrée jusqu’à l’interaction finale.

Prenons l’exemple d’un achat de pantalon sur un site de e-commerce :

L’utilisateur arrive sur la page d’accueil du site

Depuis la page de catégorie il choisit le pantalon qu’il souhaite

Sur la page du produit il choisit sa taille et l’ajoute au panier

Il clique sur son panier pour passer au récapitulatif

Il termine sa commande et est redirigé vers une page de confirmation de paiement

Il s’agit ici d’un user flow très simple avec peu d’étapes et d’actions. D’autres chemins sont également possibles avant d’arriver à la confirmation du paiement.

Une des forces du user flow est de prévoir le chemin de l'utilisateur quand tout ne se passe pas bien ! On anticipe le déroulé idéal mais aussi les cas plus complexes. Reprenons notre exemple d’achat de pantalon. S’il n’y a pas la bonne taille disponible, cela fait emprunter un autre chemin à l’utilisateur en lui proposant de laisser son mail pour être alerté. L’important est d’anticiper tous les cas de figure.

Ok, mais pourquoi on utilise des user flows ?

Cadrer un projet durant la phase de conception

Le user flow intervient lors de la phase de conception d’un produit, avant la réalisation des wireframes. Grâce à lui, il est plus facile d’anticiper toutes les vues à réaliser ainsi que les interactions entre ces dernières.

La mise en place d’un user flow permet un gain de temps conséquent pour leur réalisation. Tout est déjà cadré et défini, il ne reste plus qu’à les produire (ça paraît presque facile dit comme ça).

Le user flow nous permet aussi de nous projeter dans l’utilisation de l’interface et dans sa potentielle complexité. Notre objectif est de la rendre fluide et simple à utiliser. On aide ainsi les utilisateurs à atteindre leur objectif plus facilement et sans frustration. S’appuyer sur les personas du projet pour concevoir un user flow est donc primordial pour être sûr de répondre clairement à leurs besoins.

Il contribue également à la facilitation de la communication et de la compréhension d’un projet au sein d’une équipe, mais aussi à valider le périmètre d’un projet avec le client. Il définit une base sur laquelle tous les membres peuvent s’appuyer et échanger durant toute la conception du produit.

Un user flow bien construit peut permettre d’anticiper les fonctionnalités à développer mais aussi de comprendre plus facilement les objectifs et le fonctionnement d’un produit.

Optimiser des plateformes déjà existantes

Le user flow peut très bien s’intégrer dans une démarche d’amélioration et d’évolution d’un produit. Il sert alors à mettre en évidence les chemins ou les actions qui génèrent de la frustration chez l’utilisateur de par leur complexité notamment.

Il aide ainsi à visualiser les points de décrochage et les étapes peu intuitives qui peuvent décourager l’utilisateur voir le faire abandonner son objectif et quitter le site ou l’application. Une fois ces points de tensions repérés, il est alors plus simple d’apporter des modifications ciblées adaptées aux réalités d’usages des utilisateurs.

L’arborescence et le user flow c’est pareil ?

L’arborescence est le squelette (ou le plan) d’un site ou d’une application. Elle montre la manière dont son contenu est groupé, lié et présenté au visiteur. Elle permet également d’identifier le nombre de pages d’un site web et donc son périmètre.

Elle vise à définir la structure mais aussi à hiérarchiser l’information c’est-à-dire, définir comment il est possible d’accéder aux pages de ce site. Par exemple, pour un site e-commerce le panier sera dans le header, qui lui se trouvera sur l’ensemble des pages du site. L’arborescence n’inclut pas les interactions et les actions que les utilisateurs peuvent effectuer contrairement au user flow.

Arborescence et user flow peuvent donc être complémentaires mais attention à ne pas les confondre !

Si vous ne devez retenir qu’une seule chose sur le userflow, c’est que ce dernier est une représentation graphique de l’ensemble des parcours et des interactions qu’un utilisateur peut effectuer sur un site ou une application.

En interne, il permet un gain de temps important durant la réalisation d’un projet notamment sur l’étape des wireframes. Il fluidifie la communication entre les membres de l’équipe et facilite la validation de la direction du projet avec un client avant de commencer sa conception graphique.

Voilà ! J’espère que le userflow n’a plus de secret pour vous 😉

Peut-être les avez-vous déjà rencontrés sans comprendre à quoi ils servaient. Laissez-moi tout vous expliquer ✌️

Peut-être l'avez-vous déjà rencontré sans comprendre à quoi il sert. Son apparence de carte mentale sans commencement ni fin précise vous a probablement donné le tournis. Pourtant le user flow est un outil UX très puissant dans l’élaboration d’un site, d’une application ou d’un logiciel.

Vous ne me croyez pas ? Laissez-moi tout vous expliquer 👇

Un user flow (ou flux d’utilisateur) est une suite d’étapes qu'un utilisateur effectue pour atteindre un objectif précis lorsqu’il utilise un site internet, une application, un logiciel

J’ai donc fait une rentrée en tant qu’étudiante de troisième année en Bachelor Digital et une comme alternante UX chez Uxer (c’est le début d’une nouvelle aventure au final, car c’est ma première année d’alternance 🥰).

Ces premiers mois m’ont permis de prendre conscience des différences entre enseignement scolaire et réalité du monde du travail.

Pourquoi j’ai choisi d’avoir une alternance ?

L’alternance est un format qui se développe énormément et qui attire bon nombre d’étudiants. Ma nouvelle école propose cette mixité école - entreprise mais elle ne nous l’impose pas. J’aurais pu faire le choix de travailler de mon côté sur des projets personnels, mais non !

Après avoir effectué plusieurs stages, je ne me voyais pas continuer à suivre uniquement des cours théoriques dans une classe. Bien qu’il y ait des exercices et des cas pratiques, nous sommes toujours rattachés à un cadre scolaire et il y a peu de projets concrets.

L’alternance est un excellent moyen d’entrer dans la vie active progressivement. D’acquérir de l’expérience professionnelle et de gagner en confiance dans son travail. Je trouve cela très valorisant de terminer ses études en ayant déjà un certain bagage professionnel.

Grâce à ce format, j’ai pu commencer à me spécialiser dans le domaine et le métier qui me plait (vive l’UX ✨) car pour le moment je n’ai suivi que des études générales (je trouve que c’est une très bonne chose pour démarrer ! Dans le monde du digital qui est très vaste, cela permet d’avoir une vue d’ensemble avant de savoir ce qui nous attire).

Cela fait maintenant deux ans et demi que j’étudie l’UX en cours. Comme pour beaucoup d’apprentissage, tout débute par de la théorie.

J’ai commencé par découvrir ce qu’était l’UX (car oui à ma sortie du lycée je ne savais même pas que ça existait 😅), les enjeux de ce domaine ainsi que les étapes clés d’un projet (entretiens, wireframes, tests utilisateurs…).

J’ai ensuite pu mettre en pratique ces cours dans de nombreux projets d’école. Ce qui est vraiment super pour comprendre les concepts et prendre en main les logiciels !

J’ai ainsi appris les bases de cette discipline, mais depuis quelques temps je me suis rendue compte que je n’apprenais plus vraiment. Je me contentais de refaire encore et encore ce que j’avais appris en première année.

“Comment est-ce possible ?” Me demanderez vous.

Et bien tout simplement car on aborde toujours les mêmes sujets. Les cours sont assez simples et j’ai l’impression de sans cesse revoir les bases, même au niveaux des logiciels. Je pense que cela vient du fait que je suis encore en cursus général et que j’ai changé d’école mais je suis bien triste de revoir des notions de bac+1 en bac+3 snif.

Lors de mon master, qui sera lui spécialisé en UX, je devrais aborder des notions que je n’ai encore jamais vu en cours (j’ai hâte 🤩). De plus, à l’école, nous n’avons pas d’interaction avec un vrai client. On ne nous apprend donc pas forcément à savoir présenter notre travail et à le valoriser.

Alternance et apprentissage par la pratique

Comme dit dans l’introduction j’ai rejoint Uxer en septembre, et depuis mon arrivée j’ai appris énormément de choses par la pratique !

Bien évidemment je ne peux pas me passer d’un peu de théorie. Pour les notions que je ne connais pas encore ou pour tout ce que je ne comprends pas, je peux me tourner vers Romain, UX Designer chez Uxer, qui est toujours prêt à m’aider.

Au départ cela me déroutais un peu. Ce n’est agréable pour personne d’avoir des difficultés pour réaliser une tâche. Mais en essayant et en me trompant au final j’ai énormément appris (l’apprentissage par l’erreur ça marche vraiment bien).

**Chez Uxer, j’ai réalisé certaines missions pour la première fois (coucou le userflow 👋) et j’ai grandement amélioré ma maitrise de Figma !

J’ai pris conscience que l’UX est bien plus complexe que ce que l’on m’apprend à l’école et qu’il n’y a pas une méthode miracle qui marche à tous les coups. Je suis confrontée à de vrais clients qui ont des contraintes, des attentes et des besoins spécifiques. L’idée est donc plutôt d’adapter les méthodes selon le type de projet, son envergure et ses objectifs.

Même si je ne suis qu’alternante le fait de travailler sur de vrais projets me donne la sensation d’avoir des responsabilités, au début cela me faisait peur mais petit à petit je commence à gagner en confiance.

L’école et l’entreprise sont formatrices chacune à leur manière, mais je trouve qu’elles se complètent. Pratiquer sans aucune théorie est assez difficile et ne jamais mettre en pratique ses connaissances est frustrant.

Les cours m’ont constitué une base de connaissances que j’ai décidé d’approfondir par l’alternance.

En tout cas je suis très contente d’avoir cette mixité au quotidien 😃

En septembre 2022, je n’ai pas fait une, mais bien deux rentrées ! Je vous parle de ce que ça m’a appris.

École VS entreprise, de la théorie à la réalité du terrain en UX

Le meilleur logiciel de design de la planète (aka Figma) nous donne la possibilité de créer des composants. Un composant, c’est un élément référent que nous allons créer et que nous allons pouvoir dupliquer sur l’ensemble des maquettes sous forme d’instances. Le fonctionnement est très puissant, si vous apportez des modifications au composant référent, toutes ses instances seront automatiquement modifiées.

Imaginez que vous souhaitiez concevoir un bouton sur votre logiciel de design. Vous allez le créer une première fois, puis le dupliquer partout, là ou vous avez besoin d’intégrer un bouton. Chaque bouton est indépendant et peut être modifié sans impacter les autres.

Reprenons le même exemple en intégrant la notion de composants.

Imaginez que vous souhaitiez concevoir un bouton sur votre logiciel de design. Vous allez créer le bouton une première fois et le convertir en composant, puis le dupliquer partout, là ou vous avez besoin de l’intégrer. Chaque bouton dupliqué est donc dépendant du composant créé initialement. Si je viens rajouter une icône dans mon composant bouton, alors l’ensemble des boutons dupliqués sur la maquette se modifieront automatiquement.

Si on creuse un peu plus dans le fonctionnement d’un composant, on peut voir qu’il est possible de lui assigner des propriétés. Ces propriétés vont nous permettre de personnaliser chaque élément contenu dans le composant. Ainsi, on va associer des propriétés au composant référent, qui vont venir s’appliquer sur chacune des instances et vont donc permettre de les personnaliser en quelques clics.

Reprenons notre exemple de bouton avec son icône. Nous avons ajouté des propriétés à notre composant. Ces propriétés vont permettre de le personnaliser. On peut par exemple définir une propriété texte qui va être liée au texte du bouton, ou une propriété booléenne qui va être lié à l’icône. Ainsi, tous les boutons dupliqués gardent les propriétés du composant initial, mais sont indépendants. On pourra donc afficher l’icône sur ce bouton, la cacher sur un autre, et potentiellement intégrer des textes différents.

Une réflexion qui gravite autour de l’Atomic Design

L’idée de cet article n’est pas de découvrir l’Atomic Design (merci Brad Frost 🙌), mais cette approche fait partie intégrante de notre processus de conception de composants personnalisables.

Cette approche utilise les composants en tant qu’éléments vivants et évolutifs, et peut s’apparenter à vos cours de chimie au lycée ! Pour vulgariser et essayer d’être le plus simple possible, l’idée finale est que chaque élément puisse être combiné à un autre afin de fonctionner.

On part donc de la création de simples composants que l’on va appeler les atomes, que nous allons assembler entre eux et convertir en composant pour créer des molécules, que nous allons pouvoir fusionner entre elles, toujours sous forme de composants afin de créer des organismes, et toujours dans le même processus, arriver à la création de templates et de pages. On part donc des composants les plus petits que l’on va combiner jusqu’à créer des composants plus gros, puis créer des vues.

Reprenons, encore et encore, l’exemple de notre bouton et son icône. Si on suit cette approche, on peut imaginer que le bouton est une molécule, composée de plusieurs atomes assemblés : le texte et l’icône. Puis nous allons créer un bouton primaire et un secondaire qui ensemble vont former un organisme. Vous avez compris le processus !

Tout ça pour vous dire que nous avons créé notre kit de composants pour wireframes ! 🎁

Sur la base des deux points évoqués précédemment, nous avons donc cherché à lister l’ensemble des éléments récurrents d’un projet à l’autre, dans leur forme et dans leur fonction. L’objectif est simple, prendre du temps à les identifier et à les créer, pour être plus productif sur nos projets et consacrer notre de temps sur des parcours plus complexes.

🚨 Attention, nous parlons bien ici d’un kit utilisé sur nos wireframes qui nous permettent de concentrer sur la structure et le contenu d’un produit, et non sur l’UI Design où Manu préfère partir d’une feuille blanche et laisser exprimer sa créativité.

Si ce dernier en est à ses prémices, il est amené à évoluer continuellement dans les mois à venir, au fil des projets, de nos observations, de nos besoins et de nos apprentissages. Nous voyons ce kit comme évolutif, à partager, et personnalisable autant que possible.

Selon nous, il existe de nombreux avantages à créer son kit de composants. On a décidé de vous lister les plus évidents, selon notre expérience :

Gain de temps : imaginez le confort de lancer un nouveau projet et d’avoir son espace prêt à l’emploi. Pas besoin de refaire - encore et encore - l’ajout de styles comme les couleurs, tailles de typo, grilles, etc… Vous n’avez plus qu’à vous exprimer et concevoir votre maquette.

Mises à jour régulières : ce kit est mis à jour continuellement. Un nouvel élément, un nouveau fonctionnement ? Nous l’intégrerons au fil des projets grâce à nos apprentissages et notre expérience. Aujourd’hui composé d’éléments, nous avons la possibilité demain d’y ajouter des templates de pages assez classiques et d’arriver sur un espace assez conséquent.

Ne pas réinventer la roue  : notre métier ne consiste pas à réinventer la roue. Un champ de formulaire est un champ de formulaire, un bouton est un bouton. Certes, ils peuvent avoir des propriétés différentes, des variantes, mais dans le fond, ils vont réaliser la même action sur l’ensemble de nos projets. Si vous concevez 10 sites avec des formulaires, sur vos wireframes, les champs des 10 sites fonctionneront de la même manière, donc autant ne les créer qu’une seule fois et les réutiliser.

Souplesse et adaptabilité : l’ajout des propriétés de composants par Figma permet de personnaliser chaque instance d’un composant. Une modification à apporter, il suffit de modifier le composant principal, de lui affilier des propriétés, et hop, toutes ces instances sur l’ensemble des pages en hériteront.

Nous vous partageons très prochainement la publication de notre kit sur Figma Community, restez à l’écoute ⏳ Cet article est le premier d’une série axée sur les composants, les propriétés, l’Atomic Design et l’évolution de notre kit de composants pour wireframes.

Créer des composants réutilisables et personnalisables pour accélérer la phase de wireframing

Et si nous pouvions gagner du temps sur la création de nos wireframes, en créant des composants réutilisables et personnalisables ?

Gagner en productivité en créant un kit de composants pour wireframes et Atomic Design

Gagner en productivité en créant un kit de composants pour wireframes

Un wireframe est une maquette qui va venir concrétiser toute la phase de recherche utilisateur et d’idéation réalisée en amont (voir notre article sur la recherche utilisateur). Cette maquette va permettre de formaliser la structure et les fonctionnalités identifiées et qui répondent aux besoins utilisateur et aux problématiques identifiées.

En phase de wireframes, on se concentre sur la structure du produit ainsi que ses fonctionnalités et non sur l’esthétisme et l’identité. Pour visualiser concrètement, imaginez les wireframes comme des premiers plans d’architecte avec les mesures et la structure si vous vouliez faire construire votre maison.

Il existe différents niveaux de réalismes dans la réalisation de wireframes.

Ces maquettes peuvent prendre plusieurs formats, du simple croquis sur une feuille à des maquettes réalisées sur des logiciels de design. En général, ces maquettes n’intègrent pas de pictogrammes, couleurs ou typographies spécifiques. Le contenu y est également en général assez pauvre, on peut le remplacer par des formes qui modélisent l’emplacement du texte ou par du Lorem Ipsum. Ces maquettes sont utiles si le projet manque de maturité ou si l’on veut très rapidement créer une première version pour itérer en équipe en fonction des apprentissages. 

Ces maquettes, la plupart du temps réalisées sur des logiciels de design (poke Figma), permettent de représenter la structure et les fonctionnalités du produit de la manière la plus fidèle possible. A cette étape, on reste sur un niveau de gris mais on y intègre un maximum de contenus réels. Ces maquettes sont aussi souvent interactives, pour permettre de les tester auprès d’utilisateurs dans un contexte le plus réaliste possible. Certains éléments graphiques peuvent être intégrés pour donner du contexte et plus de réalisme à la maquette. 

D’accord, mais à quoi ça sert dans la phase de conception d’un produit ou site internet ?

On peut identifier de nombreux avantages à passer par des wireframes, en fonction de la maturité du projet et des enjeux définis en amont du projet. Voici les avantages que nous apportent les wireframes sur nos projets :

Donner vie et concrétiser des idées et solutions imaginées

Il faut donner vie aux idées générées. Les wireframes sont la solution idéale pour les formaliser, les communiquer aux équipes et voir leur pertinence. Avant la conception des wireframes, tout est encore possible en termes de fonctionnement, alors on donne un aspect visuel aux solutions qui nous semblent les plus adaptées pour pouvoir itérer et aboutir à notre vision idéale.

Concevoir la structure et le fonctionnement du produit ou site internet

Les wireframes vont permettre de structurer le produit et de créer les différentes fonctionnalités. Créer la solution visuelle d’une fonctionnalité permet de la partager aux équipes et au client. Le client peut enfin visualiser comment est ce que ça peut fonctionner. Il est alors plus simple de le tester et de pouvoir échanger à son sujet, puis d’itérer sur différentes versions.

Se focaliser sur le fonctionnel plutôt que l’esthétique

L’esthétisme et l’identité, c’est beau, décisif et primordial dans la création d’un produit ou sa refonte. Alors, oui, nous sommes d’accord, cela a un impact direct sur l’expérience vécue par l’utilisateur. Mais à ce stade, nous allons d’abord nous focaliser sur le fonctionnel : “comment est-ce que l’on peut structurer l’information ? “, “comment est ce que cette fonctionnalité doit se comporter ?”. On reste donc très simple sur nos maquettes, avec de simples niveaux de gris en couleurs, sans éléments graphiques, gardons à l’esprit que nous concevons d’abord un produit simple d’utilisation et utile.

Préparer de potentiels tests utilisateurs pour valider le produit

Les tests utilisateurs sont essentiels en Design UX. Ils permettent de valider les parcours créés, mais aussi d’identifier comment les utilisateurs vont interagir avec les différentes fonctionnalités, comment ils vont trouver telle ou telle information. L’UI peut jouer un rôle primordial, car les gens aiment les choses belles, mais les wireframes permettent de se focaliser sur la structure et l’aspect fonctionnel et d’organiser des tests rapidement sans devoir passer par des mois de design & de développement.

Il est préférable de partager aux équipes techniques les solutions formalisées à travers les wireframes avant de passer à la suite du projet. Ainsi, nous pouvons anticiper la faisabilité, les potentielles difficultés et contraintes à prendre en compte en fonction des technologies choisies par exemple, et ainsi itérer rapidement pour avoir une solution viable et réalisable. Cela permet également aux développeurs de visualiser le comportement des fonctionnalités plus tôt dans le projet, pour que des choix pertinents puissent être fait. Vous l’aurez compris, notre objectif n’est pas de créer des éléments non-réalisables en développement.

Vous souhaitez savoir comment on procède chez Uxer pour réaliser nos wireframes ?

Nous créons l’ensemble de nos maquettes sur Figma ❤️, plateforme de design conçue pour le web. Nous proposons à nos clients des prototypes haute fidélité, afin d’assurer une qualité de travail, une projection maximum du client sur son produit ou site internet, c’est-à-dire avec les contenus réels et une version réaliste du produit dans sa structure et son fonctionnement.

Lorsque l’on commence les wireframes, on se penche systématiquement sur les vues les plus complexes ou les plus importantes en termes d’objectifs du client. Il faut savoir qu’une fois la solution trouvée et formalisée, il sera facile de décliner sur d’autres vues plus simples, plutôt que de commencer par des vues simples et se retrouver bloqué à la moindre complexité, car les maquettes créées ne s’adaptent pas.

On travaille toujours nos wireframes sur la base de contenus réels. STOP AU LOREM ! Le Lorem, c’est beau, et magique, ça remplit des sections de texte sans se soucier du vrai contenu. Le problème est que lorsque le client va vous fournir le texte réel à mettre en place, vous vous rendrez compte que l’espace que vous aviez prévu et la mise en page ne s’adaptent plus, car il y a 2 fois ou 3 fois plus de textes. 🤒

Enfin, tous nos wireframes sont interactifs, c’est-à-dire que vous pouvez y naviguer, dans chaque onglet, sur chaque fonctionnalité, comme si le site était réel sauf qu’il s’agit de maquettes (mais chut, on y voit que du feu !!). Il n’y a rien de mieux pour faire tester au client et qu’il se rende compte, ainsi que pour rendre des tests utilisateurs les plus fidèles possibles.

La conception de maquettes peut s’étaler sur plusieurs semaines. Il est important de garder une communication régulière avec le client pour qu’il puisse suivre l’avancé et les choix réalisés sur les maquettes. Ces allers-retours peuvent être longs et assez chronoghages par mail, quand il s’agit de demander des changements ou des questions sur les maquettes. Nous utilisons donc le système de commentaire sur Figma qui nous permet d’échanger très rapidement sur des éléments très précis des maquettes et de prendre des décisions rapides et efficaces.

Aller plus loin et passer au niveau supérieur

Dans un prochain article, nous vous parlerons du Kit Wireframes que nous avons créé sur Figma. Se basant sur la création de composants, il nous permet de gagner du temps sur des éléments récurrents et obligatoires, mais reste assez souple pour pouvoir les modifier et en ajouter de nouveaux. Stay tuned ! ✌️

Quoi ? Pourquoi ? Comment ? On vous parle de l'étape de conception des wireframes dans nos projets

Le terme ne vous parle peut-être pas, ou vous en avez entendu parler, mais vous vous demandez clairement de quoi il s’agit. Et pourtant, il s’agit d’une étape très importante dans le processus de création ou de refonte de votre produit ou site internet. 

On vous dit tout sur la puissance des wireframes

L’UX Design occupe une place très stratégique aujourd’hui dans la conception produit. Si cette pratique est souvent intégrée dès le début du projet, nous observons qu’elle s’arrête souvent avant sa sortie et qu’elle est utilisée en one shot, en usage unique.

Honnêtement, ça nous attriste. Quel dommage de ne pas voir l’intérêt ou de ne pas mettre les moyens d’intégrer l’UX Design comme un des pilier stratégique sur du long terme, pour accompagner et faire évoluer le produit durant toute sa vie.

Voilà ce qu’il se passe aujourd’hui.

L’UX Design comme porte d’entrée de la conception de votre produit

L’UX Design est à la mode depuis quelques années maintenant, tout le monde veut faire de l’UX Design dans la conception de son produit. On ne va pas dire le contraire, nous, on trouve ça génial !

👀 Commencer la conception de son produit par comprendre les utilisateurs, leurs besoins et problématiques, réduire les incertitudes et valider un maximum d’hypothèses avec des insights qualifiés.

🎨  Réaliser des ateliers de génération d’idées de solutions, des plus simples au plus poussées et de déterminer comment nous allons les concrétiser via des maquettes.

⚡️ Tester ce que nous avons conçu avec les utilisateurs finaux pour valider nos choix de conception et identifier les éléments qu’il faut encore améliorer avant de sortir le produit.

Le produit est sorti, on est prêt pour la suite.

“Comment ça la suite ? Le produit est sorti, plus besoin d’UX maintenant” 🤷🏽‍♂️

L’erreur de la conception UX en one shot

En tant qu’UX designer, mon rôle est de concevoir et de garantir la bonne “expérience” des utilisateurs sur un produit. Pour être plus concret, il s’agit de concevoir des produits utiles et faciles à utiliser.

Malheureusement, dans la majorité des cas, nous recherchons, concevons et lançons le projet, puis plus rien. Fin de l’histoire. ❌

Le problème est là ! Nous sommes souvent amenés à constater que l’UX Design est vu et pratiqué comme une porte d’entrée dans la conception d’un produit. Or, ce ne sont pas de bonnes habitudes, la conception doit être itérative et doit guider le produit durant toute sa vie, l’accompagner dans son évolution et dans ses améliorations.

Plutôt que de voir l'UX design comme une étape importante dans la conception d’un produit, ne faudrait-il pas l’intégrer comme une vision stratégique qui pourrait permettre de le faire évoluer tout au long de son existence via des données qualifiées et fiables, évoluant avec le moins d’incertitudes possibles ?

Prenons un exemple avec le leader mondial du streaming musical : Spotify.

Lors de sa sortie en 2006, le produit ne ressemblait à ce qu’il est devenu aujourd’hui. Il a constamment évolué, par itérations auprès des utilisateurs. Prendre leurs feedbacks, mettre en place de nouvelles solutions, comprendre les contextes d’utilisation, tester, et itérer. Voici la démarche de Spotify pour faire vivre son produit.

Voici des exemples simples et concrets. Après des années de recherches et de tests, Spotify a décidé de garder son thème sombre. Ils proposent également une interface dédiée à une utilisation lors de la conduite. Enfin, tous les utilisateurs peuvent accéder à une rétrospective de leur année sur Spotify, et cette dernière fait beaucoup parler d’elle. Ces éléments ne sont pas conçus par hasard. Ils sont le fruit des nombreuses données récoltées auprès des utilisateurs et de nombreuses années d’itérations.

Intégrez l’UX comme un des piliers stratégique dans la conception et la vie de votre produit

Après la lecture de cet article, vous n’avez plus le choix.

Projetez-vous sur le long terme, avec une vraie vision produit et évitez de concevoir votre produit en payant une prestation en UX et en disant “bye bye merci” une fois celle-ci terminée.

Un produit ça vit, ça évolue, ça s’écoute, ça s’observe, ça s’adapte et s’itère, ça se teste et ça se comprend. Ayez en tête que les utilisateurs de votre produit ont un intérêt pour ce dernier et que leur souhait principal et d’avoir un produit simple et facile à utiliser, qui leur amène des solutions et répondent à leurs besoins sans se prendre la tête.

On veut vous pousser à aller tester des hypothèses sur des choix stratégiques, des choix de conception auprès de vos utilisateurs finaux et ne pas d’avancer trop vite au risque de se tromper et de devoir tout refaire.

On veut vous pousser à intégrer vos utilisateurs dans vos ateliers, dans vos choix et décisions, car leur vision est plus que décisive, et leurs idées sont toutes bonnes à exploiter.

On vous conseille de vous entretenir et d’observer vos utilisateurs afin de comprendre leurs habitudes et leurs comportements, d’identifier de nouveaux besoins ou nouvelles problématiques qui feront évoluer votre produit.

L’UX, c’est de la recherche, c’est de la conception mais c’est aussi de la stratégie, essentielle pour des produits qui fonctionnent 🔥

Si vous avez un projet ambitieux, des problématiques complexes à résoudre ou simplement l’envie d’échanger à ce sujet, n’hésitez pas à venir discuter avec nous 👋

Vous reprendrez bien un peu d'UX après la sortie de votre produit ? 🥃

Comment aller plus loin que la mode de l'UX en début de projet et continuer à le faire vivre dans le temps ?

Design, code & vied’une agence bordelaise