Mettre la marque au coeur de la conception du Design System

MiiMOSA est une plateforme de financement participatif dédiée à la transition agricole et alimentaire, existant depuis 2015. J’ai rejoins MiiMOSA en janvier 2021 comme Head of Product, et j’ai été rapidement rejointe par Charlotte, Product Designer, et Damien, Product Manager.

28 types de boutons et 18 typographies : le nombre d’éléments sur la plateforme MiiMOSA recensés par Charlotte, notre Product Designer, lors de son arrivée. Et encore, ce n’était que la partie émergée de l’iceberg ! A cela s’ajoutait un contexte technique de migration en micro-services, d’une stack entièrement en ruby on rails à un front en react.

Le constat était rapide : il nous fallait un design system afin de mettre en place de solides fondations pour l’UX et simplifier le travail sur le front.

Rapidement, nous avons commencé à nous pencher sur ce sujet pour obtenir des retours d’expérience et des best practices : webinars, articles, podcasts, rencontres… Toutes ces ressources nous ont beaucoup apporté, mais se focalisaient surtout sur l’exécution du Design System, sa mise en place, dans un objectif d’efficacité du travail de Product Design et de développement front. Un point essentiel nous paraissait rester dans l’ombre : comment faire en sorte que le design system soit l’incarnation de la marque autant qu’un outil d’UX ?

Comment avoir un design system qui non seulement nous fasse gagner du temps de conception et de développement, mais également nous permette de créer une expérience utilisateur différentiante et marquante ?

Une réflexion le positionnement de la marque MiiMOSA nous a paru incontournable pour pouvoir y arriver, et donc une collaboration étroite avec l’équipe Marketing.

Les relations Produit x Marketing sont rarement un long fleuve tranquille, nous voulons donc partager ici notre cheminement pour inclure le Design System dans une démarche plus globale d’incarnation d’une certaine identité de marque, et la façon dont nous avons collaboré pour faire en sorte de tirer le maximum de l’expertise de chacune de nos équipes.

L’article retrace nos étapes et apprentissages concrets, si vous avez envie de sauter directement à la fin de l’histoire, les keys learnings sont en bas de l’article ! 😊

Le cadrage du projet et de ses objectifs

La première étape a été d’embarquer l’équipe Marketing dans le besoin d’un Design System, afin de leur expliquer le concept et les objectifs de ce travail, et de leur exprimer notre besoin : une plateforme de marque, un univers et un tone of voice clairs.

Cette discussion nous a permis de rapidement dresser le constat que la plateforme de marque actuelle n’était plus adaptée :

  • MiiMOSA avait évolué, avec une extension de son offre vers le prêt, plus professionnel, financier et à plus large échelle que le produit historique de don avec contrepartie, qui était centré sur un ADN de communauté et de proximité
  • L’environnement concurrentiel lié à cette extension est différent, et plus compétitif (banques)

Nous nous sommes donc rapidement fixé comme objectif d’établir la plateforme de la marque MiiMOSA reflétant ce tournant dans la proposition de l’entreprise

  1. Traduire graphiquement cette nouvelle plateforme via des piliers appropriés
  2. Incarner cet univers dans toute l’expérience de l’utilisateur via le Design System
  3. Ouvrir la voie à l’évolution de la marque et du produit de façon solide et cohérente

Dans le cadre de MiiMOSA, le périmètre étant global, nous avons décidé d’allier nos forces à chaque étape, et non seulement en divisant le travail “marque” côté marketing et “design system” côté Produit.

La perception de la marque actuelle

Pour débuter ce travail, nous avons entamé par un double audit :

  • Un audit UX et UI
  • Un audit de perception de la marque par les utilisateurs actuels

