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

En mars 2019, comme la grande majorité des entreprises, nous nous sommes organisés en full télétravail afin de respecter les consignes gouvernementales. Puis le temps passant, nous nous sommes habitués à cette organisation, ”confort” diront certains, et avons donc maintenu le télétravail un certains temps.

Cependant, cela ne convenait pas à toute l’équipe. Mais paradoxalement, nous ne nous voyions pas revenir à 100% en présentiel à l’agence, même si nos locaux sont top et les collègues super sympas (enfin certains plus que d’autres 😉).

De plus, les membres de l’équipe avaient évolué personnellement pendant cette période COVID, achetant des maisons à plusieurs 10aines de km de l’agence, fondant une famille, ayant trouvé l’amour…Tout le monde avait construit sa vie personnelle en tenant compte de cette nouvelle organisation et ces contraintes qui avaient duré pendant plusieurs mois.

Malgré tout, il fallait trancher et trouver une nouvelle organisation interne comme le 100% télétravail n’avait pas trouvé une adhésion collective (et oui, on se manquait ❤️).

Quelle décision prendre et comment la prendre ?

Ce n’est pas évident de prendre une décision seule sur la meilleure organisation à adopter tout en tenant compte un maximum des contraintes et souhaits de chacun : soit je tranchais, au risque d’imposer une organisation interne sans obtenir d’adhésion collective, soit je faisais travailler mes méninges et trouvais une autre solution, plus collaborative.

J’ai sondé auprès de connaissances et autres “managers” et les réponses étaient souvent les mêmes : ils étaient soit pour le télétravail, soit contre le télétravail mais ne proposaient pas vraiment d’alternatives…

Chez Uxer, on prône le collaboratif, le participatif et l’humain, j’ai donc finalement décidé de monter un atelier UX sur cette question afin de soulever toutes les problématiques remontées par l’équipe pour y apporter des solutions tous ensemble (j’ai pu m’inspirer des pratiques UX de notre Designer UX, merci Romain 🙂.)

Après avoir réalisé cet atelier UX  sur la problématique du télétravail, nous avons réussi à trouver une alternative qui convienne à tout le monde 🙂 :

Pourquoi avoir fait le choix d’être plus en télétravail qu’en présentiel ?

Plutôt que de répondre à cette question, je vous laisse découvrir les avantages et inconvénients du télétravail qui ont émanés de cet atelier et surtout, les solutions que nous avons mises en place pour arriver à cet équilibre 🙂 En lisant ce bilan, vous comprendrez ;)

👍 Quelques points positifs du télétravail

Ne pas être dérangé par le bruit ambiant ou les personnes à côté

Pas de perte de temps et d’argent dans les transports, moins de fatigue

Certaines personnes travaillent plus 👨🏻‍💻

Une partie de l'équipe esquive le virus 🦠

👎 Quelques inconvénients du télétravail

Moins bonne fluidité dans la communication & dans la production

Démotivation, solitude, perte de lien social

Perte de la bonne entente et de la cohésion interne. Chacun reste chez soi et on perd cette osmose

Moins de réactivité entre chaque personne

Pas le bon matériel pour bien travailler : pas de second écran, chaises...

Peut être dérangé ou déstabilisé par des taches personnelles ou par des personnes de son entourage 😸

Difficile de débuguer à deux et de recetter

💡 Solutions mises en place pour palier à ces soucis

Déplacer les réunions internes de planification de sprint à des jours où nous sommes en télétravail pour favoriser la production en équipe les jours en agence

Lister le matériel manquant chez soi pour que l’agence puisse équiper chaque membre afin d’avoir un bon confort

Maintenir le présentiel en agence toutes les semaines, entre 2 et 3 jours

Faire des points quotidiens plus détaillés lors desquels on explique ce qui nous a pris plus de temps que prévu et pourquoi

Mettre en place un Discord d’agence pour mettre en place des salons et mieux communiquer quand nous sommes en télétravail

NB : malgré la majorité de la semaine en télétravail, nous arrivons toujours à maintenir notre productivité et à finir nos sprints 😉

Comment la pandémie mondiale a révélé l’intelligence collective de notre management ?

Aujourd’hui, on parle d’accessibilité versus créativité, de cohérence dans nos interfaces, de taille, de forme et de couleur.

Toutes ces petites choses qui peuvent sembler être des détails, mais qui avec de l’expérience et mises bout à bout permettent en les prenant en considération de devenir un meilleur designer et de créer des produits plus efficaces, plus accessibles ou plus simplement : de meilleurs produits.


L’accessibilité est plus importante que la beauté

