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 ?

Nous lançons la refonte du site Wineandco, référence dans la vente de vins sur internet. Nos émotions sont fortes, l’excitation d’un challenge ambitieux, des enjeux énormes et le bonheur de rencontrer des équipes motivées.

Pour vous donner un peu de contexte, nous avons accompagné Wineandco sur un audit concurrentiel, mais aussi sur une importante phase de recherche utilisateur, dans le but d’aller rencontrer les différents profils utilisateurs, de redéfinir leurs besoins, attentes et d’identifier leurs problématiques.

En parallèle, conscient des enjeux de référencement naturel (SEO) essentiels sur un site e-commerce, les équipes de Wineandco ont décidé de rebooster leur stratégie SEO avec 209 AGENCY, les meilleurs. C’est le début d’une aventure commune (poke Guillaume et Laure ❤️) !

Des méthodes différentes pour des objectifs communs

“Wineandco est un caviste généraliste, on veut que les gens viennent aussi pour nos conseils et non simplement pour le produit”, “On veut moderniser l’image du site tout en gardant ses bonnes performances actuelles”, “On veut de la visibilité sur les moteurs de recherche sur des intentions précises”, “On veut un site simple, agréable, avec des parcours fluides”, “On veut augmenter les paniers moyens sur le site et augmenter le nombre de ventes”, “On veut améliorer l’expérience de navigation et d’achat des utilisateurs”.

Nos objectifs communs étaient clairs, y'avait plus qu'à !

Lorsqu’en recherche utilisateur (UX) nous cherchons à connaître les utilisateurs, leurs besoins, leurs problématiques et comportements en contexte, le SEO va lui garder ces mêmes objectifs en tête avec l’objectif de concevoir pour les moteurs de recherches et assurer le bon positionnement du site.

Mais alors, faut-il choisir entre les recommandations UX et les recommandations SEO ?

“Je pense que la question, elle est vite répondue !”, dixit JP 🤭

Parfois, nos recommandations vont dans le même sens et nous permettent d’affiner un élément sur le site afin qu’il soit adapté aux utilisateurs et comprit par les moteurs de recherche. D’autres fois, c’est un peu différent.

Pour chaque recommandation qui implique des mises en place de solutions différentes, qu’elles soient UX ou SEO, nous devons les repositionner face aux objectifs à atteindre, mais aussi face à la stratégie visée par le client. Et ainsi nous trouvons des solutions communes dans le but d’optimiser le référencement tout en optimisant l’expérience utilisateur, en répondant aux points les plus critiques.

C’est vrai après tout, quel est l’intérêt de concevoir la meilleure expérience utilisateur possible, sur un site qui sera introuvable sur les moteurs de recherche ? Et quel est l’intérêt de positionner son site en premier sur Google si ce dernier propose une mauvaise expérience utilisateur ? En réalité, UX et SEO, c’est bel et bien une histoire de collaboration 🤝.

Et concrètement, comment ça s'est passé pour ce projet ?

Je vais essayer de vous partager des exemples très simples, des cas concrets que nous avons rencontré sur ce projet.

Notre recherche utilisateur a mis en lumière le besoin pour les utilisateurs de naviguer dans des menus très simples, qui amènent directement sur une catégorie de vin. Côté SEO, il fallait donner plus d’entrées aux internautes afin de cibler les intentions de recherche des internautes sur des catégories spécifiques et de positionner ces pages sur les moteurs de recherche. Nous avons donc trouvé une solution commune qui permet aux utilisateurs d’accéder directement aux grandes catégories de vins tout en pouvant naviguer plus en profondeur vers des pages plus ciblées.

