Découvrez les coulisses d’un Design Sprint

Présentation et retour d’expérience sur notre collaboration avec l’équipe d’Eurécia

Jeudi 19 Janvier 2023, la neige et le froid n’ont pas ralenti la trentaine de participants venus découvrir le premier meetup organisé par Keleo.

C’est dans le superbe cadre du campus d’Eurécia à Castanet, que nos keleotes Claire et Valérie ont partagé leur retour d’expérience sur le Design Sprint.

Eurécia, éditeur de logiciel SIRH, a fait appel à l’équipe Keleo pour optimiser la phase de paramétrage de leur offre Zen. Il était question de rendre les utilisateurs de la solution d’Eurécia plus autonomes grâce à l’amélioration du parcours proposé par cette offre.

L’utilisation du Design Sprint a boosté la phase de recherche d’une solution à la problématique. Mais en quoi consiste le Design Sprint et en quoi permet-il de booster le développement d’une solution numérique ?

Le Design Sprint est une méthode issue du Lean Startup et du Design Thinking. Il consiste en une phase de résolution de problèmes et de créativité accélérée afin de répondre aux besoins utilisateurs le plus rapidement possible. Concrètement, on teste une idée de prototype en seulement 5 jours afin de limiter le risque d’incertitudes, qui est coûteux en argent et en temps. 

C’est durant ce meetup avec Eurécia que nous avons pu décrire, raconter, approfondir le sujet autour d’un cas concret. L’expliquer, c’est bien, mais le vivre, c’est mieux.

Voici le déroulé de la soirée :

  • Définition du Design Sprint (en comparant notre méthode avec celle de Google, qui en est à l’origine),
  • Description des étapes par lesquelles sont passées Eurécia et Keleo (contexte, missions),
  • Retour d’expérience d’Eurécia, qui a explicité son ressenti vis-à-vis du Design Sprint,
  • État des lieux de l’impact du Design Sprint sur leur produit et leur organisation (sur les court et long termes),
  • Discussion avec le public autour de questions thématiques pour s’assurer de la bonne compréhension du sujet,
  • Conclusion sur les avantages et les inconvénients de cette méthode.

Nous vous proposons, à travers cet article, de vivre cette conférence.

Merci à GARCIA Theo pour le montage vidéo

Choisissez le format que vous préférez

Pour accéder à la conférence et son contenu, vous avez le choix entre deux options :

La conférence en vidéo

Image - Vidéo du meetup

Le support de présentation

Image - Support de présentation

Notre équipe Design s’exprime sur le Design Sprint

Voyons ce que Claire et Valérie ont à nous dire, quelques temps après la conférence :

Q.1 : Qu’avez-vous pensé de cette soirée ?

Claire : Une soirée très enrichissante 🙂 Humainement car nous avons pu retrouver les équipes d’Eurécia, échanger sur nos évolutions depuis la fin de la mission. Nous avons également eu de très bons retours des participants avec qui nous avons partagé ce moment. Professionnellement aussi car nous avons pu démontrer l’utilité de la phase d’UX design avec un focus sur une méthode dont nous prônons les bienfaits. Et quel plaisir de voir que notre travail a eu un impact positif sur les équipes et le produit Eurécia. 

Valérie : Cette soirée était particulière puisqu’il s’agissait du tout premier meetup organisé par Keleo. Pour ma part, j’ai apprécié ce partage autour d’une expérience que nous avons vécue et sur laquelle nous avons appris. J’espère que les participants ont apprécié cette opportunité et qu’ils auront envie de revenir aux prochains ! 

Q.2 : Dans les grandes lignes, si vous deviez rappeler quels sont les avantages et les inconvénients du Design Sprint, que diriez-vous ?

Claire : Avantage / Pour moi, l’avantage du Design sprint c’est l’état d’esprit. En quelques jours nous créons les conditions, le rythme, les pratiques pour amener des équipes de tout type d’organisation à résoudre des problèmes et trouver de nouvelles idées en se focalisant sur le besoin utilisateur. Elle peut apporter également un changement dans la culture d’entreprise et les pratiques par l’expérimentation d’un mode de fonctionnement différent.
Et les résultats positifs de cette méthode ne sont plus à prouver 🙂 

Inconvénient / La difficulté de cette méthode est pour moi d’acculturer nos clients à cet état d’esprit. Il est compliqué d’attribuer du budget sur cette phase et de faire confiance à la méthode.  Il est primordial que les participants viennent aux ateliers avec une volonté d’expérimenter, de travailler en équipe et surtout accepter une remise en question de leurs présupposés.

Valérie : Pour moi, le plus gros avantage d’un Design Sprint est d’accélérer la résolution d’un problème. En concentrant l’intelligence collective et en appliquant une contrainte de temps, on stimule la génération d’une solution. L’intelligence du Design Sprint c’est de se dire que cette solution n’est pas forcément la bonne, il faut la tester et c’est sur la base de ces apprentissages qu’on va construire la “bonne” solution. 

Q.3 : Depuis la collaboration avec Eurécia, avez-vous utilisé le Design Sprint à nouveau ? Avez-vous d’autres retours d’expérience à nous faire  ?

