par Anne-Sophie, Cheffe de projet et Directrice Générale pour kiss my

Tester des trucs, c’est un peu ce qui nous porte, et c’est l’heure de vous décortiquer notre premier atelier UX / UI.

Mais tout d’abord pourquoi en faire un, d’atelier UX / UI ?

Dans le monde du web et plus précisément des agences web, on a remarqué un truc, qui a fini par coller des pustules à l’équipe : 90 % * des acteurs du web ont des sites web miteux !

_{* (cette statistique est sortie du chapeau d’Anne-So…)}

Et souvent, ce petit monde, se retranche derrière : « oh bah les cordonniers tu sais…!  » ? Bah non on ne sait pas. Non vraiment. C’est pas seulement notre street credibility (dans l’équipe y a aussi des boomers, on assume) qui est en jeu. On vous apprend rien quand on déclare, péremptoire :

« Si t’es pas foutu de faire un site qui claque pour toi-même, à quelle heure un client te lâche 10 k pour lui faire quoique ce soit » ?!

_Anne-So

Mais c’était bien de le rappeler…

En plus de manquer cruellement de sérieux quand on voudrait être reconnus comme des pros ; avoir un site qui fait pitié, c’est aussi se priver d’une cours de récré jubilatoire. Avoir son propre site, c’est se donner la chance de tester, pour soi-même, une palanquée de trucs qu’on aimerait bien faire pour nos clients mais que l’on se chie de rater.

Et voilà où tout cela nous mène : tester un atelier créatif UX / UI pour notre propre site web, dans le but évident de créer un site qui casse la baraque !

Avant l’atelier UX / UI : étape préalable majeure !

par Isabelle, Responsable UX / UI, Webdesigner et DA pour kiss my

La phase de lancement d’un site internet, c’est construire des bases solides pour une conception optimale. Il ne faut surtout pas négliger cette phase de démarrage, au risque de passer à côté de l’objectif visé !

L’entretien individuel

Cette étape consiste à définir les objectifs de notre futur site internet kiss my, d’en comprendre les enjeux en interrogeant chaque partie prenante* du projet (en anglais *stakeholders).

L’avantage de notre structure, c’est que nous sommes entre 5 et 7 co-équipiers (selon les projets) : ni trop, ni pas assez ! Une aubaine pour recenser la vision de chacun, collecter les données rapidement et mettre en place des ateliers de travail aisément.

J’ai opté pour une méthode rapide : le questionnaire en ligne ! Et voici un exemple des éléments abordés :

• Comment les membres de l’équipe pensent pouvoir se différencier de la concurrence ?
• Quelles cibles chacun imagine, perçoit déjà ?
• Et ces cibles, elles vont venir faire quoi sur notre site ?
• Quels objectifs nous souhaitons accomplir sur kissmy.co ?
• Si on laisse un souvenir à nos internautes, on voudrait que ça ressemble à quoi ?
• Quels défis, techniques, humains… peut-on déjà anticiper ?
• Existe-t-il déjà des contraintes ou freins à la création du site ?
• De l’inspiration : avec des exemples de sites qui font rêver les membres de la team !
• …

Cette collecte d’informations, faite de manière isolée nous permet d’orienter la démarche UX. C’est aussi le point de départ idéal pour, soit confirmer que l’équipe partage la même vision, soit détecter des visions divergentes. Alors il sera important de pouvoir en débattre en groupe lors de la réunion de lancement. En cas de profondes divergences, il pourra être opportun de redéfinir de manière isolée les points de différends, reformuler et présenter aux personnes concernées les conclusions ; en amont de la réunion de lancement.

Suite à ça, il est primordial de traiter la donnée et d’en préparer une preview digeste pour la restituer à la prochaine étape. D’abord parce que même pour la personne qui organise l’atelier, le traitement et l’analyse de la donnée sera plus simple. Mais aussi parce que les membres de l’équipe ont besoin de cette restitution. Le temps passé à répondre à ce type de questionnaire, parfois jusqu’à 30 min, est précieux et ne doit, à aucun moment, pouvoir être perçu comme du temps perdu !

La réunion de lancement de l’atelier UX

Organiser une réunion de lancement permet de :