L’accessibilité est un sujet qui prend de plus en plus d’importance dans le digital et à raison. Cela regroupe un ensemble de règles et d’éléments à mettre en place afin que votre produit soit accessible au plus grand public possible et notamment aux personnes atteintes de handicap (qu’il soit visuel, auditif, moteur, etc.).

Mais qui dit accessible ne veut pas pour autant dire morne et ennuyeux ! Le challenge est là : réussir à conserver sa créativité en gardant en tête la lisibilité des informations que l’on affiche. Toujours penser : “est-ce qu’une personne avec une mauvaise vue pourrait correctement utiliser mon produit ?”. Les normes d’accessibilité ne doivent pas être un frein à votre liberté artistique, mais nous aiguiller vers des choix plus judicieux qui ultimement serviront votre produit en le rendant utilisable par chacun.

Pour vous aider dans cette démarche, de nombreux outils existent aujourd’hui pour tester vos designs et s’assurer que tout est correctement lisible. Par exemple : Stark permet de tester très rapidement vos maquettes sur votre logiciel de design préféré et de calculer les niveaux de contrastes, les rapports de tailles de typographie ou encore de simuler les différentes visions des multiples types de daltonisme.

L’interface de votre produit devrait toujours rester cohérente. Pensez à la manière dont vos utilisateurs utiliseront l’interface de votre site, application ou autre. Si sur le premier écran le bouton d’action se situe en bas à gauche, puis sur le second écran se situe en bas à droite, puis sur le troisième écran se situe au centre, vous risquez de créer une confusion légitime.

C’est également le cas pour les couleurs utilisées. Il est souvent préférable de commencer la création de son produit en établissant une palette de couleurs qu’on utilisera ensuite sur les différents composants de notre interface. Mais attention à ce que cela reste une utilisation cohérente : si notre bouton d’action principal est bleu sur le premier écran, il devrait utiliser le même bleu sur les autres écrans afin de ne pas perturber l’utilisateur.

Enfin, il est également important d’être cohérent dans la structure de son interface. On dit souvent que le design d’interface se base sur les espaces et le vide. Les espaces permettent de créer une structure, une hiérarchie entre les différentes informations. Ils permettent de réguler la quantité d’informations qui sera visible par l’utilisateur à chaque instant et de guider sa lecture et sa compréhension des informations. Si tous les éléments sont condensés au même endroit, cela risque de causer des problèmes de lecture. Les espaces et le vides sont en quelque sorte l’oxygène de votre interface. Si vous n’êtes pas convaincu, on debunk le mythe que l’espace blanc est de l’espace gâché dans cet article !

Et là aussi, il est important de rester cohérent en utilisant les mêmes espacements entre les éléments sur l’ensemble de notre produit. Des espacements différents peuvent causer une lecture différente de la hiérarchie des informations entre chaque écran et perturber vos utilisateurs. Pour vous aider, il existe différentes règles qui peuvent être appliquées. A titre personnel, j’aime utiliser une grille de 8pt qui m’aide à garder une cohérence tout au long de mon travail sur des interfaces web.

Vos utilisateurs doivent comprendre à quoi servent - quelle action va être effectuée au clic - vos composants d’interface uniquement grâce à leur forme, leur couleur, le texte qui y est rattaché... C’est ce qu’on appelle l’affordance.

Par la forme, un bouton doit évidemment ressembler à un bouton, et indiquer par son contenu textuel ou visuel son utilité : est-ce qu’il permettra de passer à l’étape suivante ? De revenir en arrière ? De valider un formulaire ?

Par la taille : on doit définir la taille d’un composant proportionnellement à son utilité. Si c’est un élément important, il devra vraissemblablement être plus grand qu’un élément secondaire. Pour parler plus techniquement, la loi de Fitts exprime le temps requis pour cibler un élément en fonction de la distance et de la taille de ce dernier. Pour faire simple : les cibles les plus éloignées et les plus petites nécessitent plus de temps pour être atteintes. La position et la taille de vos éléments d’interaction sont donc clés dans un travail d’interface produit.

Enfin, la couleur doit également permettre d’identifier l’action qui se cache derrière une interaction. Est-ce que cette action est positive ? Négative ? Neutre ? Mais attention encore une fois à l’accessibilité : la couleur ne doit pas être la seule indication du comportement de votre composant : on peut donc l’associer à un message assez parlant ou encore une icône. Gardez également en tête que les couleurs n’ont pas la même signification (ou force évocatrice) dans toutes les cultures.

Quelques réflexions rapides autours de l'UI Design permettant de créer de meilleurs produits digitaux

Quelques règles du design d’interface (UI Design)

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