Aller au contenu

Refonte de l’architecture et des interfaces d’une plateforme d’assistance à destination de salariés

Lily facilite la vie

Outil d'assistance personnalisée à destination de salariés

Fin 2022, nos partenaires Mellon Mellon de la Briqueterie font appel à nous pour les accompagner dans la refonte de la plateforme Lily facilite la vie.

 

Contexte

Lily facilite la vie est la 1ère application d’assistance personnalisée 100% française, pour améliorer le quotidien des salariés. C’est un véritable réseau de soutien dans un espace sécurisé pour trouver en un clic les bons conseils et interlocuteurs au bon moment. En parallèle de leur refonte marketing, l’entreprise souhaite offrir à leurs utilisateurs une nouvelle expérience mémorable sur leur produit. Kirk a ainsi été missionné pour amener de la valeur à un produit qui, nous pensons, devrait être indispensable pour tous les salariés.

 

Enjeux

👉 Identifier les besoins, les points d’enchantement/friction des utilisateurs

👉 Concevoir une nouvelle expérience de découverte, compréhension et utilisation mémorable

👉 Créer un socle ergonomique optimal et évolutif

👉 Faciliter l’autonomie des équipes pour l’optimisation continue des futurs parcours & pages de la plateforme

 

Plan d’actions

1.

Définition des points d’enchantement et de friction des utilisateurs sur l’outil actuel

2.

Création d’une User Journey sur la base des besoins identifiés

3.

Création d’une Architecture de l’Information

4.

Définition d’un Product Backlog

5.

Conception et itérations des Wireframes

6.

Création du Visual Design et des maquettes graphiques

7.

Conception d’un Design System

8.

Création d’un prototype animé

 

 

 

1. Définition des points d’enchantement et de friction des utilisateurs sur l’outil actuel

Le projet a débuté avec un atelier de Découverte sur l’outil FigJam. Cet atelier a pour objectif de faciliter la montée en compétences de l’équipe Kirk et de rapidement comprendre les enjeux. Nous avons ainsi convié les équipes projet et technique de Lily facilite la vie et de nos partenaires de la Briqueterie. Dans un premier temps, nous avons demandé aux équipes de Lily de nous partager ce qu’ils pensent savoir de leurs utilisateurs. Cette façon de récolter des données nous permet d’apprendre des choses parfois surprenantes sur la manière dont les utilisateurs interagissent avec un produit.

 

Insights identifiés lors de l’atelier de Découverte sur FigJam

 

Puis dans un second temps, nous leur avons demandé de réaliser une revue de l’existant. En se basant sur ce qu’ils connaissent du produit : quels sont selon eux les avantages et les inconvénients ? Grâce à ces données, nous pouvons ainsi rapidement constater la manière dont ils perçoivent leur propre produit. Cela permet aussi de mettre le doigt sur des fonctionnalités ou objets qui ne sont pas clairs et qui ont donc besoin d’être gardés en tête.

 

Revue de l’existant sur FigJam

 

2. Création d’une User Journey sur la base des besoins identifiés

Toujours sur FigJam et dans la continuité de l’atelier de Découverte, nous avons réalisé une User Journey. Cette dernière a pour but d’avoir une vue globale sur les actions qui devront figurer dans la nouvelle version du produit, puis de les prioriser. Pour ce faire, nous identifions les parcours qui doivent pouvoir être réalisés par les utilisateurs et listons les actions sous la forme d’une cartographie. Nous demandons ensuite aux équipes de réagir là-dessus.

 

Les participants votent pour chacune des actions listées

 

3. Création d’une Architecture de l’Information

En parallèle, nous avons travaillé sur l’Architecture de l’Information du futur produit. Sur FigJam et sous la forme d’une arborescence, nous avons représenté l’ensemble des grandes sections et des pages de la plateforme. C’est un livrable de référence pour toutes les parties prenantes car il permet d’avoir un angle de vue plus concret pour visualiser la manière dont sera construit le produit.

 

Architecture de l’information réalisée sur FigJam

 

4. Définition d’un Product Backlog

Avant de débuter la phase de conception des maquettes, nous avons créé un Product Backlog sur Notion. Le Product Backlog sert à encadrer la mission en termes de temps et de tâches à réaliser. Le designer estime, tâche par tâche, le temps que cela lui prendrait de les réaliser. C’est une manière de périmétrer et cadrer la mission et de mettre de la valeur là où elle est nécessaire. C’est un document partagé à l’ensemble de l’équipe car il permet aussi à toutes les parties prenantes de suivre l’état d’avancée des maquettes.

 

Product Backlog sur Notion

 

5. Conception et itérations des wireframes

Une fois le Product Backlog validé, la conception des wireframes débute sur Figma. Les wireframes sont des maquettes réalisées en « basse-fidélité », c’est-à-dire sur lesquelles aucune charte graphique n’est appliquée : tout est conçu en noir et blanc. Cela permet de se concentrer sur le côté fonctionnel plutôt que le visuel – et ainsi, itérer et ré-itérer rapidement sur le fond.

 