• présenter les résultats de l’enquête individuelle ;
• mettre en lumière et partager toutes les idées formulées ;
• engager chaque collaborateur autour du projet ;
• convaincre de l’intérêt de la démarche UX ;
• planifier le processus de design (choix des méthodes UX UI : entretiens, questionnaire, observation, focus group, tests utilisateurs, etc..)discuter des différentes visions du projet (objectifs, défis, délais, critères de succès, etc..) ;
• parvenir à une conception partagée des objectifs stratégiques.

L’objectif de cette réunion est d’arriver à un consensus sur chacun des sujets évoqués.

Un document synthétique reprenant l’intégralité des accords stratégiques sera réalisé, il pourra servir de fil conducteur tout au long du projet.

L’atelier UX à proprement parler !

Le brainstorming et les UX Cards

Le site kiss my est avant tout un site vitrine qui montre l’identité de l’entreprise, ses valeurs, ses compétences, ses offres de services, etc… Émettre collectivement des idées sert de base au futur projet. Les objectifs stratégiques et le processus design validés, nous nous sommes attaqués au célèbre Brainstorming !

Pourquoi maintenant ? Idéalement, on passe part une phase d’exploration où l’on va chercher les besoins, intérêts et expériences des utilisateurs cibles. Mais libre à chacun d’adapter les méthodes UX en fonction du projet : délais, coûts, opportunités… En ce qui concerne la conception du site kiss my, nous avions déjà une vision claire de nos utilisateurs et l’objectif principal était de véhiculer notre identité.

Pour faciliter la génération d’idées, et sensibiliser l’équipe aux méthodes UX, j’ai décidé de leur présenter les UX Cards.

Mais c’est quoi les UX Cards exactement ?

Les UX Cards sont basées sur une approche psychologique de l’expérience utilisateur. L’épanouissement de ces besoins est considéré comme l’un des principaux moteurs d’expériences positives avec les technologies. Comment ça se présente ? Les UX Cards sont au nombre de 7 et se matérialisent sous forme de feuilles cartonnées sur lesquelles se côtoient :

1. au recto : images + mots pour évoquer une approche psychologique
2. au verso : chaque carte fournit une définition du besoin, les concepts associés, ainsi que des exemples de sentiments ou d’activités liées à ce besoin.

Le choix des UX Cards pour l’atelier

Avant de commencer, premier challenge : l’équipe doit se mettre d’accord et choisir 3 cartes UX sur les 7 proposées. Elles correspondent aux besoins psychologiques que le site devra combler. Cela correspond bien souvent aux valeurs portées par l’équipe. Pour kiss my, le consensus aura été plutôt rapide. Les UX Cards choisies étaient donc :

• Compétence / efficacité : sans être présomptueux, chaque membre de l’équipe cherche à atteindre son meilleur niveau de compétence et d’efficacité.
• Relationnel / appartenance : nous partageons un sentiment d’appartenance fort au sein du groupe. Et pas seulement, également vis à vis de nos clients, dont nous souhaitons qu’ils soient en relation directe avec les membres de l’équipe.
• Influence / popularité : nous avons pour souhait de partager les savoirs, les expériences et les échecs. Ce qui sera le socle de notre notoriété future.

Générer des idées autour des UX Cards choisies

Durée : entre 20 et le 25 minutes

Dès le choix opéré, la première étape créative, consiste à générer librement autant d’idées de conception que possible, pour soutenir un besoin utilisateur sélectionné, en se posant par exemple la question : « Comment concevoir notre produit / système de manière à créer une expérience d’appartenance ← remplacer par le mot de l’UX Card jusqu’à avoir répondu à toutes les questions ? »

Développer les idées en mettant en perspective des cas réels : positif vs. négatif

Durée : entre 20 et le 25 minutes

Dans un second temps, nous avons ont été amenés à penser à tout ce qui, dans la vie réelle, influe, de manière positive ou négative, sur l’épanouissement d’un besoin. La mission consiste alors à lister autant de situations que d’objets qui inspirent ces sentiments positifs ou négatifs. Une fois la liste créée, on s’attarde à les transposer, par analogie, en caractéristiques esthétiques et fonctionnelles pour formaliser des pistes de conception du site.

Le but : amener à reproduire, chez l’internaute, la même expérience positive ainsi qu’éviter une expérience négative.

Et après la créativité, on fait quoi en vrai ?

On trie les idées et on les priorise selon des critères établis : faisabilité, temps, coût, caractère innovant, etc…. Pour avoir une visibilité d’ensemble, j’ai souhaité dresser des schémas heuristiques.

