Logo du groupe logiciel RH UKG

Refonte UX/UI 
outil RH de ticketing

Client
UKG - People Doc

Collaboration
UX, PO, Dev, équipe DS

Rôle
Lead UX designer

Secteur
RH

Le module "Mes demandes" est l’un des outils centraux de la suite UKG HRSD, utilisé en continu par les gestionnaires RH pour traiter, suivre et analyser les sollicitations des collaborateurs. Essentiel à leur productivité, il regroupe des fonctionnalités clés : suivi des demandes, workflows de validation et outils d’analytics. La refonte UX/UI a porté sur la modernisation d’une interface vieillissante, l’optimisation du parcours de traitement des demandes et l’amélioration de l’efficacité opérationnelle, tout en garantissant une adoption fluide par les équipes RH.

Objectifs
La refonte avait pour objectifs principaux : intégrer le nouveau design system du groupe afin d’unifier l’expérience à l’échelle de la suite UKG, améliorer l’ergonomie et simplifier les parcours utilisateurs, en particulier celui du traitement des demandes. Le projet visait également à renforcer la lisibilité des informations, fluidifier la navigation, et soutenir la transition technologique vers un front-end en React, garantissant ainsi une solution pérenne et évolutive.

Principal challenge
Le principal défi consistait à moderniser l’interface sans créer de régressions pour des utilisateurs habitués à l’outil et qui l’utilisent au quotidien. La refonte devait également composer avec une contrainte forte : ne pas modifier le back-end existant, en s’appuyant uniquement sur les API disponibles, tout en repensant l’expérience de manière significative.

Capture d'écran d'un tableau de gestion des demandes dans un logiciel de ressources humaines, affichant une liste de demandes avec leurs sujets, catégories, assignés, dates de création et statuts, et un tableau de bord indiquant les demandes totales, ouvertes et en retard.

Méthodologie

1
Audit ergonomique
croisé

Évaluation heuristique avec la grille Bastien & Scapin, menée par trois designers    
Identification des problèmes majeurs d’ergonomie et premières recommandations.

2
Analyse
des données

Exploitation des données Pendo
Interpretation du comportement des utilisateurs et identification des parcours principaux

3
Entretiens
utilisateurs

Série d’entretiens qualitatifs 
avec différents profils.
Confirmation ou infirmation des premières hypothèses, identification de nouvelles frictions et priorisation des besoins.

4
Ateliers
de co-conception

Organisation d’ateliers collaboratifs (dont un 6-to-1) avec l’équipe produit et technique.
Co-construction de solutions et alignement des équipes.

5
Wireframes
& tests

Conception de wireframes cliquables et tests rapides auprès d’utilisateurs.
Validation ou ajustement des parcours proposés avant passage en design détaillé

6
Maquettes
haute fidélité

Design des maquettes UI utilisant le design system et
rédaction des spécifications.
Livraison des maquette finales

7
Tutoriel &
feedback

Mise en place d’un guide in-app & d’un forumlaire via Pendo pour accompagner la transition.
Collecte des premiers retours utilisateurs permettant d’ajuster rapidement les bugs et régressions

8
Amélioration
continue

Suivi post-lancement : corrections de bugs, ajustements ergonomiques et ajout progressif de fonctionnalités.

Les optimisations

1 - Affichage du tableau

Le tableau manquait de lisibilité et d’accessibilité, et l’ordre des colonnes ne suivait pas la logique métier. Les utilisateurs devaient créer des contournements pour trouver l’information. La refonte a réorganisé les données, clarifié la hiérarchie visuelle et amélioré le flux d’information

Solutions apportées

  • Adoption du composant Data Table du Design System, répondant aux critères d’accessibilité et entièrement responsive.

  • Réorganisation des colonnes et ajout de celles affichées par défaut pour mieux correspondre au parcours mental des utilisateurs et à leurs besoins (validés via sondage).

  • Ajout d’une fonctionnalité de personnalisation de l’affichage : choix des colonnes visibles, réorganisation de l’ordre et possibilité d’ajouter ou de masquer des données.

Capture d'écran d'une interface de gestion des demandes de service. La page affiche une liste de requêtes avec colonnes pour le sujet, la catégorie, la personne qui en a fait la demande, les destinataires, la date de création, la date d'échéance, la priorité et le statut. La majorité des demandes ont un statut "Nouveau".

2 - Création d’un aperçu des demandes

Capture d'écran d'une interface de gestion des demandes employant plusieurs modules de gestion des demandes, de l'administration du personnel et des communications par messagerie, avec des listes, des détails de demandes, et des conversations d'employés

Les utilisateurs RH devaient systématiquement ouvrir chaque demande dans une nouvelle page, ce qui entraînait une perte de temps et rendait difficile la localisation des demandes dans le listing. De plus, la page de détail souffrait d’une architecture de l’information et d’une ergonomie peu optimales.

Solutions apportées

  • Ajout d’un aperçu des demandes directement dans le listing, permettant de visualiser rapidement l’état d’avancement, de vérifier les documents envoyés et d’exécuter des actions prédéfinies.

  • Révision de l’architecture de l’information pour mieux correspondre au sens de lecture et aux besoins des utilisateurs.

  • Utilisation des composants du Design System pour garantir cohérence, accessibilité et responsive design

3 - Vues filtrées personnalisables

Chaque jour, les utilisateurs RH et managers devaient reconfigurer leurs filtres pour consulter les demandes correspondant à leur périmètre, ce qui était chronophage et peu pratique. Leurs besoins variaient fortement en fonction de leur rôle, de leur équipe et de l’organisation spécifique de chaque entreprise.


Solutions apportées

  • Ajout d’une fonctionnalité permettant de sauvegarder des vues filtrées personnalisées, adaptées au scope de chaque utilisateur.

  • Optimisation de l’expérience pour un accès rapide aux informations pertinentes et réduction des actions répétitives.

Capture d'écran d'une interface avec plusieurs onglets ou vues, dont un onglet est en surbrillance avec le nombre 234, note indiquée 'Assigné uniquement', et les autres onglets montrent 'Nouveau', 'En cours', 'En retard', et 'Ouvert'.
Capture d'écran montrant l'interface d'un logiciel de gestion des demandes avec un filtre de statut 'Archivé' sélectionné.
Captura d'écran d'une application de gestion de tâches avec différentes listes, y compris 'My open requests', 'Laura's', 'Lorem ipsum', et 'Ipsum lorem eta'.
Capture d'écran d'une interface montrant une liste de vues sauvegardées avec des options pour déplacer les éléments vers le haut ou vers le bas, ou pour les modifier.