ARCHI

We look UP

Lupy 🦄

PROZ

Le Cheval Digital

Flèches rouges

Absorption

point zip

LA DIFF

Bureau Tictacto

Frame-ux

Milit

Neodelta

Menthalo

Aristys

Brigade 123

Cleever

Tri-Force

Eleuthera

<h2>Informations générales</h2><p>Lien du site web : <a href="https://www.eleut-hera.com/" rel="noopener noreferrer nofollow" target="_blank">https://www.eleut-hera.com/</a></p><p>DA : Justine Baranger</p><p>Développeur Webflow : Adrien Schaefers</p><p>Durée : 2 jours</p><p></p><h2>Client</h2><p>Le client avait exprimé son souhait de disposer d'une page vitrine pour son agence, afin de présenter de manière claire et concise les différents services qu'il propose à ses clients.</p><p></p><p>Dans le cadre de ce projet, nous avons utilisé la méthode "Client First" de Finsweet pour concevoir une structure de page claire et organisée, en mettant l'accent sur les besoins et les attentes du client.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleehab7g0gbh5xic7eggfpxx.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clee68erh0c3v5xij5dkmb031.jpg"><div class="image-overlay"></div></div></div></div>

En collaborant avec une Directrice Artistique, nous avons aidé Eleuthera à présenté son offre de services via un site Webflow multilingue

Webflow

Web Design

Intégration d'une page vitrine multilingue pour une agence digitale

LaReserve.tech

<h2><strong>Informations générales :</strong></h2><p>Lien du site web<strong> : </strong><a href="https://www.lareserve.tech/" rel="noopener noreferrer nofollow" target="_blank">https://www.lareserve.tech/</a></p><p>UX &amp; DA : Flora Sié<br>Développeur Webflow : Adrien Schaefers<br>Durée : 1 semaine</p><p></p><h2>Client</h2><p>Bayes Impact est une ONG qui s'engage dans des projets visant à résoudre des problèmes de grande envergure grâce à l'implication de "réservistes", des bénévoles engagés dans les enjeux environnementaux et sociaux actuels.<br></p><p>Dans ce contexte, Menthalo est intervenu pour intégrer le site web de la réserve Tech. </p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkux4bs10rj86sha3njshrya.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clkuwkmpa0qya6pf4dxh79tr7.jpg"><div class="image-overlay"></div></div></div></div><p><br><br><br></p>

Menthalo a reçu une mission consistant à intégrer le site web de la réserve.tech, qui est un programme de l'ONG Bayes Impact. Ce programme vise à mobiliser les citoyens pour élaborer des solutions rapides en période de crise.


Intégration du site web de laReserve.tech

Skeex

<h1 style="text-align: start">Client</h1><p style="text-align: start">Skeex est un produit qui combine un outil conversationnel et un outil de prise de notes pour faciliter la génération automatique de comptes rendus de réunions, sous forme d'une application SaaS.</p><p style="text-align: start"></p><h1 style="text-align: start">Contexte</h1><p style="text-align: start">Skeex existe depuis un an avec un produit fonctionnel et une base d'utilisateurs, avec lesquels il a identifié les éléments clés à améliorer pour entrer dans une phase plus avancée de développement de l'identité et de la cohérence des interfaces. Skeex a évolué de manière incrémentale et a identifié des petites incohérences dans l'expérience utilisateur. Il a besoin d'une identité et d'un design cohérent pour soutenir son ergonomie.</p><p style="text-align: start"></p><h1 style="text-align: start">Besoins</h1><ul><li><p>Définition de l'identité de marque</p></li><li><p>Révision de l'expérience utilisateur du MVP (Minimum Viable Product)</p></li><li><p>Identification des fonctionnalités essentielles</p></li><li><p>Conception d'un système de design</p></li><li><p>Réalisation des pages principales du produit</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx55nzi175q5weo0oge1ll8.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx55gfg160m5vedd6yth4v4.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx55661160i5ved4h5w53ev.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx54f2l17585weo5ouz92fk.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx53azc174g5weo7oggexf2.png"><div class="image-overlay"></div></div></div></div></li></ul>

Nous avons aidé Skeex à transformer leur produit fonctionnel en un outil cohérent, via une réflexion autour de leurs fonctionnalités principales et la création d'un Design System

