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.

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.

Ateliers de cadrage produit

Nous avons tout d’abord mené plusieurs ateliers pour cadrer le Go-to-Market et définir une roadmap :

• Que veut-on accomplir avec Wavenn ?

• Qui est l’utilisateur et quel est son besoin ?

• Comment peut-on y répondre ? Avec quelles fonctionnalités ?

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. 

Afin de structurer la vision des parties prenantes autour d’un plan unique, nous avons défini une vision produit, le "WHY" de Wavenn : L’objectif du produit était donc de rendre l’investissement responsable accessible au plus grand nombre

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.

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 « Must-Have » et celles « Nice-to-Have ».

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.  

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.

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. 

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.

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.

Wireframes

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. 

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.

Création de composants

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.

Conception du prototype final

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. 

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é.

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.

Handoff au développeur

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.