Avec une cave de plus de 5 000 références, il était évident que les utilisateurs puissent filtrer leurs recherches. Pour se positionner sur un maximum de pages en SEO, l’idée était de faire des filtres additionnels, mais en ne laissant à l’utilisateur que le choix d’un filtre par catégorie de filtre. Par exemple, un visiteur qui voulait filtrer par région ne pourrait que filtrer sur Bordeaux et non sur d’autres régions en même temps ! Pourquoi ? Pour pouvoir créer une page spécifique Vins de Bordeaux et la référencer sur les moteurs de recherches. Concernant l’expérience utilisateur, nous avons rapidement compris que les filtres utilisés étaient différents selon le niveau d’expertise des visiteurs. Un visiteur novice ne cherche pas forcément un vin précis, mais un vin qui va correspondre à un ou plusieurs critères. Nous avons donc décidé d’optimiser l’expérience utilisateur et de laisser la main libre aux utilisateurs sur leurs filtres de produits.

Les entretiens utilisateurs nous ont permis d’identifier les grandes thématiques de recherche de produits sur le site. Pour proposer de nouveaux contenus, souvent plus précis ou des sujets parallèles aux utilisateurs, on intègre du maillage vers d’autres pages sur le site. Il est stratégiquement intéressant de mailler vers des pages à fortes intentions de recherches. Les données issues du SEO et de la recherche utilisateur nous ont permis de déterminer les grandes catégories. Là ou nous proposions aux utilisateurs connaisseurs de trouver de nouveaux produits par régions, appellations ou millésimes, nous voulions aussi stratégiquement proposer de nouveaux produits à des utilisateurs plus novices, qui cherchent à découvrir le vin autrement, au travers d’occasions ou par son goût.

Deux expertises en même temps, comment on s’organise ?

Si vous ne voulez pas vous retrouver à refaire plusieurs fois le même travail, il est certain qu’il faut bien s’organiser. Concrètement, chez Uxer, nous établissons un planning projet commun avec 209 AGENCY lorsque nous nous lançons sur les mêmes projets.

Ce planning commun nous permet de suivre le projet et d’anticiper les étapes de chacun, les potentiels pré-requis et d’avancer main dans la main pour viser ce fameux objectif commun. Comme vous pouvez le deviner, nous nous retrouvons donc très souvent en commun sur de nombreux livrables afin de faire les bons choix de conception.

Ça semble si simple sur la papier, et pourtant ! Voici une petite anecdote concernant notre collaboration UX & SEO sur le projet Wineandco. L’organisation du planning a été un peu chamboulée car nous n’avons eu d’autres choix que d’intégrer le SEO après... 10 semaines de conception, après la user research, après les ateliers de conception et en plein milieu des wireframes ! Il n’y avait pas d’autres solutions possibles, donc on s’est adapté 💪.

Nous avons su rester agiles et nous avons partagé nos recherches qualitatives et quantitatives avec l'agence 209 afin de les intégrer le plus rapidement possible au projet et qu’ils puissent établir des recommandations sur la base des décisions déjà intégrées, ou pour qu’ils viennent nous challenger sur certains points 👌.

Rassurez-vous, la collaboration a été une réussite et le site est une bombe 💣 ! Nous sommes impatients de vous montrer le résultat ainsi que le processus de conception, sujet de notre prochaine étude de cas !

Alors pensez-y maintenant, entre SEO et UX ce n’est pas la guerre ! Vous vous demandez toujours comment choisir entre des recommandations SEO ou UX ? La question ne se pose pas. Demandez-vous plutôt comment arriver à une solution commune qui servira les mêmes objectifs finaux.

Quels choix faire et quelles recommandations suivre quand deux mondes s'affrontent ?

Pour se démarquer de la concurrence et garder le monopole acquis grâce à une expérience de plus de 30 ans, Ayming a souhaité offrir à ses clients de nouvelles fonctionnalités ainsi qu'une application web retravaillée, attirante et ludique adaptée aux besoins et attentes de ses utilisateurs finaux. 🔥

Ayming a donc fait appel à nos services afin de :

Repenser l'expérience utilisateur de leur solution avec l'intégration d'un nouveau module et donc de nouvelles fonctionnalités.

Les accompagner dans la refonte UI complète de leur application en retravaillant l'interface et ses éléments.