Product strategy

Product Design - UX/UI

Construction d'un Design System pour un outil de prise de notes

Wavenn

<p>Wavenn est une plateforme de gestion d'investissement responsable. Elle vise à rendre la finance et l'investissement éthiques, simples et accessibles à tous, afin de permettre à ses utilisateurs de placer leur argent dans des actifs respectant les Accords de Paris.<br><br>Au sein d’un marché en transformation, avec de nouvelles fintech qui veulent concurrencer les banques traditionnelles, l’équipe Wavenn avait besoin de cadrer son produit et d’identifier les features primordiales pour le Go-to-Market. Il y avait donc la nécessité de construire une stratégie produit au sein d’un écosystème low-code, avant de concevoir le premier prototype interactif. Ce prototype devait illustrer la simplicité avec laquelle il était possible d’ouvrir et de gérer son compte Wavenn, tout en offrant une transparence maximale sur les actifs financés.</p><p></p><h1>Ateliers de cadrage produit</h1><p></p><p>Nous avons tout d’abord mené plusieurs ateliers pour cadrer le Go-to-Market et définir une roadmap :</p><ul><li><p>Que veut-on accomplir avec Wavenn ?</p></li><li><p>Qui est l’utilisateur et quel est son besoin ?</p></li><li><p>Comment peut-on y répondre ? Avec quelles fonctionnalités ?</p></li></ul><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r5ay1o02e170jd85oz6f17.png"><div class="image-overlay"></div></div></div></div><p>L’idée de Wavenn part du constat qu’aujourd’hui 87% des produits d’investissement ne sont pas responsables, ce qui fait de l’épargne le premier pôle d’émissions de CO2 des particuliers. Investir responsable se révèle compliqué, opaque et chronophage, car il faut pouvoir différencier l’investissement réellement responsable du greenwashing.&nbsp;</p><p></p><p>Afin de structurer la vision des parties prenantes autour d’un plan unique, nous avons défini une vision produit, le "WHY" de Wavenn :<strong> L’objectif du produit était donc de rendre l’investissement responsable accessible au plus grand nombre</strong></p><p></p><p>Afin de concevoir un produit pertinent et efficace, il fallait définir les besoins et les attentes de ses premiers utilisateurs. Ce profil sera évidemment amené à changer au fil des itérations et des développement produit, sur la base d’une recherche utilisateur complète.</p><p></p><p>Une fois ces éléments définis, nous pouvions commencer à lister les potentielles fonctionnalités de Wavenn. Nous avons ensuite organisé cette liste selon la méthode de l’Affinity Map, qui consiste à créer des clusters thématiques de fonctionnalités. Enfin, nous avons différencié, au sein de ces catégories les fonctionnalités «&nbsp;Must-Have&nbsp;» et celles «&nbsp;Nice-to-Have&nbsp;».</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r5dpcx02jr70gmflj0he2x.png"><div class="image-overlay"></div></div></div></div><p>Pour matérialiser ces features et débuter un travail de concrétisation du produit, nous avons ensuite listé l’intégralité des données qu’il serait nécessaire de récolter auprès de l’utilisateur afin de permettre chacune de ces fonctionnalités. &nbsp;</p><p></p><p>L’étape finale de l’atelier a permis de prioriser les fonctionnalités envisagées afin de définir une roadmap produit. Selon leur impact et leur complexité de mise en place, les fonctionnalités étaient rangées dans une matrice, puis ordonnées en une série de versions du produit.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r5lpc302ms70gmatyd9jxt.png"><div class="image-overlay"></div></div></div></div><p>Lors d’un second atelier, nous avons cartographié l’expérience que Wavenn proposerait en se basant sur les éléments précédemment définis. Cet UX Mapping s’étalait de la première visite sur le site à la manipulation du dashboard. Pour chaque grande étape du parcours, nous avons listé des Actions, des Questions, des Delightful Moments, des Pain Points et des Opportunités.&nbsp;</p><p></p><p>Il en est ressorti que notre challenge principal s’inscrivait dans les premiers moments d’interactions avec Wavenn : étant un nouveau produit financier, il doit susciter à la fois la confiance et l’intérêt des utilisateurs, de sorte à les pousser à effectuer une première simulation d’investissement. Si cette simulation est rapide, claire et transparente, il est plus probable que l’utilisateur devienne un client. Toute l’expérience Wavenn repose pour l’instant sur ce processus, c’est pourquoi nous avons décidé de l’optimiser au maximum.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r5msjk02n570gm2y05bsjl.png"><div class="image-overlay"></div></div></div></div><p>Une fois le cadrage produit effectué, nous avons débuté la conception par la construction d’un User Flow, afin de découper l’interface en plusieurs pages, les agencer les unes par rapport aux autres, structurer les processus liés à chaque action de l’utilisateur et mettre en évidence les interactions omnicanales.</p><p></p><h1>Wireframes</h1><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r5x3b002mr70jdbod60wbr.png"><div class="image-overlay"></div></div></div></div><p>Une fois l’architecture de l’interface définie, nous avons commencé à travailler sur la hiérarchie de l’information au sein des pages. Pour ce faire, nous avons conçu des wireframes, avec des niveaux de fidélité graduels, afin d’itérer sur la disposition des éléments les uns par rapport aux autres et d’ajuster la construction des pages.&nbsp;</p><p>Cette étape nous a permis de réduire le nombre de pages de la simulation en organisant logiquement les questions, en fonction de leur complexité et de leur caractère personnel. Nous avons également clarifier au maximum les indicateurs au sein du dashboard, afin qu’un utilisateur sans connaissances financières puisse comprendre son portefeuille.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r5xckc02mv70jd560ebf5f.png"><div class="image-overlay"></div></div></div></div><h1>Création de composants</h1><p></p><p>Une fois le squelette établi, nous pouvions passer à la conception des composants. Il nous a fallu définir des fondements pour l’identité graphique et les intégrer dans une variété de composants d’interface. Nous souhaitions créer un kit d’interface utilisateur suffisamment complet pour que la conception des prochaines fonctionnalités soient très rapides pour le client. Nous avons donc découpé ces composants en catégories (input, menu, CTAs, cartes…)et nous nous sommes appuyés sur les fonctionnalités avancés de Figma en termes de composants (variants, properties, interactions) afin de leur ajouter une dimension flexible et automatique, qui permettrait de décliner l’interface sur mobile facilement. Ces composants ont vocation à être améliorés au fur et à mesure de la conception de Wavenn.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r6f69302wa70gmdx7i76h3.png"><div class="image-overlay"></div></div></div></div><h1><strong>Conception du prototype final</strong></h1><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r70cv8033o70gmgm7ub85x.png"><div class="image-overlay"></div></div></div></div><p>La conception du prototype final a été dirigée par la nécessité d’apporter un MVP efficace, clair pour des utilisateurs novices en finance et rapide à prendre en main.&nbsp;</p><p></p><p>La cohérence entre le processus de simulation et le dashboard a été assurée grâce aux composants et à l’utilisation d’un layout en grille régulier. Ce layout a été le fruit de plusieurs itérations mais était nécessaire pour que l’UI de Wavenn se différencie des autres acteurs du marché. Nous avons également fait un travail de data visualization pour chaque indicateur, afin de clarifier au maximum la lisibilité.</p><p></p><p>Nous avons finalement paramétré tous les liens d’interactions et les animations entre les pages, desktop et mobile, afin de livrer aux développeurs un prototype le plus interactif et détaillé possible.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cl9r70pdr030f70jd5ij7eujv.png"><div class="image-overlay"></div></div></div></div><h1><strong>Handoff au développeur</strong></h1><p></p><p>Bien cadrer la phase de handoff est primordial afin d’assurer une cohérence entre le prototype et la version développée. Nous nous sommes donc assurés que notre conception était adaptée à la façon de travailler des développeurs. Nous avons mis en place une nomenclature claire et arborescente et nous avons produit de la documentation pour faciliter leur prise en main.&nbsp;</p>