Exemples de wireframes sur Figma

 

Cette phase est organisée en sprints avec en fin de semaine une revue générale à laquelle la core team est conviée.

 

Revue avec la core team

 

Avant chaque revue avec toute l’équipe, nous prenons le temps d’échanger avec les développeurs sur les maquettes et leur faisabilité du côté technique. Cela nous permet d’être sûrs de ce qui va pouvoir être réalisé dans le temps imparti. Parfois, lorsque cela était nécessaire, nous avons réalisé des revues en asynchrone, enregistrées sur Loom. Cela permet de partager rapidement des mises à jour des maquettes sans avoir à mobiliser l’équipe entière.

 

Revue asynchrone sur Loom

 

6. Création du Visual Design et des maquettes graphiques

Lorsque tous les wireframes ont été validés, nous avons réfléchi à une piste graphique, le but étant de garder la charte graphique actuelle. Ainsi, pour la moderniser, nous avons amené d’autres couleurs qui ont permis de dynamiser les maquettes. Comme en phase de wireframes, celle-ci était organisée en sprints.

 

 

7. Conception d’un Design System

En parallèle de la conception des maquettes graphiques, nous avons créé une librairie Figma dans laquelle les composants principaux ont été répertoriés. Le fichier est divisé en 3 parties :

Ce document est un repère et permettra au client d’être autonome dans le futur, lorsqu’ils voudront créer une nouvelle page simple par exemple.

 

Extrait du Design System

 

8. Création d’un prototype animé

Pour finir, nous avons réalisé un prototype animé sur Figma. Le client et son équipe technique peuvent ainsi se projeter et surtout comprendre les mécanismes interactifs que nous avons imaginé derrière les maquettes.

Et ce qu'en dit Lily facilite la vie ?

(...) Toute l'équipe est ravie de la collaboration tant au niveau créatif qu'organisationnel: proactivité, respect des timings, suivi des deliveries, contact fluide.... Rien à redire, super presta.

Laurence Kerjean, Button pusher

On a demandé leurs avis en fin de projet,

100% de nos clients nous recommandent

Une méthodologie agile et efficace au profit d une expérience utilisateur fluide et intuitive. Les projets sont menés avec énergie, enthousiasme et rigueur, je recommande !

Amélie Anastassiades Directrice Expérience Clients - Direct Assurance

Des idées, du savoir faire et une équipe réactive et très agréable. Expériences très réussies pour des projets pourtant complexes à appréhender. Merci à vous :)

Alexis Persinette-Gautrez Chef de projet digital - BNP Paribas Real Estate

Très bonne expérience, une équipe très compétente et sympathique, je recommande vivement !

Sébastien Vinot Chargé de projet IT - ACE Énergie

(...) Toute l'équipe est ravie de la collaboration tant au niveau créatif qu'organisationnel: proactivité, respect des timings, suivi des deliveries, contact fluide.... Rien à redire, super presta.

Laurence Kerjean Button pusher

Sérieux et pertinent, Kirk a très bien réussi à cerner les caractéristiques et problématiques de notre secteur, et à mettre en oeuvre un plan d'amélioration UX-UI concret et actionnable (...)

Tom Levy Développeur Full Stack - epicery

Travail super productif avec Kirk.Notre produit semblait complexe et nous avions du mal à le présenter. Kirk a su transformer notre interface web pour le ramener dans les schémas standards.

Christophe Horvath Co-founder - MyNumea

Expertise, agilité, réactivité et compréhension rapide des enjeux métiers permettent à Kirk d'accélérer grandement le niveau et le rythme des projets UX Design (...)

Max Godet Directeur général - WeChooz

Une équipe très dynamique, réactive avec qui il est agréable de travailler. Hâte de découvrir les performances de leurs recommandations UX sur nos nouveaux outils !

Justine Lagier Responsable Marketing - AXA France

Les équipes de Kirk ont très rapidement compris notre projet pourtant assez complexe (...) chaque expert que nous avons rencontré a su livrer de précieux conseils, analyses et solutions.

Olivier Gaston-Carrère Responsable marketing - BNP Paribas Real Estate

Kirk est une agence à taille humaine qui allie expertise, réactivité, professionnalisme et agilité. Après plusieurs collaborations avec Tristan et Alison, je recommande à 200%.

Sarah Vidal Data & Product Manager - Epicery

Un vrai plaisir de travailler avec Tristan et l'équipe de l'agence Kirk. A l'écoute de nos difficultés, ils ont su proposer une expérience UX de notre funnel de vente beaucoup plus intuitive et efficace.

Cedric Lemaire Chief Marketing Officer - MyNumea

J'ai confié à Kirk des projets mettant en oeuvre leur compétences de consultant UX, d'UX et d'UI. Sur ces 3 domaines d'expertise, les résultats sont de grande qualité (...)

Laurent Martin Product Management Director - Odigo

Pas d’inquiétude, on prend soin de vous

La complexité ne nous fait pas peur, découvrir votre métier fait partie de notre travail