Le lead a été à ces deux niveaux côté Produit, car l’expertise que nous pouvions apporter dans ce projet était notre connaissance poussée de nos utilisateurs actuels, et notre maîtrise des méthodologies de recherche utilisateurs. Grâce à la vue transverse du travail Produit, nous avions en tête la globalité du parcours utilisateur, des différents touchpoints que ceux-ci ont avec MiiMOSA.

Pour l’audit UX et UI, nous sommes passés par des méthodologies quantitatives, notamment le test Attrakdif.

Nous avons été accompagnées dans le challenge de notre trame d’entretien par notre partenaire Testapic. Le choix de se concentrer sur un parcours investisseurs pour le côté “contributeurs” de notre plateforme a été fait suite à l’objectif de l’évolution de la plateforme de marque de se concentrer sur un positionnement dans le secteur du prêt participatif.

Le test nous a permis de voir à l’échelle les problématiques de parcours rencontrées par nos utilisateurs, qu’ils soient contributeurs ou porteurs de projet : le test Attrakdif ne montrait pas de problème particulier sur l’UI, notamment grâce à une perception de grande simplicité sur les pages, mais la navigation était complexe, les utilisateurs ne sachant pas ce qu’ils trouveraient derrière chaque bouton, ce qui les attendait aux différentes étapes, avec une forte sensation d’imprévisibilité du produit.

Ce test nous a également permis de capter des ressentis dans l’interaction avec le produit, et de commencer à dresser des hypothèses sur les différences d’attente entre chaque partie de la plateforme.

Par exemple, les caractéristiques principales du produit actuel citées par les contributeurs étaient : simple, engagé et audacieux, alors que celles citées par les porteurs de projet étaient simple, engagé et à l’écoute. On pouvait déjà commencer à observer une forte identité commune, mais aussi une attente différente sur le positionnement de MiiMOSA par rapport à ces utilisateurs, les contributeurs attendant plutôt une sorte d’innovation, de “bousculement des normes”, et les porteurs de projet attendant un accompagnement et une personnalisation.

Pour l’audit de la perception de la marque, nous avons privilégié des tests qualitatifs, via des entretiens de 30 à 45 minutes, à la fois sur nos utilisateurs, et sur des personnes externes répondant aux critères de nos personae (recrutement effectué par Testapic également).

Le but était de pouvoir entrer en profondeur dans les perceptions des utilisateurs, leurs ressentis émotionnels, et de les faire réagir sur différents supports visuels.

Le questionnaire se divisait en 5 grandes parties :

  1. La perception du financement de façon globale. Le but de cette première partie était de comprendre quelles sont les représentations de l’utilisateur sur ce monde financier, et ses habitudes de gestion financière.
  2. Attitude & motivation envers financement participatif : comment l’univers du financement participatif est perçu versus l’univers bancaire, ce qui a amené l’utilisateur a considérer cette solution et comment il l’utilise.
  3. Perception des acteurs du financement participatif : rentrer plus en détail dans la perception des différentes marques qui structurent cet univers concurrentiel de MiiMOSA
  4. L’image de MiiMOSA : la perception de la marque, via l’évocation de son nom, ses représentations graphiques actuelles, et les expériences passées de l’utilisateur avec le produit. A ce stade nous ne montrions aucun élément, le but étant de voir quels étaient les éléments retenus, marquants. Un exercice très intéressant était celui du portrait chinois : si MiiMOSA était un animal, un personnage, un fruit / légume, une région du monde ?
  5. Perception de la charte actuelle : enfin dans une dernière partie, nous faisions réagir les répondants sur les supports visuels actuels : le logo, la plateforme, les communications publiques, les ads sur les réseaux sociaux, mais également plusieurs moodboards.

Pour la base externe nous avons gardé la même trame, en modifiant légèrement la partie “image de MiiMOSA” : si le répondant ne connaissait pas l’entreprise — ce qui était très largement le cas — nous creusions l’évocation du nom sur le type d’entreprise et le type de service.