Nous avons accompagné l'équipe Wavenn dans la création du premier prototype de leur produit, de la simulation d'investissement au suivi des performances

Conception d'un service d'épargne éco-responsable

Soleil vert

<h2 style="text-align: start">Client</h2><p style="text-align: start">Soleil Vert est une initiative du collectif Panache, un service qui rassemble les acteurs de l'énergie renouvelable et les artisans d'entretien du patrimoine traditionnel français.</p><p style="text-align: start"></p><h2 style="text-align: start">Contexte</h2><p style="text-align: start">Soleil Vert est encore un projet en développement et pour faire connaître l'idée au grand public, l'association avait besoin d'une landing page pour dynamiser leur campagne de financement participatif.</p><p style="text-align: start"></p><h2 style="text-align: start">Besoins</h2><ul><li><p>Identité numérique pour le service</p></li><li><p>Définition du "tone of voice"</p></li><li><p>Prise de contact simple</p></li><li><p>Conception de la landing page</p></li></ul><p></p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx5ftcd166l5ved6coe75vo.png"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cldx5fzj8166p5vedcre6au8d.png"><div class="image-overlay"></div></div></div></div>

Nous avons collaboré avec Soleil Vert autour de leur identité de marque, graphique et conversationnelle, pour aboutir à une landing page claire sur leur engagement

