Domiserve

Servidom

2022

Service à la personne
Refonte UX-UI
Refonte UX-UI

Refonte de la plateforme de gestion interne

Domiserve, filiale de la Banque Postale, est un acteur du secteur des services à la personne depuis 2006. Son activité se regroupe sur l’émission de CESU préfinancés, la télégestion et l’organisation de services à la personne.

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  🚧

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
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

Analyse des fonctionnalités existantes pour comprendre les besoins utilisateur et en améliorer l’expérience
Réalisation d’un audit UX/UI de la plateforme pour évaluer l’ergonomie
Conception UX/UI de la plateforme suite aux recommandations de la recherche utilisateur et de l’audit

Contexte

Après la mission de refonte de leur site internet client, Domiserve nous a demandé de re-designer leur logiciel de gestion interne.

Réalisation d’un audit UX/UI

Suite à la réunion de lancement, nous avons réalisé un audit UX/UI de la plateforme en nous concentrant sur certains aspects comme l’architecture de l’information ou les task flows (étapes que suivent un utilisateur pour réaliser une tâche).Le but était d’évaluer l’interface actuelle selon des critères d’ergonomie pour émettre des premières recommandations au client.

Audit ux ui de Domiserve
Extrait de l'interface d'origine

Nous nous sommes concentré sur deux parcours utilisateurs. Premièrement, le parcours d'un client depuis sa demande de service à sa réalisation. Deuxièmement, la gestion des différentes caisses de cotisation qui ont leurs spécificités comme l'AGIRC-ARRCO ou l'ANPERE.

En termes d'UI, l'interface ayant été développée en interne, elle souffrait de sur-couches empilées avec le temps. Elle était principalement composée de tableaux et de champs à remplir, ce qui crée une surcharge d’information et une sensation d’être submergé.

L'audit a permis de relever que l'interface était particulièrement dense et que son arborescence trop large. Nous en avons conclu le besoin de simplification des flux utilisateurs et de diversification d’éléments.

Mise en place d’entretiens utilisateurs

En parallèle nous avons mené des entretiens utilisateurs pour mieux comprendre les usages des collaborateurs sur l'interface. Au total, 6 entretiens ont été réalisés avec des agents de différents pôles. Ce qui en est ressorti était la complexité à gérer les différentes caisses, ce qui conduisait à avoir des personnes "spécifiques" dédiées à chacune d'entre elles. Également, le temps d'apprentissage de la plateforme était trop long, celle-ci étant plus connue par cœur qu'intuitive.

Ces entretiens ont donc permis de confirmer ce besoin de simplification de l'interface en standardisant les flux des différentes caisses.

Proposition d’une nouvelle arborescence

Une fois les différents pain points relevés, nous avons proposé une arborescence réduisant le nombre de pages différentes.

Nouvelle arborescence Domiserve
Arborescence d'origine
Arborescence corrigée

Nous avons simplifié au maximum l’arborescence en limitant le nombre d’éléments au premier niveau (niveau violet foncé). Pour cela nous avons priorisé les pages les plus utilisées et les avons rendu plus accessibles, par rapport à celles davantage spécifiques à certains services.Par ailleurs, certaines pages renvoyaient à d’autres très éloignées dans l’arborescence. Nous les avons donc fusionnées ou rapprochées selon le besoin pour gagner en cohérence.

L’arborescence a été validée par le client pour passer à la phase suivante.

Wireframing de l’interface

La première solution apportée a été la conception d’un dashboard pour personnaliser l’interface en fonction du rôle du collaborateur. Il affiche d’un coup d’œil les dossiers en cours.

Nous avons également revu le tunnel de création de certains dossiers : nous les avons amélioré en rajoutant par exemple des CTA (”call-to-actions”, boutons incitant à l’action) clairs et visibles.

wireframing de l'interface Domiserve

Nous avons également retravaillé le dossier de demande de service. L’approche a été de standardiser les flux et contenus avec uniquement des règles d’affichage selon la caisse de cotisation. La simplification a permis d’alléger la charge cognitive de traitement de l’information par l’utilisateur.

Maquette domiserve

Réalisation des maquettes haute-fidélité (hi-fi)

Une fois les wireframes validés, nous avons réalisé les maquettes hi-fi en reprenant la charte graphique de Domiserve.La création d’éléments de type “tag” et l’utilisation de couleurs reliées à un état (ex : du rouge pour une requête rejetée, du vert pour “en cours”) permet de faciliter l’identification des dossiers et la lecture de l’interface.

maquettes high-fidelity Domiserve
maquettes high-fi Servidom

Nous espérons que vous avez apprécié ce nouveau design !

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