Claire : Aujourd’hui le Design Sprint est l’un de nos outils majeurs. Nous l’utilisons quand le contexte du projet correspond aux exigences et aux besoins.
Nous l’adaptons aux clients pour que le résultat soit le plus optimal. Il nous a fallu un temps d’expérimentation pour fixer un périmètre d’utilisation au sein de notre offre. Nos clients valident son efficacité. Il me tarde de l’utiliser à nouveau 🙂

Valérie : Nous avons réalisé d’autres Design Sprint depuis. À chaque nouveau Design Sprint nous testons et nous apprenons. Ce que j’aime c’est que chaque Design Sprint est différent : nous construisons en fonction du projet, des contraintes organisationnelles et des clients. Pour moi, un Design Sprint n’a pas de déroulé figé : nous pouvons utiliser plein de techniques différentes pour répondre aux objectifs de chaque phase du Design Sprint.

Vous pensez que le Design Sprint est la bonne méthode pour booster votre projet d’application numérique ?
Prenez rendez-vous avec notre équipe et discutons-en !

Comment créer la maquette et le prototype d’une application ?

Découvrez les étapes de conception et des outils pour réaliser les maquettes de votre application.

Vous avez une idée d’application. Cette idée répond à un besoin. Vous avez déjà en tête les fonctionnalités essentielles que vous aimeriez proposer à vos utilisateurs…

Et après ?

Esquisse, wireframe ou mock up, maquette graphique, prototype, entre l’idée et le développement, plusieurs étapes de conception sont nécessaires pour avancer dans la construction de votre application.

A quoi correspondent ces différentes étapes ? En quoi constituent-elles des facteurs-clés de succès pour votre projet ?

———————————–

Pourquoi créer la maquette de votre application ?  

Les maquettes graphiques sont des versions statiques de l’application. Elles servent à montrer à quoi l’application va ressembler. Les parties prenantes du projet (client, utilisateurs, développeurs …) peuvent alors mieux se projeter dans votre futur produit
Chacune des versions successives permet d’expérimenter le « look & feel » de l’application en amont de la phase de développement. Elles donnent une visibilité sur plusieurs éléments :

  • Disposition de l’information
  • Style graphique
  • Images
  • Icônes
  • Couleurs
  • Navigation

En bref, tous les éléments graphiques propres à l’application à développer.

L’intérêt de ces maquettes est évident. De la même manière que vous ne lanceriez pas la construction d’une maison sans avoir établi des plans, vous ne pouvez pas démarrer la conception d’une application sans maquettes.

Créer des maquettes présentent plusieurs bénéfices :

  • Se mettre à la place de l’utilisateur final et créer une application intuitive avec une expérience utilisateur optimale.
  • Visualiser de façon très intuitive la future application. C’est très utile par exemple s’il reste des parties prenantes à convaincre.
  • Faciliter la conception : la maquette permet de réaliser rapidement les changements (graphiques, fonctionnels, ergonomiques) en amont plutôt qu’en plein milieu de la phase de développement.
  • Donner une vision précise de ce à quoi ressemblera l’application sur les différents écrans.

En définitive, passer par ces étapes de conception accélère le développement de votre application puisque les équipes de développement disposent d’une vision claire du résultat attendu. 
Elles sont donc en mesure de réaliser plus rapidement un MVP (Minimum Viable Product), c’est-à-dire une version simplifiée de l’application destinée à collecter et évaluer les interactions des utilisateurs avec le produit.

———————————–

Les 4 étapes de création d’une maquette d’application

Nos méthodologies de conception s’adaptent au besoin du client. Selon le projet et sa maturité (création d’une interface, refonte et optimisation d’une application, évolution d’un produit existant, …) ou le budget disponible, la méthodologie et le nombre de maquettes peuvent varier.
Ce qui est indiscutable, en revanche, c’est l’utilité de passer par ces étapes de conception avant de se lancer dans le développement.

L’esquisse (ou zoning)

L’esquisse est la première étape dans la création d’une maquette. Elle est souvent réalisée en atelier de conception ou en design sprint avec l’équipe projet.

Le zoning permet de commencer à se projeter dans la conception de l’interface. Cette étape est utile pour hiérarchiser et structurer l’information. Concrètement, on va indiquer les principales zones de l’interface sous la forme d’un schéma simple et minimaliste, avec des blocs dessinés en gris. 

Dans l’exemple ci-dessous, on voit bien que le zoning est dessiné à la main. A ce stade, les détails graphiques n’apparaissent pas encore. Il s’agit avant tout d’avoir une vue d’ensemble des blocs et de se concentrer sur les informations à faire figurer sur la page.

Exemple d'esquisse dessinée à la main
Exemple d’esquisse dessinée à la main

Le wireframe

Le wireframe, maquette fil-de-fer ou maquette fonctionnelle, sert à affiner les idées de base et les concepts, mais toujours avec un graphisme simplifié. La maquette fonctionnelle aide les parties prenantes du projet à visualiser la structure de la page, la façon dont l’information est agencée et hiérarchisée, les parcours utilisateurs et les principales fonctionnalités.