Motion Design

Visual Identity

Graphic Design

Création d'une identité de marque dans l'énergie renouvelable

TP Sound Studio

<h2>Informations générales</h2><p>Lien vers le site web : <a href="https://tpstudio.webflow.io/" rel="noopener noreferrer nofollow" target="_blank">https://tpstudio.webflow.io/</a></p><p>Direction Artistique : Étienne Pascal</p><p>Intégration Webflow : Adrien Schaefers</p><p>3D / Motion : Damien Thomasseau</p><p>Durée : 1 semaine</p><p></p><h2>Client</h2><p>TP Sound Studio est un studio d'enregistrement et de compositions sonores, basé à Paris. Le client avait pour objectif de présenter une exposition des différents projets sur lesquels il avait travaillé. Son but était de mettre en avant son expertise et son savoir-faire en présentant une variété de projets, qui pourraient attirer l'attention et susciter l'intérêt de potentiels clients.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleefk0yh0hux5xij9n2r8ri8.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleefkfuh0hva5xij0jdrgo7i.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleefktja0eul5xice1o6gut4.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleefmga20ew85xiccgadbysx.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleefmmag0hyw5xijdpuj1lyd.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/cleefmqkf0hz05xij2ljn3x3o.jpg"><div class="image-overlay"></div></div></div></div>

Nous avons accompagné TP Sound Studio sur la direction artistique de leur site vitrine, que nous avons ensuite intégralement intégré sur Webflow

Conception d'une page vitrine pour un studio d'enregistrement

Patrimony

