Refonte d’une GED en intégrant de l’IA

Contexte

Thomas est parti d’un constat : en France, l’éducation sur la gestion financière est très peu répandue.

La plupart des gens épargnent et aimeraient faire plus mais ne savent pas trop par où commencer.

C’est de là qu’est née l’idée de l’application mobile The French Enveloppe. Elle se base sur les principes du budget en base 0. Elle utilise le système des enveloppes pour répartir son argent en fonction de différentes catégories. Une dimension éducative permet de sensibiliser et éduquer l’utilisateur à la gestion financière.

Objectifs

Optimiser le parcours utilisateur

Intégré l’IA dans le produit

Points clés du projet

GED

IA

Univers graphique

UI kit

Parcours utilisateur – task flow

Après avoir défini les uses, j’ai proposé un atelier afin d’identifier les parocurs utilisatreurs de chaque USe case.

Pour ça rien de plus simple : un ordi, un figjam et 2 heures de travail !

Cet atelier m’a permis :

D’identifier des patterns de conception pour la création des wireframes
Répondre aux questions identifiées
Se mettre d’accord sur les différentes actions d’un parcours utilisateurs
S’appuyer sur les forces de mon client (ses connaissances métiers) et mon expertise afin de proposer la meilleure solution pour ses clients

Extrait du résultat de l’atelier « taskflow » réalisé avec FigJam.

Conception des interfaces

Une fois que nous avons identifié toutes les étapes de chaque use case, j’ai pu concevoir les différentes interfaces.

Au vu du nombre de uses case, nous avons priorisé les fonctionnalités et découper mon travail en trois grands lots.

Mon client était mon seul et unique contact. Ça évite d’avoir des retours incohérent et de perdre du temps. Dès que je lui présentais mes travaux, il échangeait avec ses équipes et me faisait un retour. On itérait jusqu’à valider la version.

Ainsi dès qu’un lot était validé, l’équipe de développement prenait le relais.

Cette méthode permet d’optimiser le temps de travail de toute l’équipe et de ne pas attendre la fin de la phase de conception pour commencer le développement.

La mise en place d’un UI kit permet aussi de gagner du temps. En effet, une fois qu’un composant est dessiné et codé, il est très facilement réutilisable et donc tout le monde gagne du temps. C’est une stratégie long terme. Sa mise en place se fait dès la conception des wireframes. Une fois l’univers graphique chois, j’aurais “juste” à mettre les composants en couleur et l’équipe de développement aura “juste” à changer les couleurs (c’est un peu plus complexe dans la vraie vie haha) mais vous voyez le principe.

Place de l’IA dans l’outil

La présence de l’IA dans cet outil de gestion documentaire est une vraie valeur ajoutée pour l’utilisateur et un élément différenciant pour l’entreprise.

Grâce à elle, les utilisateurs gagnent du temps dans la gestion et le suivi de leurs dossiers de location et vente de bien immobiliers.
Ils peuvent :

Chercher un document dans l’outil via un chat
Lui demander des informations
complémentaires sur le net ou en local
Lui demander d’écrire une réponse à un mail

Conception de l’Univers graphique

J’aime autant la partie UI que la conception UX. Je peux m’amuser avec les couleurs, les tupos et les formes !

Pour ce produit type SaaS, je suis restée sur quelque chose d’assez simple et épuré. Je ne voulais pas que ça ressemble à un sapin de Noël ou que l’utilisateur se perde à cause de fioritures inutiles.

La couleur de l’identité visuelle du client est le bleu.

Dans un premier temps j’ai proposé deux univers graphiques.
Un très classique avec un camaïeu de bleu

Un second un peu plus punchy et avec une prise de risque plus importante

Une fois l’univers choisi, je l’ai appliqué aux wireframes

Le client a adoré l’option 2 qui permet un positionnement fort mais ses équipes ne sont pas prête pour ça.
C’est pourquoi il. achoisi l’option 1 en gardnat le typo des titres de l’option 2. J’ai aussi ajouté des éléments graphique pour habiller le fond et que cela soit moins blanc.