bpifrance

Bpifrance - BOost

2023

Finance
Product design

Amélioration continue du produit et recherche et développement

Bpifrance est la banque publique d'investissement française, ayant pour mission le financement et le développement des entreprises. L’écosystème de Bpifrance étant très grand, cela induit un fort besoin en design pour leurs divers produits digitaux. La solution pour répondre à ce besoin ? La régie ! Elle m’a permis en tant que designer Wolfox de travailler en étroite collaboration avec une équipe spécifique dédiée au projet suivant : BOost.

Contexte  🎯

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Intervention sur la plateforme existante  🚧

chiffre un dans cercle bleu clair
This is some text inside of a div block.
chiffre deux dans cercle bleu clair
This is some text inside of a div block.
chiffre trois dans cercle bleu clair
This is some text inside of a div block.
chiffre quatre dans cercle bleu clair
This is some text inside of a div block.
chiffre cinq dans cercle bleu clair
This is some text inside of a div block.
chiffre six dans dans bulle bleu clair
This is some text inside of a div block.

Problématiques

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Problématiques

Un produit très “basique” visuellement. Le challenge est donc d’itérer sur des propositions graphiques adaptées pour allier l’utile à l’agréable.
Complexité des typologies d’utilisateurs : BOost est au service de nombreux utilisateurs. Cela induit à des besoins et des actions différentes. Il est donc impératif de maîtriser la connaissance du domaine métier du projet pour proposer des solutions d’interfaces respectueuses de tous ces aspects.
Ce dernier point n’est pas une problématique mais un challenge : pour quasiment la totalité des projets Bpifrance, le designer se retrouve seul pour orchestrer les besoins utilisateurs vis-à-vis de la faisabilité technique. C’est très challengeant et engageant !

Contexte

BOost est un outil métier de Bpifrance conçu pour vérifier les pièces justificatives d'un dossier de demande de prêt. Plusieur(e)s utilisateur(trice)s gravitent autour de ce produit et ont besoin de la plus grande transparence sur les activités de chacun(e). Les principaux utilisateur(trice)s, appelé(e)s "agent(e)s de vérification documentaire", vérifient la validité de chaque pièce d'un dossier de financement en cours d'acceptation. Ils/elles collaborent avec des personnes qui examinent et valident certaines actions métier, parfois sources de blocages. L'enjeu UX de l'outil est donc de garantir une transparence totale sur toutes les actions réalisées par les utilisateur(trice)s.
Photo présentation dashboard projet Boost

Méthodologie d’intervention

  • La méthode agile en équipe produit: L’équipe s’organise sous forme de sprint en méthode agile. De nombreux outils et méthodologies sont mis en place afin de garantir une organisation sans faille. En tant que designer, je suis encadrée par un Product Owner qui détient déjà toute la vision produit du projet. C’est pour moi ma première expérience en équipe produit et je suis très rapidement mise en confiance grâce à l’étroite collaboration et communication qui est imposée. Dans ce sens, côté design, il faut que les maquettes produites soient faisables techniquement afin de garantir une implémentation rapide de nouvelles fonctionnalités qui donnent de l’impact aux utilisateurs.

Méthodologie design adaptée aux besoins de l’équipeLe produit a une particularité : il y a deux design system existants, un premier implémenté en interne et un second tiré d’une libraire externe pour des besoins spécifiques. Malheureusement, les rituels sprint existants étaient insuffisants pour traiter les questions d’intégration de notre librairie de composants externe. Pourquoi ? Tout simplement parce qu’il fallait les créer de 0 et qu’il faut “du temps” pour identifier toutes les contraintes techniques qui s’y prêtent pour pouvoir y procéder. Nous avons donc mis en place un nouveau rituel de “challenge maquettes”. Ce point consiste à présenter aux devs plusieurs propositions de maquettes et nous tranchions ensemble sur celle qui était à la fois la plus adaptée en fonction de l’usage utilisateur et la plus facile à implémenter techniquement. Rituel essentiel que je retiens pour nourrir mon expertise en tant que Lead Product designer !

Librairie externe de composants utilisés pour le projet Boost

  • Expertise métier complexe: Au démarrage de ma première mission chez Bpifrance, il y a eu énormément d’informations à digérer liées au domaine d’expertise du produit. Ça a été difficile pour moi de comprendre tous les enjeux actuels pour pouvoir aider l’équipe à renforcer sa stratégie produit. Pour me faciliter la tâche, je me rendais chaque jour en présentiel chez le client : le partage de connaissances avec l’équipe concernant le produit a été très efficace et donc mon onboarding aussi !

  • Méthodologie de tests utilisateurs: Qui dit échanges et communication, dit interviews et tests utilisateurs réguliers. Cet exercice est essentiel pour tester les maquettes et identifier les “edges cases” que seuls les utilisateurs peuvent rencontrer. Les edges cases c’est quoi ? Ce sont des scénarios particuliers où un utilisateur utilise un produit selon son prisme et ses besoins. Ces situations, souvent négligées, peuvent avoir un impact significatif sur l'expérience utilisateur. Grâce aux tests, nous pouvons identifier ces cas et adapter le produit en conséquence, assurant ainsi sa flexibilité et sa pertinence pour un large éventail de besoins utilisateur. De ce fait, en amont d’un test utilisateur, il est essentiel de préparer un protocole avec une liste d’hypothèses (idées reçues de l’utilisation du produit) que nous allons faire tester. Cela devient alors essentiel pour créer un produit basé sur des besoins réels et non des perceptions d’utilisation biaisées.

Voici un exemple de méthodologie pour créer un protocole de test efficace

Exemple d’une réalisation de l’équipe : conception d'une interface présentant une structure complexe de contenus riches

Pour rappel, le projet BOost est un outil Bpifrance qui permet la vérification documentaire de pièces justificatives constituant un dossier pour une demande de prêt. Afin d’aider les agents qui réalisent ces tâches à être plus efficaces, nous avons mis en place une technologie d’identification automatique des erreurs. L’objectif est de prioriser l’affichage des erreurs en fonction de leur “gravité”. Cette solution réduit la charge mentale des agents en leur “pré-machant” leur travail et en ayant une analyse très visuelle avec un code couleur intuitif. Bien évidemment que les règles d’accessibilité ont été respectées et mises en place, notamment sur les niveaux de contrastes des couleurs.

Exemple : un de nos utilisateurs est daltonien, c’est à dire que cela affecte principalement sa perception des couleurs primaires comme le rouge, le vert et le bleu et donc il les confond. C’est pour cela que la couleur ne suffit pas : le texte est essentiel pour donner du sens au message “3 erreurs détectées”, “1 cas de vigilance”, “21 contrôles validés”. Plus il y a de codes graphiques de nature différente pour renforcer le sens d’une information, plus on donne de chance à l’utilisateur de le comprendre. Par exemple ici il aurait été super intéressant d’ajouter en plus une icône “croix” pour le cas d’erreur, de ce fait notre ami daltonien comprend le texte mais également l’icône lorsqu’il y a une erreur.

Pièce justificative CNI

Nos dernières réalisations

Découvrez notre approche en pratique !
Découvrez nos réalisations

Contactez-nous

Une question ? N’hésitez pas à nous écrire !

🥳

Votre message a bien été envoyé !
La meute s'en occupe le plus vite possible
Il semble qu'il y ait une erreur, veuillez réessayer...