<p>Patrimony est un cabinet spécialisé dans l’accompagnement des familles sur l’optimisation et la préservation de leur patrimoine personnel et professionnel. Grâce à leur approche globale et une volonté de mettre le conseil au centre de leur relation, Patrimony permet à ses clients de conserver leur patrimoine sur plusieurs générations.</p><p></p><h1>Contexte</h1><p>L’objectif de Patrimony était de concevoir une webapp à destination de leurs clients. Cette plateforme devait permettre aux différentes familles accompagnées par Patrimony de gérer leur patrimoine : ajout des membres de la famille, paramétrage de donations, visualisation des transmissions, gestion des actifs financiers. Des ébauches de pages avaient été faites mais elles avaient besoin d’être précisées. Nous les avons accompagnés dans ce processus de conception en proposant une méthodologie rigoureuse : mise à niveau des éléments fournis, exploration graphique, conception atomique de composants puis construction des pages Desktop et Mobile de l’interface. Nous avons finalement détaillé la documentation afin que leur équipe interne puisse s’occuper de l’intégration.</p><p></p><h1>Objectifs</h1><ol><li><p>Exploration et définition de la vision produit</p></li><li><p>Concevoir une prototype interactif haute fidélité d’une vingtaine d’écrans</p></li><li><p>Fournir une documentation claire du travail accompli</p></li></ol><p></p><h1>Divergence</h1><p>La divergence est une étape d’ouverture que le designer encadre après avoir accueilli la vision du client. Elle a pour rôle d’inspirer et de favoriser l’exploration des solutions possibles.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2u8fg07c75vin2d2i6m2n.jpg"><div class="image-overlay"></div></div></div></div><h2>Accueil et identité</h2><p>Nous avons d’abord initié un dialogue avec Patrimony afin de comprendre leur positionnement et leur vision produit.</p><p></p><h3><strong><em>“On imagine que l’interface permette de voir les membres de sa famille, comme un portrait sur son bureau.”</em></strong></h3><p></p><p>En plus de cet aspect sensible, le client nous a également donné des informations techniques propres au secteur patrimonial, comme le fonctionnement des systèmes de successions, ce qui nous a permis de définir précisément ses besoins pour le produit à venir.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2ukdn07cz5vin6bgg25zn.jpg"><div class="image-overlay"></div></div></div></div><h2>Analyse et exploration de nouvelle structure de contenus</h2><p>Par la suite, nous avons analysé d’autres produits du secteur, que nous avons présenté au client afin de le sensibiliser aux bonnes pratiques en matière de design d’expérience. Couplées aux écrans qu’il nous a fourni, nous avons conçu 3 versions alternatives de certaines pages clefs, présentant différentes façons de structurer le contenu. À l’issue de 2 itérations, le client a pu choisir la version qui lui correspondait le plus :</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2ushr07cw5yifd43u2ug7.jpg"><div class="image-overlay"></div></div></div></div><h1>Convergence</h1><p>Une fois les paramètres d’identité de marque et de structure de contenus définis avec le client, nous pouvions rentrer dans une phase convergente qui avait pour objectif de transformer la vision d’origine en produit viable et actionnable.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2vf7907dk5vin5dlp2bh7.jpg"><div class="image-overlay"></div></div></div></div><h2>Création de composants</h2><p>Sur la base des pages clés fournies par le client, nous avons d’abord listé l’ensemble des composants nécessaires à la conception de l’interface Patrimony. Ces composants ont ensuite été conçus selon la méthode de l’Atomic Design :</p><p></p><ul><li><p><strong>Les atomes</strong> sont les éléments graphiques de base de l’interface. Ils ne peuvent être réduits ou décomposés en d’autres atomes. Un atome, seul, ne répond pas à un objectif fonctionnel. Il s’agit, par exemple, de la forme des boutons, d’un champ de saisie, d’un visuel de type icône, etc.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2vneu07eg5vin8aahanwp.jpg"><div class="image-overlay"></div></div></div></div></li><li><p><strong>Les molécules</strong> sont composées d’atomes. Elles forment les premiers éléments de l’interface. Par exemple, un bouton dans la couleur primaire et un libellé forment un bouton d’action. Ces molécules sont conçues de manière responsive en imaginant la manière dont leur forme va évoluer selon le support sur lequel elles apparaissent.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2vw3y07ds5yifh5282g0k.jpg"><div class="image-overlay"></div></div></div></div></li><li><p><strong>Les organismes</strong> sont des combinaisons de molécules et éventuellement d’atomes. Par exemple, un champ de saisie et un bouton d’action forment l’organisme de publication de message. Les organismes sont par nature des éléments contextuels.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2w3wo07em5vin5yyh1eap.jpg"><div class="image-overlay"></div></div></div></div></li></ul><p>L’idée était de concevoir un système dynamique et interactif en utilisant les fonctionnalités les plus avancées de Figma. Cela permettrait de proposer au client un prototype haute fidélité, qu’il serait facile de modifier et d’étoffer dans le futur.</p><p></p><h2>Construction des pages</h2><p>Une fois notre système de composants terminé, nous nous sommes attaqués à la cartographie de l’interface, afin d’illustrer la manière dont les différentes fonctionnalités s’imbriquaient. L’arborescence ainsi définie, nous avons utilisé nos composants pour construire les pages Desktop, que nous avons ensuite adaptées en version Mobile. Cette étape amène à penser l’ensemble des parcours pour visualiser l’expérience dans ses moindres détails. Il n’est donc pas rare que certains composants nécessitent une réadaptation.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2wf5t07ev5vin06l23efw.jpg"><div class="image-overlay"></div></div></div></div><h2>Animation des pages</h2><p>Afin que le client puisse se projeter dans l’expérience finale de son produit, il ne nous restait plus qu’à ajouter les interactions de scroll, hover et de transition entre les pages. Cette dernière étape permet également d’aboutir à un prototype haute fidélité, support de test idéal et base de travail pour les développeurs.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2ybrr07fv5vin86my4k8q.jpg"><div class="image-overlay"></div></div></div></div><h2>Documentation &amp; transmission</h2><p>Chez Menthalo, nous pensons qu’un projet abouti doit être intelligible et utilisable facilement par les autres parties prenantes. Cela passe par un travail de pédagogie et de documentation sur la façon dont le prototype est conçu. Tout d’abord, un naming explicite des composants est essentiel pour faciliter le travail d’intégration. En complément, nous avons privilégié la création de vidéo explicatives afin :</p><ul><li><p>d’expliquer comment était organisé le fichier Figma et donc faciliter la passation aux prochains designers ou développeurs</p></li><li><p>de présenter les prototypes Desktop &amp; Mobile, pour que le client puisse communiquer sur la plateforme à venir</p></li></ul><p></p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://cdn.collective.work/clen2z2pk07gk5vin9vccb9fg.jpg"><div class="image-overlay"></div></div></div></div><h1>Conclusion</h1><p>Nous avons accompagné Patrimony dans la conception d’un service complet de gestion de patrimoine : ajout et visualisation des membres de la famille, enregistrement de donations, paramétrages de clauses bénéficiaires, gestion d’actifs financiers, de biens et de documents sensibles... Tout ça en moins de deux mois ! Le développement a débuté directement, alors que le client présentait la nouvelle plateforme à ses clients lors d’une soirée d’inauguration. La plateforme a finalement vu le jour début 2023 pour un nombre réduit d’utilisateurs, dans une optique de tests réguliers et d’amélioration continue.</p>

