.jpg)
Publié le
par
Hello, moi, c’est Alicia, je suis développeuse chez MerciYanis, et de retour pour un second article ! Cette fois-ci, après vous avoir parlé de notre fonctionnement côté équipe de développement, je reviens pour vous parler de notre plateforme, des besoins du client jusqu’aux maquettes finales tout en passant par notre identité visuelle, découvrez les coulisses de notre fonctionnement côté produit. C’est par ici 👇
MerciYanis, en étant une startup issue de l’Iot Valley, a pu bénéficier de briques technologiques communes à toutes les startups dans le but de bénéficier d’un gain de temps en développement. De ce fait, un grand nombre des choix esthétiques de la plateforme repose sur ce qui se trouvait au sein de ce même code commun (les icônes, la structure des diverses pages, …). En plus de ces briques technologiques, nous profitions gratuitement de l’aide de designers de l’Iot Valley qui s’occupaient de créer pour nous des maquettes de nos futures fonctionnalités. Cependant, une fois notre phase d’incubation à l’Iot Valley terminée, les diverses aides de l’équipe de l’Iot Valley (développeurs, designer, ...) n’étant plus gratuites, nous travaillions alors avec des prestataires afin de les remplacer. Dans un “contexte” où nous essayons de faire attention aux dépenses faites, il était important de s’interroger sur l’indispensabilité de ces prestations pour nos fonctionnalités.
Pourquoi ces prestations ont-elles été nécessaires ? Eh bien car, à ce jour, nous ne possédons pas de designer au sein de notre équipe. Néanmoins, nous le savons, il est nécessaire pour nous d’avoir en amont du développement des maquettes pour les fonctionnalités que nous prévoyons de sortir. Alors comment continuer à disposer de maquettes, sans designer au sein de l’équipe et en évitant de passer par des prestations ?
En se demandant si des membres de l’équipe sont en mesure de le faire !
Les deux principaux membres de l’équipe produit sont Élise (CTO) et Guillaume (CEO). Ce sont eux qui gèrent l’intégralité de notre roadmap et qui chaque semaine discutent des besoins de nos clients. J’interviens parfois dans certains de leurs points car, tout comme Élise, je m’occupe aujourd’hui de la réalisation des maquettes.
Les maquettes sont pour moi une étape indispensable car elles nous permettent de :
Les maquettes étant une étape essentielle au bon déroulement d’un projet, il est primordial pour nous de faire en sorte qu’en ayant pas de personnes dont la conception de maquette est le métier au sein de l’équipe, une régression ne se fasse pas ressentir. C’est pourquoi, afin de s’assurer que chaque fonctionnalité est correctement développée, nous avons mis en place une nouvelle méthode.
C’est Guillaume qui nous a proposé d’utiliser une méthode nommé “Discovery Discipline”
👉 Cet article ne traitera pas en détail de cette méthode et n’aura pas pour but d’expliquer comment nous l’utilisons de A à Z aujourd’hui.
La méthode repose sur 7 étapes, au cours desquels sont effectuées diverses activités permettant de produire un livrable à la fin. Tout cela dans le but de pouvoir nous aider à améliorer notre processus, allant de la rédaction du besoin des clients jusqu’à la validation de la solution proposée.
Une étape qui à ce jour nous a permis d’améliorer le rendu de nos maquettes est la cinquième étape de la méthode. L’étape nommée “STEAL”, qui a pour objectif de “Réutiliser des solutions existantes” Le but va être de chercher des “gold nuggets”, soit ”un bout de solution que quelqu’un a déjà inventé et que l’on pourrait réutiliser” en fonction de moments clés de la fonctionnalité que nous avons identifiés en amont.
Afin d’illustrer un peu plus mes propos, je vais utiliser pour exemple une des fonctionnalités présentes à ce jour sur notre plateforme, il s’agit de la configuration de l’espace. Cette configuration a pour but de permettre aux clients de bénéficier d’une plateforme qui leur est parfaitement adaptée en paramétrant leur espace de travail comme bon leur semble.
Parmi les moments clés de cette fonctionnalité, nous avons identifié la présentation de chaque paramètre.
Commence alors la fouille, à la recherche des gold nuggets 🔎 !
Le but était de fouiller un peu partout afin de trouver l’inspiration et de pouvoir s’en servir pour réaliser les maquettes du menu de configuration. Il peut sembler évident qu’il faille s’inspirer des travaux des autres afin de réaliser les maquettes. Mais personnellement, avant la méthode Discovery Discipline, je passais moins de temps à chercher des solutions déjà existantes afin de m’en inspirer. Aujourd’hui c’est l’inverse, je vais chercher sur plusieurs sites tels que Dribbble et Pinterest, jusqu’à avoir une idée de comment présenter notre fonctionnalité.
Généralement mes recherches se font sur 2 critères :
L’intérêt pour moi de chercher ces deux types de maquettes c’est qu’il est plus difficile de trouver des solutions avec à la fois un côté fonctionnel adapté et un visuel qui nous plaisent. Généralement nous recueillons pour un même moment clé plusieurs gold nuggets afin d’avoir suffisamment d’inspiration pour créer nos maquettes.
Revenons à notre exemple, nous étions donc à la recherche d’une présentation de chaque paramètre. En cherchant sur Dribbble, comme vous pouvez le voir ci-dessous, de nombreux résultats s’offrent à nous.
Sur la capture d’écran ci-dessus, le résultat encadré en bleu a inspiré le rendu de nos maquettes de configurations (capture ci-dessous).
En comparant vous remarquerez peut-être que nous avons repris l’idée d’avoir un titre, un switch pour modifier la configuration et une explication pour expliquer ce que cette modification engendre. Le gold nugget peut sembler éloigner de notre maquette, mais comme mentionné, il s’agit d’une inspiration, non d’une copie, et nous utilisons de nombreux gold nuggets afin de ne pas se baser sur un unique exemple.
Si pour cette fonctionnalité la recherche de gold nuggets était facile, ce n’est pas toujours le cas. C’est pourquoi nous avons créé un canal Slack où les membres de l’équipe peuvent nous remonter diverses idées. Pourquoi ? Parce que, même en naviguant sur de nombreux sites, il est parfois compliqué de trouver des solutions qui correspondent et desquels s’inspirer et comme nous utilisons tous divers outils, il est intéressant d’apprendre d’eux. Le but du canal c’est que les membres remontent ce qu’ils ont apprécié lors de l’utilisation d’un outil puisqu’à ce moment-là, ils se sont retrouvés à la place de l’utilisateur et ont apprécié l’expérience qu’ils ont eue (c’est ce que nous souhaitons faire ressentir à nos clients chaque fois que nous développons une fonctionnalité pour eux).
Après avoir fait le plein d’inspiration, vient le moment de faire les maquettes !
Le maquettage, comme j’ai pu le mentionner précédemment, est une étape indispensable. S’il est nécessaire que les maquettes soient complètes, un bon conseil serait de tout de même éviter de faire des maquettes trop ambitieuses dès le début. Nous nous assurons qu’elles sont complètes (qu’elles répondent aux besoins du client) et mettons de côté toutes les améliorations possibles mais qui prendraient du temps à développer.
Dans un contexte où nous avons plusieurs fonctionnalités à développer et un nombre de développeurs limité, il est important de développer des fonctionnalités répondant aux besoins des clients et de ne pas se retarder en intégrant des fonctionnalités qui retarderaient la sortie d’autres.
Lorsque le besoin du client est spécifié et que l’étape “STEAL” est terminée, vient le moment de réaliser les maquettes. Et si nous utilisons Figma pour les concevoir, nous ne commençons pas toujours par là. Plus le besoin du client va être spécifique ou complexe plus nous allons devoir itérer sur les maquettes. S’il s’agit d’une petite fonctionnalité comme l’ajout d’un nouveau champ, la modification de la mise en page et que nous savons directement ce que nous souhaitons faire, nous réalisons directement la maquette en couleur sur Figma.
Cependant, pour les fonctionnalités qui nécessitent plus de réflexion (la configuration de l’espace des clients, l’ajout de document sur la plateforme …) nous allons d’abord concevoir des wireframes (il s’agit d’une représentation de basse fidélité qui englobe le contenu de notre fonctionnalité et son agencement, sans avoir un rendu visuel à la fin, contrairement à des maquettes).
Pour les fonctionnalités les plus “complexes” nous suivons généralement la trame suivante :
Élise et Guillaume notent les informations qu’ils possèdent sur le cas d’usage en fonction de ce dont le client leur a fait part. Puis nous rédigeons ensemble les spécifications à l’aide de la méthode Discovery Discipline. Cela nous permet d’avoir une vraie compréhension du cas d’usage et de faciliter les étapes suivantes.
Je réalise plusieurs wireframes sur papier afin qu’Élise et Guillaume les challenges et que nous décidions ensemble des idées à garder ou non. Lors de la réalisation des wireframes, si je ressens que la fonctionnalité est complexe je demande également à Élise et Guillaume de faire chacun les leurs. Être plusieurs à faire des croquis d’un même cas d’usage nous permet de comparer les idées de chacun pour par la suite être convaincu de la solution que nous allons proposer. En fonction de notre conviction sur la solution à laquelle nous sommes parvenus, soit nous décidons qu’elle est adaptée, soit nous refaisons à nouveau un point en proposant de nouveaux wireframes prenants en compte les remarques remontées précédemment.
Comme notre plateforme est customisable par nos clients et qu’elle possède de ce fait de nombreuses spécificités, il est essentiel que tous les textes de la plateforme soit facilement compréhensible. Afin de s’assurer que cela est bien le cas, je réalise des points avec Alexia une fois les wireframes validés afin que nous voyions ensemble comment formuler les différentes phrases à intégrer au sein de la plateforme.
Contrairement à moi, Alexia étant de l’équipe Marketing et Communication, a plus de facilité à trouver les bonnes tournures de phrase (vous l’avez sans doute surement constaté à travers le site MerciYanis !). Après avoir fait les maquettes sur Figma, ajouté des couleurs, reformulé les phrases et amélioré le style générale de la page j’ai pu passer à l’étape suivante.
Pour certaines fonctionnalités, les plus conséquentes, nous avons également inclus une phase de test. Le principe est le suivant : faire tester la dernière version des wireframes à des membres de l’équipe qui n’ont pas encore été dans le processus. L’objectif est d’observer le comportement de l’utilisateur afin de comprendre si sans indication et si en bénéficiant seulement d’un énoncé tel que 'Ajoute un document” les maquettes sont suffisamment intuitives pour savoir comment faire. Pour cela je rédige en amont une liste d’actions (que j’utiliserais pour chaque entretien afin d’éviter des biais), établi selon ce que le client souhaite pouvoir faire.
J’organise alors un point tour à tour avec chacun d’entre eux (environ 3 personnes) afin de leur faire tester ces mêmes actions. Pour cela, via Figma, j’ai ajouté des actions qui simulent ainsi le fait de cliquer sur des boutons, d’aller d’une page à une autre, ... . Le point se déroule de la façon suivante : j’énonce l’action à effectuer et regarde s’ils ont réussi, et comment.
Voici par exemple une capture d’écran de notes prises lors des tests de la fonctionnalité de modification de documents sur notre plateforme.
Sur l’exemple ci-dessus nous avons :
Ce que je souhaite vous montrer ici est qu’en réalisant les tests, aucune des trois personnes n’a réussi à effectuer l’action demandée qui était de supprimer un fichier. Pourquoi ? Car la maquette proposée était trop complexe. Une personne a effectué une mauvaise action et les deux autres personnes ont effectué une action qui n’était pas prévue. Faire ces tests avec eux m’a permis de réaliser qu’il était nécessaire de revoir les maquettes et en discutant, j’ai pu comprendre d’où venait le problème et le résoudre.
Une fois leur avis regroupé les maquettes sont ensuite améliorées et proposées au “Comité produit”. Il s’agit d’un groupe composé de plusieurs membres de MerciYanis de différentes équipes (Sales, Dev, Admin). Le but est d’avoir des personnes d’équipe différentes afin de bénéficier de multiples retours, car n’étant pas sensibles aux mêmes choses, nous nous assurons ainsi que la solution correspond à tous.
❗Erreur qu’il nous est arrivé de faire : Le but n’est pas de leur montrer toutes les maquettes réalisées, car lorsqu’une des deux est choisie, les personnes ayant voté pour l’autre sont déçues. Réalisant moi-même les maquettes il m’est parfois difficile pour de choisir la plus adaptée. Il m’arrive donc de sélectionner une maquette en amont avec Guillaume et Élise avant de la proposer au reste de l’équipe
Après avoir fais le plein de retours et d’améliorations pour le futur, les maquettes sont finalisées puis développées.
Le processus allant de la spécification du besoin jusqu’à la conception de maquette finale peut sembler chronophage, mais il est nécessaire afin de s’assurer que la solution que nous allons proposer à nos clients est complète, intuitive et agréable à l’utilisation.
Avant de conclure cet article, j’aimerais vous expliquer aujourd’hui la vision que nous avons pour l’apparence de la plateforme et toutes ses futures fonctionnalités.
Si je pense qu’actuellement nous ne ressentons pas la nécessité d’avoir de designer au sein de l’équipe ou du moins une personne spécialisée dans la conception de maquette, je me rends bien compte que le fait de ne pas avoir de personne ayant fait des études, suivie de nombreuses formations dans ce domaine ne nous permet pas de faire 100% tout ce que l’on souhaite.
En effet, même si je trouve des avantages à m’occuper à la fois du développement de la plateforme et de la conception des maquettes (comme le fait d’avoir une compréhension plus rapide du besoin par rapport à un prestataire ou le fait d’avoir une bonne compréhension de la maquette me permettant de pouvoir directement développer).
Je me rends compte qu’il serait peut-être plus facile pour quelqu’un dont c’est le métier, de trouver facilement les idées, de réaliser les maquettes, de faire animations, de réaliser des icônes, ...
Pour pallier à cela, j’ai commencé à lire plusieurs articles et regarder plusieurs vidéos sur l’UX (l’expérience utilisateur) et l’UI (l’interface utilisateur) dans le but de m’aider lors de la réalisation des maquettes. Parmi mes diverses lectures au sujet de l’UI, les mêmes conseils revenaient souvent. Des conseils sur les couleurs, la typographie, l’espacement, …
Inclure ces différents éléments et conseils à l’interface est important car c’est elle qui va guider l’utilisateur et qui grâce à son visuel va rendre son expérience agréable. Cependant, nous n’étions pas vraiment fixés sur tous ces petits éléments …
Cela s’est fait remarquer notamment lorsqu’Alexia, qui elle travaille sur le côté esthétique de notre site, m’a déconseillé d’utiliser trop de couleurs au vu d’une des maquettes. En est alors venue la question de quelle couleur utiliser ? Avec Alexia et Élise nous avons alors créé notre palette de couleurs pour la plateforme.
👉 D’ailleurs si vous voulez en savoir plus sur notre identité visuelle et la charte graphique de notre site, je vous invite à lire notre “plateforme de marque”.
Pour définir cette palette nous nous sommes basés sur les divers conseils provenant d’articles que j’avais lus.
En suivant les conseils nous avons donc sélectionné :
Nous avons décidé de garder le bleu en couleur principal car nous apprécions la signification qui lui est associée, et car de par notre logo il s’agit d’une couleur qui nous représente,
Nous avons choisi de prendre du violet car nous apprécions son association avec le bleu,
Nous avons choisi de reprendre les couleurs du site pour le fond (blanc - beige) et la couleur des textes (gris).
Nous avons également choisi d’ajouter 3 couleurs (déjà présente sur notre plateforme) à notre charte graphique. Il s’agit du rouge (pour les erreurs), du vert (pour les succès) et du jaune orangé (pour les avertissements).
Il est important pour nous que la plateforme soit agréable, et pour renforcer son côté intuitif nous souhaitons simplifier la vie de nos utilisateurs en utilisant ces couleurs afin qu’en un coup d’oeil ils puissent voir si tout se passe correctement.
C’est le cas notamment sur notre vue planification qui en un coup d’oeil permet à nos clients de vérifier que tout se passe comme voulu au sein de leurs locaux !
Avoir une palette bien définie me facilite grandement la réalisation des maquettes, et permet d’assurer une cohérence lors de la phase de conception.
Voici notamment un petit exemple d’avant / après de la maquette de configuration de l’espace dont je vous parlais tout à l’heure.
.png)
.png)
Afin d’intensifier le nouveau style que nous souhaitons donner à notre plateforme j’essai également, de créer nos propres illustrations et icônes (c’est le cas notamment sur les QR Codes 2/3/4 en 1). Alors dites-nous, que pensez vous de ce avant / après ?
Concluons cet article avec un récapitulatif des conseils qui nous aident dans notre fonctionnement chez MerciYanis :
Je l’ai mentionné plusieurs fois au sein de cet article, mais une maquette incomplète peut provoquer des itérations qui ne sont pas nécessaires et donc une perte de temps. Dans les cas les plus catastrophiques une maquette incomplète pourrait faire modifier tout le code derrière, pire, si on se rend compte trop tard qu’il manque quelque chose, la fonctionnalité pourrait sortir incomplète. Que ce soit les spécifications ou bien les maquettes il est donc important que tout soit toujours à jour et complet. Évitons de nous faire perdre du temps en revenant en arrière inutilement !
Bien sûr, nous avons toujours envie de proposer le top du top à nos clients, mais lors de la conception des premières maquettes il vaut mieux garder le focus sur ce qui répond aux cas d’usages et non ce qui serait intéressant de faire mais qui serait du ”bonus”. Cela nous permet d’éviter d’être en retard sur d’autres fonctionnalités mais également d’assurer que ce que nous allons proposer soit de meilleure qualité. Nous notons chaque amélioration que nous voyons possible et les faisons lorsque nous disposons de plus de temps.
Que vous fassiez ou non partie de l’équipe produit lorsque vous utilisez un outil, logiciel, … n’hésitez pas à faire des captures d’écran si vous appréciez l’expérience qu’il vous fournit. Cela pourrait être une source d’inspiration pour la réalisation de maquette.
Parfois, sans même sans rendre compte, les maquettes réalisées peuvent ne pas être compréhensibles. C’est pourquoi il est important de demander du feedback aux membres de son équipe afin de s’assurer que la solution que proposé correspond aux clients et est clair (⚠️ Attention cependant, tous les avis ne sont pas toujours bons à prendre, donc selon l’expérience ou non de la personne il faut savoir dissocier les bons des mauvais retours).
C’est la fin de cet article ! J’espère que vous avez apprécié le lire et espère avoir pu vous apprendre 2-3 choses.
PS : Et d’ailleurs pour nos clients, n’hésitez pas à nous faire vos retours sur la plateforme, ce que vous aimez, n’aimez pas 😊.
Et que pensez-vous de nos dernières fonctionnalités que sont les pages de configurations et les QR Codes de documents ?
par
Une fois par an, chaque membre de l’équipe prend la plume pour parler d’un sujet qui lui tient à cœur. Aujourd'hui, je vous raconte comment les jeux vidéos m’aident dans mon métier de CEO. Branchez vos manettes, on va le savoir ! 🕹️
Découvrir
par
Depuis 2022, nous mettons la barre toujours plus haut pour faire découvrir à nos convives des Environnements de Travail connectés et innovants. Puisqu’il y a de grandes chances que vous ayez lu le titre de cet article avant d’arriver jusqu’à la fin de ce paragraphe, vous le savez, nous avons débarqué ce matin chez Newen Studios.
Découvrir
par
Découvrez le monde dynamique de l'IoT dans le secteur immobilier. Apprenez-en plus sur les acteurs clés tels que les fabricants, les intégrateurs, les FMers, les fournisseurs de GMAO et les startups, et leurs rôles et partenariats pour renforcer l'efficacité opérationnelle. Explorez les tendances actuelles et les statistiques pour une compréhension complète du marché.
Découvrir