Contrairement à l’esquisse, le wireframe offre une version statique de la future interface à échelle réelle. Il permet d’optimiser la conception avec les spécifications fonctionnelles sans faire dévier les échanges vers les éléments visuels.

En général, chez Keleo, nous réalisons le wireframe en atelier avec les clients. Le but est de valider ensemble, dans une logique de co-construction, les concepts en matière d’ergonomie et d’UX.

Évolution de l'esquisse en wireframe - Version desktop
Évolution de l’esquisse en wireframe – Version desktop
Évolution de l'esquisse en wireframe - Version mobile
Évolution de l’esquisse en wireframe – Version mobile

Les maquettes graphiques

Une fois le wireframe validé avec le client, l’étape suivante est la maquette graphique (ou mockup). C’est seulement à ce stade que les éléments visuels (couleurs, polices, icônes, logos, illustrations, images …) apparaissent pour la première fois. C’est pourquoi on parle aussi de maquette haute-fidélité, par opposition au wireframe qui est une version basse-fidélité. La maquette graphique ressemble visuellement à la future interface.

Selon la maturité et le développement du produit ou du projet, il peut être nécessaire de travailler la direction artistique avec une phase de recherche et de création esthétique (moodboard, couleurs, typographie, illustrations, …). 
Lorsque le client a validé l’esprit, le ton graphique, nous pouvons produire les maquettes graphiques des différents écrans, pour mobile et pour desktop, comme dans l’exemple ci-dessous.

Évolution du wireframe en maquette graphique - Version desktop
Évolution du wireframe en maquette graphique – Version desktop
Évolution du wireframe en maquette graphique - Version mobile
Évolution du wireframe en maquette graphique – Version mobile

Prototype

Le prototypage peut être réalisé après les wireframes ou la phase de maquettage. Nous pouvons faire des prototypes de wireframe afin de tester l’interface, l’ergonomie, les fonctionnalités … grâce à des tests utilisateurs. Dans ce cas, le prototypage intervient avant la réalisation des maquettes graphiques.

Ensuite, nous pouvons concevoir un prototype haute-fidélité après les maquettes graphiques afin que le client et les utilisateurs puissent se projeter pleinement dans le produit. Cela permet aussi de réaliser un scénario d’utilisation du logiciel pour des tests utilisateurs.

Les outils pour créer une maquette

Miro

Miro est une solution de tableau blanc collaboratif en ligne que nous utilisons en réunion ou en atelier. Chez Keleo, nous l’utilisons également pour les esquisses et les wireframes. Ces étapes se font souvent en atelier de co-conception avec l’équipe du projet. L’outil facilite le brainstorming, l’idéation et la collaboration que ce soit à distance ou en présentiel. 

D’autres outils de ce type existent comme Mural ou Figjam.

Moqups

Pour la conception de wireframes dynamiques, nous pouvons également utiliser Moqups. C’est une application web avec une bibliothèque d’éléments et des modèles configurables. Cette solution facilite aussi le travail en équipe et permet d’organiser les wireframes et les relier entre eux pour avoir un premier prototype. 

D’autres applications peuvent être utilisées comme Balsamiq ou MockFlow.

Figma

Figma est un outil en ligne puissant tout-en-un. L’outil est collaboratif et permet de donner à toutes les parties prenantes une visibilité sur les projets de design.
Nous utilisons de plus en plus Figma pour réaliser nos maquettes graphiques, nos prototypes et parfois des wireframes.  Nous nous en servons pour collaborer avec nos clients qui ont déjà leurs maquettes et un design system en place ou sur les projets où tout est à construire. Dans ce cas, nous pouvons partir de zéro sur Figma et créer une librairie de composants, les maquettes graphiques et les prototypes. Figma est aussi un très bon support de collaboration entre les designers et les développeurs.

Adobe XD

Pour les maquettes graphiques et les prototypes, nous pouvons aussi utiliser Adobe XD. C’est également un outil complet qui permet de concevoir des wireframes, des maquettes graphiques et des prototypes.
Nous pouvons travailler indifféremment sur Figma ou Adobe XD. Nous nous adaptons aux besoins du client et du projet. Par exemple, s’il existe des maquettes réalisées sur XD, nous pouvons les reprendre et poursuivre le projet sur cet outil.

Cette liste est bien sûr non exhaustive, il existe d’autres logiciels de maquettage et de prototypage comme : Axure, SketchMarvel App, Invision, Justinmind, et bien d’autres…

———————————–

Vous l’aurez compris, passer par ces différentes étapes pour concevoir une UX satisfaisante avec une UI intuitive et graphiquement engageante est un facteur-clé de succès pour votre application. En effet, si vous proposez des fonctionnalités pertinentes mais une expérience qui n’est pas fluide et engageante, le taux d’utilisation de votre application risque de rester très faible.

Les différentes étapes de conception favorisent la collaboration avec les parties prenantes du projet et aident à construire une application qui répond aux besoins et attentes des utilisateurs.

Vous avez un besoin en Design ? Que ce soit un accompagnement en UX Design ou la production d’interfaces (UI Design), nos experts sont là pour vous. N’hésitez pas à nous contacter !