Nous avons accompagné Patrimony dans la conception de leur nouvelle plateforme de gestion de patrimoine, destinée aux familles

Conception d'une webapp dans la gestion de patrimoine

Viasat Connect

<p>Depuis 10 ans, Viasat Connect distribue une constellation de logiciel de gestion de flottes et d’intervention. Après avoir utilisé pendant 10 ans, leur ancien produit de gestion d’intervention Aidoo, Viasat a choisi de développer un nouveau produit : Vector. Sa promesse est de simplifier la vie des équipes terrain et améliorer les conditions des interventions, à l’aide d’une Ui web qui facilite la planification et le reporting ainsi qu’une app mobile qui accompagne les équipes terrain tout au long de la mission.<br><br>Dans un premier temps, ils avaient besoin de faire le tri entre les fonctionnalités existantes et le développement de nouvelles dans le but de faire la différence avec les autres outils du marché. Dans un second temps, il fallait donner une forme, une identité au produit pour le faire tester et le faire vivre dans l’organisation.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://collective-document-public-prod.s3.eu-west-1.amazonaws.com/cl55s46633zq04qf9e00z6rf3.png"><div class="image-overlay"></div></div></div></div><p>L’accompagnement s’est déroulé en 3 phases :</p><p></p><p>1 - Recherche utilisateur : Nous avons traité la donnée disponible dans le patrimoine fonctionnel et utilisateur de l’entreprise. Puis, nous avons mené une veille concurrentielle, afin de déterminer les premiers parcours d’une expérience utilisateur idéale, sous la forme d’un MVP (Livrables : Personae, User journey/flow, wireframes lo-fi)</p><p></p><p>2 - Design System : Nous avons adopté une approche d’Atomic Design afin de concevoir de manière itérative les différents éléments de l’interface, afin que l’expérience proposée soit séduisante et cohérente. L’interface obtenue a pu servir de base pour les tests utilisateurs. (Livrables : Prototypes hifi, Design System)</p><p></p><p>3 - Hand off design : Il a fallu ensuite passer en phase de développement, afin que le produit prenne vie et devienne fonctionnel. Grâce aux méthodes agiles, nous avons travaillé avec le product owner aux découpages des tâches et à l’identification des problématiques de développement, qui renvoyait de temps en temps à des modifications design. Progressivement, nous avons donc construit une documentation solide ainsi qu’une bibliothèque de composants pour l’équipe de développement.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://collective-document-public-prod.s3.eu-west-1.amazonaws.com/cl55s7zpy3zr44qf9a55a4wy6.png"><div class="image-overlay"></div></div></div></div>

Nous avons aidé Viasat à concevoir leur nouveau produit Vector, via de la recherche utilisateur, la conception d'un Design System et le hand-off aux équipes techniques.

User Research

Conception d'une plateforme de Workforce Management

The Big Whale

