Hemea

Back-office B2B

Contexte
La plateforme a été construite bout par bout, les modules s’ajoutant au fur et à mesure sans travail UX/UI.
Suite à l’arrivée de futures fonctionnalités et au vu de la complexité déjà présente, il était nécessaire de tout remettre à plat et effectuer une refonte permettant l’ajout de ces nouveaux blocs.

▶ Temporalité

Mars 2020

▶ Rôle

Lead UX/UI Designer

▶ Camarades complices

Pierre-Olivier Fleckenstein
Responsable projet

1.Recherche

Les utilisateurs et utilisatrices

Il s’agit de professionel.le.s avec des besoins fonctionnels précis.
Leur utilisation de la plateforme se fait presque exclusivement sur Desktop.
La majorité ont l’habitude d’utiliser des interfaces techniques complexes, mais avec une aide à disposition facilement et rapidement vu qu’il s’agit d’un outil de travail.

La plateforme et outils

Voici un schéma simplifié des différents espaces d’Hemea. En surligné vous trouverez les parties concernées par ce projet.

Les différents espaces


Site web B2C : site public, destiné aux particuliers.

La centrale d’achat : plateforme pour les professionnels comprenant des avantages, promotions pour des assurances, achat de matériaux, …

Logiciel de devis : outil de création, gestion et envoi de devis pour les professionnels. J’ai pu aussi travailler à sa refonte en amont de ce projet.

Dashboard : page d’accueil liant tous les outils de la plateforme.

Projets / Clients : pages de création et gestion des chantiers.

Labellisation : Hemea permet aux professionnels de devenir “labellisé Hemea”, ils se verront alors proposer des chantiers acquis via le site B2C.

Informations : page dédiée à toutes les informations de l’entreprise, nécessaires notamment pour la création de devis, de factures et le processus de paiement.

Factures : espace regroupant toutes les factures du professionnel.

Recherche utilisateurs, parcours, arborescence

Recensement, mise à plat des parcours utilisateurs, lecture de tous les retours utilisateurs disponibles, entretiens avec les différentes équipes métiers.

←

Recensement et recoupement des messages reçus via le tchat d’aide destiné aux professionnels.


→

Schéma restituant l’arborescence et les parcours utilisateurs possibles.

2.Analyse de l'existant

Audit UX/UI des 2 pages les plus critiques: le dashboard et la page projet / client.

Dashboard

Il manque beaucoup d’informations sur cette page, l’utilisateur devrait pouvoir y retrouver directement ce qu’il cherche le plus souvent (résumé de ses devis en cours, actions en attente, rendez-vous à venir, aide à disposition).

La page n’est pas du tout personnalisée, il devrait être affiché des informations d’identification de l’entreprise ainsi que son statut hemea (labellisation et appartenance au Club pro).

Il n’existe pour le moment aucune hiérarchie réelle entre les blocs et les composants.

Le placement du lien d’information de compte en bas à gauche n’est pas intuitif.


☝️ À noter : les professionnels reçoivent une première formation avant d’accéder à cette plateforme, il ne sera donc pas nécessaire d’inclure un onboarding poussé.

Page projet

Suite à des retours d’utilisateurs il a été noté une confusion entre les clients et les projets. La barre latérale affichant le nom et l’adresse du client alors que la page est destinée à la gestion d’un projet (chantier).

La colonne de droite oblige à passer par un second clic pour obtenir des informations cruciales sur le projet, il vaudrait mieux les afficher directement.

Il n’y a pas de lien pour revenir au Dashboard.

Ici aussi, il manque des informations d’identification du projet, comme un titre par exemple.

Les différences d’espacements nuisent à la lisibilité.

Dans l’ensemble le design est un peu “froid”. Au vu du projet il sera préférable de garder un UI sobre mais en ajoutant des touches de couleurs et/ou d’illustrations pour rendre l’ensemble plus attractif.

3.Wireframes

Travail de placement, d’ergonomie et de hiérarchisation de l’information.

Dashboard


Création d’une nouvelle hiérarchie, du haut vers le bas :

→ Fil d’ariane et lien vers les informations de compte,

→ Informations d’identification et de statut,

→ Push des différentes offres d’Hemea (en lien direct avec le statut de l’entreprise),

→ Liste des évènements / actions en attente ou à venir, classée par ordre chronologique,

→ Avantages Hemea (centrale d’achats et bénéfices pour les comités d’entreprise),

→ Support et FAQ,

→ Informations légales.

Page projet


Colonne de gauche :

→ Changement et déplacement de l’icône “+” par un bouton de création de nouveau client pour le rendre plus visible.

→ Distinction entre client et chantier en ajoutant un “dossier” client regroupant les différents chantier à l’intérieur, se dépliant au clic. Une fois rentré dans cette liste déroulante, affichage d’un bouton “Nouveau projet”.


Colonne centrale :

→ Fil d’ariane permettant de revenir au Dashboard.

→ Ajout d'un titre à chaque bloc pour une lisibilité plus simple.

→ Affichage immédiat du bloc de factures.


Colonne de droite :

→ Changement du bloc de boutons par un sommaire d’ancres (la page pouvant atteindre une grande hauteur pendant et après le chantier).

→ Affichage des informations nécessaires au chantier (contact et adresses du client).

4.Conception

Itération puis création des maquettes finales et de leurs déclinaisons.

☝️ À noter : La distinction client / projet demandant un développement spécifique, il a été décidé de l’écarter pour un premier lot, la fonctionnalité sera ajoutée dans un lancement futur.

Dashboard

Après itération, j’ai ajouté aux maquettes le bloc de “boîte à outils digitale” (dénomination des logiciels de devis et factures) comprenant :

→ Pour un professionnel non-membre du Club Pro: un bloc d’informations et d’incitation à l’essai gratuit de 14 jours.

→ Pour un professionnel nouveau et membre: un CTA pour créer son premier projet.

→ Pour un professionnel avec des chantiers et membre: le tableau de ses devis et factures en cours.

Dashboard d’un professionnel nouveau, ni labellisé ni membre du Club Pro.

Dashboard d’un professionnel nouveau, membre du Club Pro.

Dashboard d’un professionnel ayant déjà des chantiers, labellisé avec la version d’essai du Club Pro.

Dashboard d’un professionnel ayant déjà des chantiers, labellisé, membre du Club Pro et ayant des propositions de chantier d’Hemea.

Page projet

Projet tout juste créé.

Projet en cours, comprenant un devis signé mais pas encore de facture ni de travaux supplémentaires.

Projet en cours, avec travaux supplémentaires et facture signée.

Projet d’un client proposé par Hemea. Affichage du responsable projet Hemea et d’informations supplémentaires.

Et ensuite ?

Modification de composants dans le cadre de la création d’un nouveau design system ( couleurs, typographie, éléments de formulaires, …).
Lancement provisoire prévu pour quelques professionnels afin de tester les modifications.
Enfin, lancement complet de toute la plateforme.

← Projet précédent Projet suivant →