Ces entretiens nous ont permis de mettre à jour :

  • 👀 La perception de notre univers concurrentiel, et le positionnement de notre activité au sein de cet univers. Par exemple il était clair à travers les tests que la perception du financement participatif est construite par opposition au monde bancaire, que ce soit dans les adjectifs positifs ou négatifs, tout est en miroir. Les deux univers sont donc considérés non pas comme des alternatives mais plutôt dans une relation de complémentarité de services.
  • 🌱 L’univers perçu de la marque MiiMOSA, les éléments les plus marquants et différenciants
  • 🌟 Les valeurs associées à la marque et au produit
  • 🖼 Les ressentis attachés aux représentations graphiques actuelles et les attentes. C’est sur ce point que notre aspect de produit “plateforme” ressortait le plus fortement : autant tous les utilisateurs avaient des tendances similaires pour la perception de l’univers concurrentiel, de la marque et des valeurs, autant les représentations graphiques attendues étaient différentes pour nos contributeurs ou pour nos porteurs. Tous cherchent à retrouver l’humain et la réalité du terrain, mais les premiers sont attachées à avoir une “fenêtre sur l’agriculture”, retraçant le trajet jusqu’au produit fini, dans une représentation idéalisée du travail agricol, alors que les seconds doivent impérativement retrouver une image fiable de leur quotidien. L’un des points d’apprentissages cruciaux fut également de voir la divergence entre les évocations de MiiMOSA de façon globale (partie 4), et celles issues des représentations graphiques actuelles : on ne retrouvaient pas dans les réactions aux visuels les principales évocations de MiiMOSA : manque de dynamisme, neutre émotionnellement, parfois manque d’authenticité sur le monde agricole et de représentations de l’humain.

La situation globale était donc celle d’une marque et d’un produit qui généraient un fort attachement émotionnel, mais dont la représentation graphique et la matérialisation de l’UX n’étaient pas au rendez-vous des projections des utilisateurs.

La plateforme MiiMOSA avant retravail branding et design system

L’établissement de la plateforme de marque

Une fois toute cette période d’audit et de compréhension réalisée, nous avons redonné la balle à notre équipe Marketing, car il s’agissait maintenant de faire un travail autrement différent : établir la plateforme de marque afin de créer une marque inspirante et attractive, compétitive, reconnaissable & distinctive, et crédible.

Pour cette étape la clé a été pour nous au Produit de comprendre que la connaissance de nos utilisateurs n’est pas suffisante, ou en tout cas qu’elle ne conduisait pas le choix stratégique à ce niveau. C’était une connaissance indispensable, mais pour pouvoir déterminer la plateforme de marque, le principal élément à prendre en compte était la cible aspirationnelle : ceux qui seront nos utilisateurs demain.

Cela implique presque un choix des utilisateurs actuels que l’on va décevoir : chose impensable côté Produit 😱

A la suite de ce travail, l’équipe Marketing avait défini la raison d’être de la marque, l’insight (une attitude ou croyance profonde, qui joue comme un frein/motivation à un comportement, sur laquelle la marque va chercher à agir pour définir une offre ou une promesse de notre cible), les valeurs, la personnalité et les racines de la marque, et ses avantages rationnels et émotionnels.

Les piliers de la représentation graphique de la marque

Avec cette plateforme de marque robuste, nous avons pu alors nous projeter sur les piliers de la représentation de la marque : le logo, les couleurs, la typographie, les concepts, le tone of voice.

A cette étape charnière nous avons choisi de travailler une piste en interne côté Produit, et une piste en externe via l’agence Dragon Rouge, à qui nous avons partagé tout le travail des étapes précédentes.

Notre piste en interne était également challengée par Dragon Rouge et par l’équipe Marketing, et côté Produit nous challengions la piste de Dragon Rouge. Ce mode de fonctionnement “hybride”, ni totalement internalisé, ni totalement externalisé, et en mêlant nos deux approches avec la casquette Produit et la casquette agence et Marketing nous a permis de créer des synergies réellement intéressantes dans le travail :