<p><a href="https://www.thebigwhale.io/" rel="noopener noreferrer nofollow" target="_blank">The Big Whale</a> est un média libre et indépendant fondé par Raphaël Bloch et Gregory Raymond. Aujourd’hui lorsqu’on souhaite s’informer sur l’actualité autour du Web3, il est difficile de trouver une information fiable. Les deux journalistes se sont donc donné comme objectif de démystifier les concepts autour du Bitcoin, cryptomonnaies, DeFi et NFT.&nbsp;Le site web de The Big Whale doit permettre de présenter les produits de façon simple et claire en donnant la possibilité aux futurs clients de s'inscrire à deux types de newsletters (payante et gratuite).</p><p></p><p>Pour la réalisation du projet, nous avons accompagné nos clients sur l’ensemble de la production, de la phase de recherche à l’intégration du site web en passant par l’élaboration de la charte graphique. Nous avons veillé à ce que leurs goûts et imaginaires soient traduits par un site web ergonomique, simple d’utilisation. Nous avons pour cela mis en place une méthodologie adaptée afin de veiller à ce que les clients soient amplement satisfaits du travail fourni.</p><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://collective-document-public-prod.s3.eu-west-1.amazonaws.com/cl55sie973zu24qf9hxho89p6.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-wrapper"><img alt="" src="https://assets.website-files.com/6241b053821dec090218ba64/62ac991699ca117d2731a521_2-Userflow.jpeg"><div class="image-overlay"></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://collective-document-public-prod.s3.eu-west-1.amazonaws.com/cl55sqt4a3zqh4ph68r6oha4h.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://collective-document-public-prod.s3.eu-west-1.amazonaws.com/cl55sou4l3zpx4ph62rxh1lzk.jpg"><div class="image-overlay"></div></div></div></div><div class="image-container"><div class="image-row-wrapper"><div class="image-wrapper"><img src="https://collective-document-public-prod.s3.eu-west-1.amazonaws.com/cl55sqbuq3zw94qf9hrz1fhp5.jpg"><div class="image-overlay"></div></div></div></div>

Nous avons accompagné The Big Whale sur l’ensemble de la production, de la phase de recherche à l’intégration du site web en passant par l’élaboration de la charte graphique.

Élaboration d’une identité graphique et création de site web

<p>Chez Menthalo, nous avons à coeur de concevoir des produits mémorables et audacieux, qui susciteront la satisfaction et l’engagement de vos utilisateurs. Pour y arriver, nous mettons à votre disposition l’ensemble de nos expertises, issues de plusieurs années d’expériences à travailler avec des startups, des agences et des grands comptes.<br><br>Nous avons mis en place notre propre méthodologie de Product Design :</p><p></p><ul><li><p><strong>Compréhension de vos besoins</strong> et de votre mission par l’immersion</p></li><li><p><strong>Recherche utilisateur</strong> pour cerner vos utilisateurs</p></li><li><p><strong>Product Strategy</strong> afin d’aligner notre plan d’action avec vos enjeux business</p></li><li><p><strong>Conception d’un MVP</strong>, avec des fonctionnalités prioritaires, conçues avec soin</p></li><li><p><strong>Culture de l’itération</strong> pour améliorer le produit en continu</p></li></ul><p></p><p>En full remote ou en hybride, on est toujours chauds de donner des conseils et de discuter de nouveaux projets, donc n’hésitez pas à nous contacter ! 🌿</p>

Product Designer

Product Designer / Développeur Webflow 

Nous vous aidons à mieux comprendre vos utilisateurs afin de concevoir un produit adapté à leurs besoins et à leurs attentes.

Nous réfléchissons avec vous à la meilleure manière de proposer un produit que les gens aiment, adoptent et recommandent.

Product Strategy 

Nous mettons en place les conditions idéales pour générer des idées innovantes et nous organisons des ateliers collaboratifs avec vos équipes.

Idéation & facilitation

Nous construisons des parcours utilisateurs simples et efficaces pour permettre à vos utilisateurs de trouver rapidement ce qu'ils cherchent.

UX Design

Nous concevons des interfaces soignées, qui proposent un Look & Feel mémorable, peu importe le canal : mobile, desktop, vocal.

UI Design

Nous vous aidons à améliorer l'impact du design dans votre organisation en optimisant la collaboration entre les équipes.

733 collectifs