En cas de problème, nous nous efforçons toujours de trouver la meilleure solution

Nous tâchons d’adopter un rythme de travail sain pour garder nos cerveaux frais

Questions fréquentes

À quel type de résultats pouvons-nous nous attendre à la fin d'un atelier ?

Les ateliers ont pour but d’assurer que nous avons la même compréhension de vos besoins business, techniques et de ceux de vos utilisateurs. Aussi, nous entreprenons de consolider et d’organiser toutes les données récoltées lors des ateliers afin de les rendre lisibles et compréhensibles par tout le monde. L’idée est que vous vous appropriez complètement les livrables produits à l’issue des ateliers et que vous puissiez les partager à qui vous le souhaitez.

Êtes-vous capable d'innover pour mon projet ?

Bien sûr ! C’est là où une agence comme la nôtre vous apportera le plus de valeur sur vos produits et services digitaux. Nous nous efforcerons de mettre les efforts au bon endroit pour ne pas utiliser un temps précieux sur des sujets annexes qui pourraient faire dévier un projet de ses objectifs. Une fois sur les bons rails, trouver des nouvelles solutions pour proposer à vos utilisateurs une expérience mémorable est au cœur des échanges !

Comment intégrez-vous les imprévus et les demandes "hors scope" ?

Lorsque nous prenons une mission chez Kirk, nous allons toujours être guidés par la valeur. S’il apparaît qu’un élément que nous n’avions pas identifié est bien important pour vos utilisateurs et votre business, on discute et on revoit la roadmap ! Faire pour faire, on ne sait pas faire… Ce qui nous anime, c’est justement le challenge ! Il faut évidemment que cela reste dans un certain ratio temps/budget que l’on re-consolide ensemble.

Comment faire valider les livrables par la direction ?

Chez Kirk, on a tendance à dire que la meilleure façon de faire valider des livrables à la Direction, c’est d’impliquer la Direction… dès le début du processus de conception ! Une validation tardive, sans avoir participé aux échanges et aux réflexions en atelier, provoque souvent de la distance avec le travail réalisé en amont et donc, une frustration quand il n’est pas apprécié à sa juste valeur.

Avez-vous besoin de données avant de commencer votre mission ?

Nous avons mis au point des ateliers qui nous permettent d’accélérer la montée en compétences sur votre métier et de cerner les enjeux avec finesse. En 3 heures d’ateliers, nous obtiendrons un résultat bien plus précieux qu’en 3 jours de lecture de documents. Et si vous détenez des données utilisateurs, on ne sera que plus performant !

À quelle fréquence allez-vous avoir besoin des membres de notre équipe ?

Pour qu’un projet réussisse, il faut que l’équipe qui le porte se mobilise… Aux bons moments ! En début de projet, c’est plus intense : il y a les ateliers d’immersion et de stratégie les deux premières semaines. Nous aurons donc besoin de vous environ 4 heures par semaine. Ensuite, 3 heures, une à deux fois par semaine pour les Design Reviews. Plus vous vous rendrez disponible, plus vite le projet avancera. Vous gardez des Designers impliqués qui n’auront qu’une envie : votre réussite !

Comment gérez-vous les roadmaps et les livraisons en temps et en heure ?

En étant réaliste, en ne promettant pas monts et merveilles ! Car sous la pression, aucune personne ne délivre un travail de qualité. Nous vendons de l’intelligence. L’idée est de garder des Designers motivés et des clients satisfaits avec qui nous allons avoir une relation à long terme. Si la vérité est acceptée par tous, nous mettons tout en œuvre pour tenir les délais, mais aussi pour vous informer chaque semaine de l’avancement, c’est une vraie force de Kirk !

Comment faire valider mes intuitions auprès de mes collaborateurs ?

En Product Design il faut garder en tête que le produit que l’on conçoit est à destination de ses utilisateurs finaux. Notre conseil : afin d’éviter toute discussion qui porte sur des ressentis ou des intuitions personnelles, montrez votre produit à de vrais utilisateurs et faites entendre leur voix et leur point de vue à votre Direction. C’est le meilleur moyen d’éviter les conflits, c’est moins coûteux et moins long qu’on ne le pense !

Pouvez-vous nous envoyer les fichiers sources des livrables ?

Les fichiers sources sont bien évidemment votre propriété dès lors que la facture de solde de la mission est sur notre compte. Nous ne nous opposerons donc jamais à vous fournir les sources. Si vous faites des modifications sur ce fichier, sachez toutefois que nous ne pourrons pas repartir de ce fichier pour continuer à vous accompagner et ça, c’est dommage !

C'est quoi une "Design Review" chez Kirk ?

Les Design Reviews correspondent aux moments où nous vous présentons les solutions que nous avons imaginées pour votre produit. C’est le moment où nous vous laissons la possibilité de commenter notre travail et de nous demander de le modifier. Lors des premières phases d’idéation (les plus importantes) nous organisons ces Design Reviews de la même manière qu’un atelier afin que chacun s’exprime et qu’aucun retour ne nous échappe.