Côté Marketing, pousser le Produit à sortir de la recherche du “toujours plus fluide”, d’intégrer dans notre travail une certaine “fêlure du réel”, des imperfections donnant un relief particulier à la marque

Côté Produit, pousser le Marketing à prendre en compte une vue holistique des points de contact et d’usage des utilisateurs, et le besoin pouvoir de concrétiser de façon pragmatique une certaine représentation graphique, en mettant en perspective les choix graphiques dans le produit

Une fois les deux pistes suffisamment abouties, nous avons repris des tests de perception. Dans le cadre de ces tests, l’incarnation de chacune des pistes dans le produit a été réalisée par notre Product Designer, afin de créer une homogénéité sur la réflexion UX entre chacune.

Les tests ont été réalisés via notre outil Testpic sur des répondants correspondant à nos personae aspirationnels. Pour chaque cible, le test a été fait 3 fois afin de présenter les pistes dans des ordres différents, et de présenter également la représentation et le produit MiiMOSA actuels. Ces tests nous ont permis d’affiner chacune des pistes.

A l’issu de cette étape, nous avions tous les éléments pour trancher, et la décision finale a été prise par l’équipe Marketing, sachant que les deux pistes avaient été travaillées avec le Produit et étaient donc compatibles avec un travail d’UX et d’UI.

La déclinaison sur tout l’univers MiiMOSA

C’est là que le travail du Design System a officiellement commencé !

Avec tout le travail déroulé jusqu’ici, nous avions parfaitement en tête les objectifs de la marque, son positionnement, ses valeurs, sa personnalité, et ses piliers. Le Design system a pu en découler naturellement, de façon théorique à ce stade.

Par exemple, notre couleur primaire est le vert foncé #003F2C, qui apporte de la profondeur et une connexion au réel via une couleur qui se retrouve dans la nature, mais également du professionnalisme et du sérieux. Mais ce vert peut vite venir occulter l’audace et l’optimisme, éléments clés de la personnalité de la marque : il doit donc toujours être complémenté dans notre travail d’UI par d’autres éléments tels que le brush orange sous les mots-clés ou dans les pictogrammes, ou les touches de jaune pour venir mettre en avant des éléments-clés.

L’usage des photos et des pictogrammes a également été intégré dans notre réflexion sur le design system, leur équilibre et leur usage. Par exemple chaque page pouvant être une landing page doit comporter une photo pleine page immédiate pour incarner de façon homogène la fenêtre sur l’agriculture.

C’est ainsi que Seed est né ! Tout en réduisant de 83% le nombre de boutons et de 79% les formes de messages.

Pour matérialiser ces principaux concepts du Design System, nous l’avons appliqué sur nos pages principales sans toucher à l’UX. Cela nous a permis de faire une première itération d’ajustement en se confrontant aux contraintes du produit actuel.

Notre Product Designer a également travaillé avec la graphiste côté Marketing pour identifier tous les supports ayant besoin d’être adaptés, et pour prendre les partis pris ensemble, afin de s’assurer que tous les points de contact avec nos prospects ou nos utilisateurs incarneraient la même forte identité.

Définition de la stratégie de lancement

Lead : Marketing x Produit x Tech !

Notre contexte technique n’était pas des plus simples : une migration technique était en cours, d’une stack monolithe ruby on rails à des micro-services et un front en react / next. js. Cette migration doit nous permettre de nous affranchir des fortes contraintes du front actuel en ruby : nécessité de respecter une grille bootstrap, difficultés d’harmonisation, etc. Néanmoins chaque page à migrer représente un coût conséquent.

A ce stade nous avions également en tête les chiffres de trafic sur la plateforme MiiMOSA :

  • 55% du trafic arrive directement sur la HP
  • 2% du trafic passe par la page “se connecter ou s’inscrire”
  • Le reste du trafic arrive directement sur les pages projets