La phase d’exploration

Suite à l’atelier créatif, il est important de recueillir de l’information auprès de nos véritables cibles. Cette étape sert à mieux les comprendre et donner un véritable sens à notre projet. Après avoir crée une liste de contacts de nos cibles potentielles, un questionnaire exploratoire sera mis en ligne !

Un bon moyen de récupérer des retours rapides de nos utilisateurs tout en donnant vie à notre site. Nous analyserons ensuite leurs retours qui viendront alimenter nos idées de conception. L’avantage supplémentaire de cette méthode, montrer notre savoir-faire UX à un large panel !

En ce qui concerne nos futurs tests utilisateurs (optimisation des prototypes, itération, etc…), nous avons décidé de poster un appel à candidats sur une landing page. Notre objectif : anticiper les futurs tests utilisateurs en récoltant dès maintenant des infos !

Suite à la réunification des retours utilisateurs et des idées générées par l’équipe, nous pourrons passer à la création de personas, experience maps, storyboard, arborescence, wireframes, etc… Pendant la création des prototypes, des tests utilisateurs sont recommandés afin de créer une expérience utilisateur optimale !

Le résultat de cet atelier UX / UI ?

_{par Anne-Sophie, Cheffe de projet Web et Rédactrice pour kiss my}

Du tangible…

Le fruit de notre travail pourrait se résumer ainsi, en ne s’attachant qu’aux éléments concrets :

1. La création du site web kiss my avec le minimum vital pour commencer : présentation de l’équipe et des compétences.
2. L’élaboration du questionnaire utilisateur (à découvrir prochainement) pour créer des outils web à la hauteur des attentes de nos lecteurs.
3. La conception du jeu d’UX cards (que j’espère vous avez téléchargé). Parce que pendant l’atelier on a utilisé le jeu proposé par Carine Lallemand, mais on a rapidement eu envie de s’approprier l’outil. Désormais on anime tous les ateliers créatifs, internes et clients, avec notre jeu d’UX Cards.
4. La rédaction d’articles divers, en amont de la mise en ligne du blog. Notre objectif est d’avoir 10 articles minimum.

…au moins tangible !

Mais au delà des trucs que l’on peut aisément quantifier, il y a tous les trucs qui sont du ressenti :

• le plaisir de réfléchir ensemble et trouver des solutions,
• la croissance d’une cohésion d’équipe qui s’alimente aussi par ces moments créatifs (mais pas que),
• une vraie motivation à faire les choses, parce qu’on les a décidées ensemble !

Quoi faire pour éviter l’écueil du brainstorming = teambuilding !

Oui, l’atelier UX / UI est aussi un excellent moyen de souder les équipes sur le moment. Il créé, en effet, des synergies créatives puissantes. Cela permet aussi de se trouver des sujets d’intérêt commun. Et donc en soi, cela pourrait suffire. Sauf que là, on nourrit un objectif commun, un but ultiiiime : faire naître notre fichu site web !

Ce qui vient après est donc tout aussi important. Et il est donc majeur, avant de sortir de l’atelier de :

• faire des équipes pour bosser sur les sujets évoqués et fonction du niveau de priorité le plus important,
• se mettre des objectifs honnêtes, qui motivent et stimulent, sans décourager,
• programmer de se revoir, rapidement.

À vous de jouer en organisant votre atelier créatif !

Avec tout ça vous devriez être fin prêts pour vous approprier l’exercice de l’atelier UX.

Et parce qu’on n’est pas des bêtes, on vous propose de télécharger notre set de cartes UX / UI pour animer vos propres ateliers à l’avenir… Ce set a été intégralement réalisé par l’équipe (Isabelle au design, Anne-So à l’écriture). Comme vous le voyez sur les photos, à l’époque on ne les avait même pas encore imaginées !

Nos cartes étant en libre service, n’hésitez pas à les utiliser. D’ailleurs si vous avez des retours, des questions ou suggestions, on est tout ouïe !

Deux versions vous sont proposées :

• Dark mode : Les UX Cards kiss my à télécharger gratuitement <3
• White mode : Les UX Cards kiss my eco friendly pour imprimer sans ruiner la planète et votre cartouche de noir

Pour info : les règles d’organisation de l’atelier créa UX / UI sont rappelées sur notre version du jeu. Donc vous n’avez en principe besoin de rien d’autre.