Dans cet article, nous allons faire un focus sur la Stratégie UX mise en place pour ce client, sachant que la contrainte principale pour ce projet était le délai relativement court que nous avions à respecter.

Nous nous sommes orientés vers le Lean UX, une approche rapide et efficace dans laquelle "vitesse" et "itération" sont les maîtres mots. Nous avons couplé cette méthodologie à de la recherche utilisateur, pour appuyer nos décisions sur de solides insights qualitatifs. 

Pourquoi avons-nous proposé ce process à Ayming ?

On peut voir certains avantages à travailler en Lean UX. C'est une méthode qui reste rapide, même couplée à de la recherche utilisateur. On va vite car on se base en partie sur des hypothèses issues de feed-backs potentiels, d'observation ou d'expérience. Je pense que les deux plus gros avantages sont le fait de rapidement arriver à un prototype final, prêt à être testé avec des utilisateurs finaux et donc de rapidement pouvoir le faire évoluer. L'avantage de ce cycle est également que toute l'équipe de conception peut avancer sans être dépendante d'une autre. Il faut imaginer qu'on vous livre quotidiennement plusieurs petits morceaux au lieu de vous en fournir un seul après des mois de conception. 

👉  Le lean UX n'est pas un ensemble de règles, mais une approche à adopter.

Le Lean UX est un processus de conception collaboratif et itératif permettant d'intégrer le design d'expérience utilisateur avec des approches de développement Lean et Agiles. Il permet par exemple de rapidement créer un MVP (Minimum Viable Product) sur la base d'hypothèses, puis de le mettre sur le marché pour évaluer sa pertinence et la valeur apportée aux utilisateurs.

Chez Ayming, les équipes étaient disponibles sur plusieurs jours, l'idéal pour organiser des sessions d'ateliers collaboratifs 🚀. L'équipe était formée d'experts dans divers domaines : directeur de produit, directeur commercial, consultants, développeur, cheffe de projet, designer UI et moi-même, designer UX en tant que facilitateur. Le lieu de passation était à l'agence, dans nos locaux, que nous avions agréablement aménagés afin que tout le monde se sente un maximum à son aise et se sente prêt à libérer sa créativité et ses idées. 