Les objectifs à concilier étaient alors multiples :

  • 💛 Embarquer les utilisateurs dans le rebranding : aucun utilisateur ne doit se sentir mis à l’écart du rebranding, le rebranding doit être compréhensible, et l’incohérence ne doit pas être trop forte d’une page à l’autre
  • ⏱ Implémenter le branding rapidement : ne pas attendre la migration dans sa totalité pour pouvoir faire vivre cette nouvelle identité graphique, notamment parce que toutes les nouvelles fonctionnalités conçues dans l’intervalle devraient être ensuite redéveloppées avec la nouvelle identité
  • ⛵️ Résoudre quelques gros painpoints d’UX, notamment la fluidité et prédictibilité de la navigation, fortement ressortie lors des tests

Nous avons alors travaillé avec l’équipe Tech sur plusieurs plans d’implémentation du branding, de la version la plus “light” à la version la plus immersive mais également la plus longue. Nous avons présenté ces pistes à la directrice Marketing et au CEO pour s’accorder ensemble sur le plan suivant :

→ Garantir l’homogénéité du produit, via une application des nouveaux piliers du design system sur toutes les pages

→ Mais une absence de refonte, et donc d’évolution UX sauf sur la Home Page et le header et le footer, sur laquelle nous voulions incarner cette évolution de façon plus forte et immersive, en s’affranchissant donc des contraintes du front en ruby, et avoir une réflexion en profondeur sur l’UX qui était ressortie comme un pain point majeur. Sur les autres pages l’application des piliers du design system est donc purement UI, et sans structure technique de design system sous-jacente.

Les avantages :

  • Une immersion garantie dans l’univers de la marque grâce à une nouvelle home page
  • Une homogénéité de la refonte graphique via l’application des piliers sur toutes les pages de la plateforme et tous les touchpoints commerciaux et marketing
  • Une amélioration du produit via un travail de discovery sur des éléments clés de l’UX pour la fluidité de navigation : la home page, le header et le footer
  • Un timing maîtrisé via la limitation du périmètre de la migration technique nécessaire

Les contraintes :

  • Un défi technique de pouvoir naviguer entre des éléments dans la nouvelle techno et des éléments dans la techno actuelle
  • Le développement du header et du footer de façon dupliquée, une fois dans la nouvelle techno et une fois dans la techno actuelle
  • Un risque sur le timing via la nécessité d’avoir une migration pour faire le reveal, même si son périmètre était réduit
  • L’application du design system sur la techno actuelle sans aide d’un outil comme Chakra UI (utilisé dans notre nouvelle techno)
  • La nécessité de devoir faire une mise en production globale de tous les éléments

Une fois cela décidé, le delivery a pu commencer, et en parallèle la discovery de notre Home Page, header et footer !

Pour mobiliser toute l’équipe Produit et Tech autour de cet enjeu stratégique, nous avons présenté tout le travail réalisé ainsi que le concept de Design system, sa première version, et sans oublier une formation Figma complète pour que chacun se sente à l’aise pour l’utiliser et y trouver les informations.

L’usage de Chakra sur les éléments migrés dans notre nouvelle tech nous a permis de détecter rapidement les petites incohérences, et le travail sur la Home Page de faire des ajustements au vu des réflexions UX conduites dans la discovery. Mais je laisserai notre brillante Product Designer, Charlotte, en parler plus en détail dans un prochain article 😁

Nous voilà donc aujourd’hui à vous partager le fruit de ces quelques mois de travail, débuté en mai 2021 et mis en production en février 2022, et nos quelques apprentissages !

Notre nouvelle plateforme MiiMOSA !

En conclusion, voici nos quelques clés pour donner au Design System la profondeur d’une marque forte, cohérente et différentiante.

Et à bientôt sur MiiMOSA !

--

--

Product manager passionated about innovation and growth topics!

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store