Conception d’une plateforme de gestion de mandats

Conception d’une plateforme de gestion de mandats 

Brief client

Chaque année, des sociétés de gestion d'actifs (Asset Management Company ou AMC), créent, révisent et exécutent des milliers de contrats (ou IMA, Investment Management Agreements) décrivant les mandats donnés par leurs clients pour gérer leurs actifs.
L’objectif du projet est de créer une nouvelle approche pour la gestion du cycle de vie des contrats à travers une plateforme collaborative pour les différentes parties prenantes. Trois mots d'ordre : simplifier, sécuriser et optimiser les workflows et les échanges d'informations entre les AMC et leurs clients via une plateforme SaaS.

Année

2020

Expertise
  • Design
Disciplines
  • Branding
  • Direction artistique
  • UI design
  • UX design
Outils

    01

    Atelier de co-sketching

    Définir les différents acteurs intervenants dans chaque phases du cycle de vie du contrat

    Avant qu’un contrat ne puisse être envoyé à un client pour signature électronique, celui-ci doit être créé et validé par l’ensemble des équipes impliquées (qui ont la responsabilité d’une partie ou de l’ensemble du contrat). Les règles d’approbation sont spécifiques à chaque acteur et se définissent par rapport à un nombre de validations nécessaires.

    Le parcours détermine le statut, les étapes (en cascade ou parallèle), la gouvernance et les rôles associés, tout le long du cycle de vie du contrat.

    Le parcours d'un contrat de sa création à sa validation finale et ses utilisateurs associés
    02

    Co-sketching

    Arborescence et co-sketching des écrans de la plateforme

    Suite à la définition des différents parcours, l’atelier de co-conception permet de consolider l’architecture de l’information de l’application, de cartographier l’arborescence complète et de commencer à étudier les premières pistes d’interfaces graphiques et des fonctionnalités sous forme de sketchs papier afin de définir les gabarits principaux et envisager les solutions techniques et leurs contraintes associées.

    Planches de co-sketching
    Planches résultant de l’atelier de co-sketching (dessins à main levée)
    Atelier de groupe co-conception
    Atelier de co-conception
    Planches résultant de l’atelier de co-sketching (dessins à main levée)
    Atelier de co-conception
    03

    Sprint UX

    Sur les bases qui émergent de l’atelier, nous entamons la phase de production des wireframes

    La conception des wireframes est la matérialisation de l’architecture de l’information, du cycle de vie des contrats et des parcours d’interactions précédemment cartographiés. Un prototype dynamique est réalisé afin de pouvoir tester l’ensemble des scénarios et pour s’assurer que l’expérience reste fluide et cohérente pour l’ensemble des acteurs, de la création jusqu’à la signature électronique finale du contrat.

    Wireframes des écrans de la plateforme Neosigna
    04

    Création de l’image de marque

    En parallèle du sprint UX, nous imaginons la nouvelle identité visuelle de Neosigna

    Neosigna veut révolutionner la gestion de contrats dans le domaine de la gestion d’actifs et devenir l’acteur incontournable pour les contrats numériques. Graphiquement le challenge est de créer une forme polymorphe qui intègre les notions de signature, de contrat et de vitesse, tout en évoquant le domaine de la fintech.

    Présentation logo
    Composition du logo Neosigna
    Déclinaisons logo couleurs
    Couleurs primaires de la charte
    Composition du logo Neosigna
    Couleurs primaires de la charte
    Composition logo et couleurs
    Composition du logo et couleurs de la nouvelle charte

    Afin que les clients puissent se projeter et voir tout le potentiel de leur nouvelle identité, nous déclinons la charte sur des supports print. La charte graphique Neosigna doit vivre à la fois sur le web mais aussi sur tous les autres supports de communication, pour une cohésion et identité de marque forte.

    Déclinaisons print
    Exemple de l’identité sur un support print
    Sac bleu Neosigna
    Sac en coton brandé Neosigna
    Exemple de l’identité sur un support print
    Sac en coton brandé Neosigna
    05

    Une plateforme à deux modes

    Une fois l’identité et les wireframes validés, nous déclinons le design UI des écrans

    Après avoir fait un benchmark du monde de la fintech, nous remarquons que de nombreux outils proposent deux modes à leur interface. Pour un meilleur confort et une meilleure utilisation auprès des utilisateurs, nous déclinons les écrans en light mode et en dark mode.

    La plateforme de gestion de mandats prend peu à peu vie.

    Écran d'accueil
    Dashboard de la plateforme
    Écran d'un contrat
    Exemple d’un contrat à approuver
    Dashboard de la plateforme
    Exemple d’un contrat à approuver
    Exemple dark mode
    Déclinaisons de la plateforme en dark mode
    06

    Faire découvrir l’outil

    Un dernier sprint UI se concentre sur la mise en page du site vitrine Neosigna

    Le design du site reprend les codes graphiques mis en place sur l’interface dans une ambiance claire et lumineuse. Des illustrations accompagnent les principaux messages pour humaniser l’ensemble.

    Écran site vitrine
    Page d’accueil du site vitrine Neosigna
    Page FAQ
    Exemple de page FAQ
    Page d’accueil du site vitrine Neosigna
    Exemple de page FAQ

    173 composants
    créés dans le design system

     

    Voir un autre projet