Avant de commencer, nous avons réalisé une session d'échange, de prise de connaissance approfondie de l'existant, de compréhension du métier et des travaux déjà menés en recherche utilisateur (Diagramme d'affinité & personas). 

Nous avons échangé sur le savoir de chacun, des potentielles idées de certains, des contraintes techniques à prendre en compte et la vision à long terme de tous. Il s'agissait d'une discussion ouverte où tout le monde était invité à parler, un icebreaker efficace autour d'un café croissant qui nous as mis en conditions ! 🍫

Aligner l'équipe sur une vision commune : L'énoncé de problème

Avant de débuter les ateliers et suite aux retours de la recherche utilisateur, il est important de définir la problématique principale à résoudre. Pour cela nous avons créé ce que l'on appelle l'énoncé de problème.

Ce dernier permet de mettre le produit en face de ses objectifs, de voir les objectifs non atteints et les potentiels effets négatifs que cela peut apporter à l'entreprise. Pour arriver à un énoncé de problème efficace, nous devons nous poser la question suivante :  comment résoudre ces problèmes de telle sorte que les utilisateurs soient plus performants sur des critères que l'on pourra mesurer ? 🤔

Ce premier atelier consistait à créer des suppositions dans le but de répondre à l'énoncé de problème définit précédemment. Pour information il en existe 4 types : 

Outcomes commerciaux : Quels résultats & conséquences attendons-nous pour l'entreprise ?

Utilisateurs : Qui sont nos utilisateurs ?

Outcomes utilisateurs : Quels résultats et objectifs veulent atteindre nos utilisateurs ?

Fonctionnalités: Avec quelles fonctionnalités les utilisateurs parviendront-ils à réaliser leurs outcomes ?

Ces suppositions ont été créées par de courtes sessions de brainstorming, dans lesquelles on partage des idées et on confronte certaines phases de divergence en convergentes. Le résultat final est un mur de suppositions. Nous en avons profité pour y ajouter nos données issues de la recherche utilisateur afin d'amené des données réelles et qualitatives aux données supposées par les équipes et déjà avoir une vision plus fidèle de la réalité de nos suppositions. Avant de passer à la phase d'assemblage des suppositions, nous avons priorisé les outcomes commerciaux et classé les outcomes utilisateurs par thématiques en équipe. 

Le Lean UX permet donc de créer des suppositions assez rapidement. L'intérêt de ces suppositions et qu'elles vont être le socle de construction de nos hypothèses.  

Lorsque les outcomes commerciaux sont priorisés, on les place dans un tableau d'hypothèse. Ce tableau d'hypothèse va nous permettre d'identifier et de formaliser les hypothèses de manière ludique et visuelle, sans trop se compliqué la tâche, assez naturellement. 📊

Création et priorisation des hypothèses

Après avoir rempli notre tableau d'hypothèses, il était très facile de les identifier et de formaliser sur des post-its. Pour les assembler, rien de plus simple. Il faut savoir qu'une hypothèse ne peut contenir qu'un seul outcome commercial, un ou plusieurs utilisateurs, un seul outcome utilisateur pour une seule fonctionnalité.  

Une hypothèse prend la forme suivante "Nous allons obtenir [outcome commercial] si l'utilisateur [utilisateur] peut obtenir [outcome utilisateur] avec cette fonctionnalité [fonctionnalité]. 

Sur 2 ateliers de plusieurs heures, nous avons formalisé 40 hypothèses ! 💣  C'est donc 40 fonctionnalités supposées répondre à la problématique. Nous avions donc 40 hypothèses à traiter afin de concevoir le nouveau module dans son ensemble. Hors, ce n'est pas l'objectif attendu, nous devions classer par priorités ces hypothèses afin de déterminer lesquelles étaient les plus importantes et intégreraient en premier lieu le MVP. 

Pour prioriser ces hypothèses, nous avons utilisé une matrice de priorisation des risques. Il s'agit d'une matrice comme il en existe une nombreuse ! Nous avons identifié les objectifs les plus important, en choisissant de prioriser les hypothèse en fonction de leur risque (combien cela peut-il nous coûter si nous nous trompons sur cette hypothèse ?) et leur valeur potentielle pour l'utilisateur et l'entreprise. Plus les hypothèses sont risquées et amènent potentiellement de la valeur, plus il faut les tester en priorité afin de rapidement apprendre et les valider. Les hypothèses non définies comme prioritaires seront intégrées plus tard dans le mvp et sont priorisées dans un backlog.

Ces ateliers réalisés dans un processus Lean UX nous ont permis de déterminer des hypothèses de fonctionnalités permettant l'intégration du module de gestion des actions et plan d'actions priorisé très rapidement. 

Le processus nous a permis d'économiser des mois de réflexion en créant un MVP que l'on peut directement tester. Après livraison du design UI et le développement effectué, nous pourrons mesurer le succès en testant notre MVP auprès d'un panel d'utilisateurs pour apprendre de chaque hypothèse et valider les étapes futures. 

Concevoir rapidement, tester et itérer, comment le Lean UX s'adapte aux contraintes et permet de rapidement développer son produit ?

Ayming nous a contacté pour les accompagner dans la refonte et l'évolution de leur application mobile de pilotage des risques professionnels, de la sécurité & de la santé au travail. Comment le Lean UX nous a-t-il aidé à concevoir rapidement, tester et itérer pour développer rapidement leur produit ?

Comment adapter une stratégie de conception centrée sur l'utilisateur en respectant des contraintes de temps et des besoins très rapide d'évolution du produit ? Le Lean UX y répond parfaitement et on s'en est inspiré !

Conception, tests & itérations : ce que le Lean UX nous a apporté 

Design, code & vied’une agence bordelaise