01
Augmenter l'ARR
Proposer une fonctionnalité à forte valeur ajoutée pour augmenter le revenu récurrent annuel.
Target KPI
Croissance du revenu récurrent
Diagramme
Intégrer un outil de diagramme interactif dans la plateforme Siteflow
01 / PROBLÉMATIQUE
Un manque de visibilité qui freine les interventions terrain
Les utilisateurs de Siteflow créent des logigrammes de leurs interventions terrain via Visio (logiciel Microsoft). Ils souhaitent qu'un whiteboard semblable soit intégré directement à Siteflow pour importer les flows créés et les intégrer dans un diagramme interactif.
Ce fonctionnement fragmenté engendre un manque de visibilité, source d'erreurs sur le terrain et de perte de temps. Les utilisateurs sont contraints de faire des aller-retours entre la vue du flow et la vue diagramme, ou de créer un synoptique en dehors de Siteflow.
7 sur 8 : Confusion drag & drop
Des testeurs ont eu comme premier réflexe de cliquer pour ajouter un élément au lieu d'utiliser le drag & drop lors des tests utilisateurs.
02 / OBJECTIFS
Définir les critères de succès produit
02
Satisfaction Client
Améliorer l'expérience utilisateur en intégrant les outils de diagramme directement dans la plateforme.
Target KPI
Réduction des aller-retours outils
03
Clarté Ergonomique
Offrir une interface claire et intuitive pour la création et l'édition de diagrammes.
Target KPI
Navigation intuitive validée par tests
03 / RECHERCHE & USER TESTS
Comprendre les besoins des préparateurs méthode
Nous avons organisé des user tests pour choisir la meilleure itération entre deux designs de navigation différents. 8 participants ont interagi avec l'un des deux prototypes.
8 User Tests
Tests comparatifs sur deux prototypes de navigation
2 Prototypes Testés
Navigation unique vs. navigation splitée en deux
Résultats Clés
Confusion drag & drop
7 testeurs sur 8 ont eu le réflexe de cliquer au lieu d'utiliser le drag & drop pour ajouter un élément dans l'espace de travail.
Navigation splitée préférée
6 testeurs sur 8 préfèrent l'interface avec les boutons de création séparés des icônes d'action pour plus de clarté.
Icônes à différencier
La moitié des testeurs ont eu du mal à différencier les icônes dupliquer, grouper et dégrouper dans la barre d'outils.
04 / PERSONA
Concevoir pour les préparateurs méthode
Thomas, 42
Préparateur Méthode
Industrie • Responsable méthode • Utilise Visio quotidiennement
"Je souhaite organiser mes interventions et visualiser les liens et dépendances entre chacune directement dans Siteflow, sans passer par un outil externe."
Objectifs
- Organiser les interventions terrain dans un diagramme clair
- Visualiser les liens et dépendances entre les flows
Frustrations
- Manque de visibilité source d'erreurs sur le terrain
- Créer un synoptique en dehors de Siteflow
Sophie, 35
Chef de Projet Terrain
BTP • Coordinatrice • Gère plusieurs équipes
"J'ai besoin d'éditer mes cartes de flow et phases directement dans le diagramme, sans faire des aller-retours entre les différentes vues."
Objectifs
- Hiérarchiser et éditer les cartes de flow dans le diagramme
- Intégrer les éléments Siteflow sans changer d'outil
Frustrations
- Déplacer les cartes manuellement entre les vues
- Perte de temps avec les aller-retours entre outils
05 / FLUX UTILISATEUR
Structurer le parcours de création d'un diagramme
Pour réduire les frictions, nous avons conçu un flux direct permettant à l'utilisateur de créer et éditer son diagramme en intégrant les éléments Siteflow de manière fluide.
Étape 1
Créer un diagramme
Nouvelle vue diagramme
Étape 2
Ajouter des éléments
Drag & drop depuis la sidebar
Étape 3
Éditer les cartes
Modifier texte, couleurs et formes
Étape 4
Grouper les éléments
Organiser en groupes nommés
Étape 5
Connecter les flows
Ajouter des liens et dépendances
06 / WIREFRAMES & ITÉRATIONS
Prototypage itératif pour trouver la meilleure navigation
Nous avons expérimenté deux frameworks de navigation distincts pour identifier l'interface la plus intuitive pour la création de diagrammes.
v1 – Navigation unique
Toutes les actions (création et édition) dans une seule barre. Les testeurs demandaient les icônes directement à côté des éléments à modifier.
v2 – Navigation splitée
Boutons de création d'un côté et icônes d'action de l'autre. Plus lisible, les actions de nature différente sont visuellement séparées.
Choix Final – Navigation splitée
6 testeurs sur 8 ont préféré cette version. La séparation des actions de création et d'édition rend l'interface plus lisible et intuitive.
07 / UI FINALE
Siteflow Diagramme : l'outil de visualisation intégré
Une interface claire et intuitive, conçue pour s'intégrer naturellement dans le workflow existant des préparateurs méthode.
01 / Espace de travail
Vue principale du diagramme avec sidebar d'éléments, barre d'actions et espace de construction interactif.
02 / Édition d'éléments
Palette d'édition contextuelle pour modifier les couleurs, contours et textes des formes du diagramme.
03 / Groupes et connexions
Organisation des éléments en groupes nommés avec liens de dépendance entre les flows et phases.
08 / CONTRAINTE TECHNIQUE
Utilisation de la librairie GoJS
Faute de temps et de ressources, nous avons utilisé la librairie GoJS pour développer le whiteboard de diagramme dans Siteflow. Mais certains composants ont eu besoin d’une UI personnalisée.
Cartes de flow/phase/étape
Nav bar de création
Nav bar d’Icônes d’action
09 / RÉSULTATS
Fonctionnalité livrée et validée
6/8
Préfèrent nav splitée
Résultat du test utilisateur
75%
Taux de réussite
Des tâches complétées au premier essai
50%
Des testeurs souhaitent des
raccourcis clavier
10 / APPRENTISSAGES
Ce que j'ai retenu de ce projet
- 01
Le drag & drop nécessite des alternatives
Les tests ont montré que le drag & drop n'est pas intuitif pour tous.
Il est essentiel de proposer des alternatives comme le clic ou le double-clic pour garantir l'accessibilité de l'interface. - 02
Séparer les typologies d'actions
Les actions de création et d'édition sont de natures différentes.
Les séparer visuellement apporte de la clarté et réduit la confusion, comme l'ont confirmé 6 testeurs sur 8. - 03
Travailler avec les contraintes techniques
L'utilisation imposée de la librairie GoJS a nécessité une collaboration étroite avec les développeurs
pour adapter le design aux possibilités techniques tout en maintenant une bonne UX.