Avanteam web
2023
New digital product
Refonte de l'interface utilisateur final accompagnant la refonte technologique et visant à résoudre les principaux problèmes Ux Ui de l'application web Avanteam.
Avanteam web
2023
New digital product
Refonte de l'interface utilisateur final accompagnant la refonte technologique et visant à résoudre les principaux problèmes Ux Ui de l'application web Avanteam.
Avanteam web
2023
New digital product
Refonte de l'interface utilisateur final accompagnant la refonte technologique et visant à résoudre les principaux problèmes Ux Ui de l'application web Avanteam.
Durée du projet : 9 mois
Ux Research, Design Ux Ui, design system, Figma, test utilisateur.
Durée du projet : 9 mois
Ux Research, Design Ux Ui, design system, Figma, test utilisateur.
Durée du projet : 9 mois
Ux Research, Design Ux Ui, design system, Figma, test utilisateur.
Résumé
Cette refonte porte la nouvelle version du produit.
Elle vise à faciliter la bascule en React de l'application et à corriger les problèmes Ux Ui majeurs de l'application.
+ 70% de contenu
En révisant les composants majeurs de navigation et les menus d'action, le contenu devient le centre de l'application.
4.8/5 de satisfaction
Grâce aux améliorations l'expérience utilisateur est améliorée de +52% par rapport à l'interface legacy.
18 tickets Ux Ui
Résolution de la totalité des frustrations et problématiques clients identifiés en interview ou historiquement remontées.
Résumé
Cette refonte porte la nouvelle version du produit.
Elle vise à faciliter la bascule en React de l'application et à corriger les problèmes Ux Ui majeurs de l'application.
+ 70% de contenu
En révisant les composants majeurs de navigation et les menus d'action, le contenu devient le centre de l'application.
4.8/5 de satisfaction
Grâce aux améliorations l'expérience utilisateur est améliorée de +52% par rapport à l'interface legacy.
18 tickets Ux Ui
Résolution de la totalité des frustrations et problématiques clients identifiés en interview ou historiquement remontées.
Résumé
Cette refonte porte la nouvelle version du produit.
Elle vise à faciliter la bascule en React de l'application et à corriger les problèmes Ux Ui majeurs de l'application.
+ 70% de contenu
En révisant les composants majeurs de navigation et les menus d'action, le contenu devient le centre de l'application.
4.8/5 de satisfaction
Grâce aux améliorations l'expérience utilisateur est améliorée de +52% par rapport à l'interface legacy.
18 tickets Ux Ui
Résolution de la totalité des frustrations et problématiques clients identifiés en interview ou historiquement remontées.
Avant | Après
V.23 | V.26
Démarche
Utilisation de méthodologie double diamant permel'exploration et le cadrage projet avant la livraison.
Démarche
Utilisation de méthodologie double diamant permel'exploration et le cadrage projet avant la livraison.
Démarche
Utilisation de méthodologie double diamant permel'exploration et le cadrage projet avant la livraison.
Méthodologie design
Ce projet a respecté une méthodologie design (double diamant) complète pour permettre une phase d'étude, d'itération et de test design avant de débuter la phase de développement.
Cela se justifie par l'importance des choix réalisés sur les composants principaux (navigation, vue de données, …) d'un produit déjà en production chez +500 clients et aux fondations design anciennes (2019).
Méthodologie design
Ce projet a respecté une méthodologie design (double diamant) complète pour permettre une phase d'étude, d'itération et de test design avant de débuter la phase de développement.
Cela se justifie par l'importance des choix réalisés sur les composants principaux (navigation, vue de données, …) d'un produit déjà en production chez +500 clients et aux fondations design anciennes (2019).
Méthodologie design
Ce projet a respecté une méthodologie design (double diamant) complète pour permettre une phase d'étude, d'itération et de test design avant de débuter la phase de développement.
Cela se justifie par l'importance des choix réalisés sur les composants principaux (navigation, vue de données, …) d'un produit déjà en production chez +500 clients et aux fondations design anciennes (2019).
Livrables réalisé pour réaliser la méthodologie double diamant.
Livrables réalisé pour réaliser la méthodologie double diamant.
Livrables réalisé pour réaliser la méthodologie double diamant.
Interview utilisateurs
L'Ux Ui de l'application date de 2019 mais certains principes sont historiquement présents (2010).
Réaliser des interviews utilisateurs d'une dizaine de clients aux profils divers a permis de mieux comprendre leurs utilisations de l'application, leurs frustrations et frictions.
Interview utilisateurs
L'Ux Ui de l'application date de 2019 mais certains principes sont historiquement présents (2010).
Réaliser des interviews utilisateurs d'une dizaine de clients aux profils divers a permis de mieux comprendre leurs utilisations de l'application, leurs frustrations et frictions.
Interview utilisateurs
L'Ux Ui de l'application date de 2019 mais certains principes sont historiquement présents (2010).
Réaliser des interviews utilisateurs d'une dizaine de clients aux profils divers a permis de mieux comprendre leurs utilisations de l'application, leurs frustrations et frictions.
Pour être immergé dans l'environnement des utilisateurs, j'ai réalisé des entretiens (30mn - 1h) réalisés en binôme avec le PM Avanteam durant lesquels ils partageaient leur écran.
Ces entretiens ont donné lieu à un rapport d'interview organisant les retours utilisateurs (positifs et négatifs), permettant de définir et prioriser les axes de travail de la refonte.
Pour être immergé dans l'environnement des utilisateurs, j'ai réalisé des entretiens (30mn - 1h) réalisés en binôme avec le PM Avanteam durant lesquels ils partageaient leur écran.
Ces entretiens ont donné lieu à un rapport d'interview organisant les retours utilisateurs (positifs et négatifs), permettant de définir et prioriser les axes de travail de la refonte.
Pour être immergé dans l'environnement des utilisateurs, j'ai réalisé des entretiens (30mn - 1h) réalisés en binôme avec le PM Avanteam durant lesquels ils partageaient leur écran.
Ces entretiens ont donné lieu à un rapport d'interview organisant les retours utilisateurs (positifs et négatifs), permettant de définir et prioriser les axes de travail de la refonte.
Interview de 12 utilisateurs et rapports d'interviews.
Interview de 12 utilisateurs et rapports d'interviews.
Interview de 12 utilisateurs et rapports d'interviews.
Scope de la refonte
La définition de l'étendu d'un projet est une clé de réussite.
Après avoir audité le produit et réalisé les interviews utilisateurs, nous avons défini le scope suivant :
Refonte de la navigation dans l'application (problème d'Ux Majeur, empilement de menu)
Refonte des Actions dans les vues (manque de visibilité de certaines fonctionnalités pertinentes)
Refonte des actions dans les Enregistrements (présenter une refonte unifiée entre les actions dans les vues et les actions dans les enregistrements)
Scope de la refonte
La définition de l'étendu d'un projet est une clé de réussite.
Après avoir audité le produit et réalisé les interviews utilisateurs, nous avons défini le scope suivant :
Refonte de la navigation dans l'application (problème d'Ux Majeur, empilement de menu)
Refonte des Actions dans les vues (manque de visibilité de certaines fonctionnalités pertinentes)
Refonte des actions dans les Enregistrements (présenter une refonte unifiée entre les actions dans les vues et les actions dans les enregistrements)
Scope de la refonte
La définition de l'étendu d'un projet est une clé de réussite.
Après avoir audité le produit et réalisé les interviews utilisateurs, nous avons défini le scope suivant :
Refonte de la navigation dans l'application (problème d'Ux Majeur, empilement de menu)
Refonte des Actions dans les vues (manque de visibilité de certaines fonctionnalités pertinentes)
Refonte des actions dans les Enregistrements (présenter une refonte unifiée entre les actions dans les vues et les actions dans les enregistrements)
Les principaux objectifs de la refonte sont :
Réduire l'empilement de menu
Faciliter la navigation dans les enregistrements
Mettre en avant des fonctionnalités
Maximiser l'espace du contenu
Faciliter la transition en React
Les principaux objectifs de la refonte sont :
Réduire l'empilement de menu
Faciliter la navigation dans les enregistrements
Mettre en avant des fonctionnalités
Maximiser l'espace du contenu
Faciliter la transition en React
Les principaux objectifs de la refonte sont :
Réduire l'empilement de menu
Faciliter la navigation dans les enregistrements
Mettre en avant des fonctionnalités
Maximiser l'espace du contenu
Faciliter la transition en React
Composants touchés par la refonte dans la version originale de l'application.
Composants touchés par la refonte dans la version originale de l'application.
Composants touchés par la refonte dans la version originale de l'application.
Navigation dans l'application
Zoom sur les concepts clés de la refonte.
Navigation dans l'application
Zoom sur les concepts clés de la refonte.
Navigation dans l'application
Zoom sur les concepts clés de la refonte.
Contexte
La navigation a été identifiée comme l'élément accumulant le plus de problèmes : disparition de la side nav, accumulation de niveaux de menu, comportements polluants, problèmes d'organisation…
La refonte de la navigation permet de répondre à ces problématiques, dans le but de maximiser le contenu affiché et de simplifier la navigation dans les niveaux de l'application.
Contexte
La navigation a été identifiée comme l'élément accumulant le plus de problèmes : disparition de la side nav, accumulation de niveaux de menu, comportements polluants, problèmes d'organisation…
La refonte de la navigation permet de répondre à ces problématiques, dans le but de maximiser le contenu affiché et de simplifier la navigation dans les niveaux de l'application.
Contexte
La navigation a été identifiée comme l'élément accumulant le plus de problèmes : disparition de la side nav, accumulation de niveaux de menu, comportements polluants, problèmes d'organisation…
La refonte de la navigation permet de répondre à ces problématiques, dans le but de maximiser le contenu affiché et de simplifier la navigation dans les niveaux de l'application.
Dans un produit professionnel comme Avanteam, la navigation est un composant essentiel de l'interface. Elle permet à l'utilisateur de circuler dans l'application.
Elle doit être discrète et fluide pour lui permettre de trouver et de se concentrer sur le contenu essentiel.
Dans un produit professionnel comme Avanteam, la navigation est un composant essentiel de l'interface. Elle permet à l'utilisateur de circuler dans l'application.
Elle doit être discrète et fluide pour lui permettre de trouver et de se concentrer sur le contenu essentiel.
Dans un produit professionnel comme Avanteam, la navigation est un composant essentiel de l'interface. Elle permet à l'utilisateur de circuler dans l'application.
Elle doit être discrète et fluide pour lui permettre de trouver et de se concentrer sur le contenu essentiel.
Navigation réduite
La refonte propose un état réduit (plutôt que fermé) proposant les mêmes options que la version agrandie. L'utilisateur n'a plus l'impression de perdre sa side nav en la repliant, tout en gagnant de l'espace d'affichage pour ses données.
Navigation réduite
La refonte propose un état réduit (plutôt que fermé) proposant les mêmes options que la version agrandie. L'utilisateur n'a plus l'impression de perdre sa side nav en la repliant, tout en gagnant de l'espace d'affichage pour ses données.
Navigation réduite
La refonte propose un état réduit (plutôt que fermé) proposant les mêmes options que la version agrandie. L'utilisateur n'a plus l'impression de perdre sa side nav en la repliant, tout en gagnant de l'espace d'affichage pour ses données.
Plusieurs utilisateurs ont fait part d'une frustration lorsqu'ils fermaient la navigation car elle disparaissait complètement.
La navigation est la main courante d'une application, elle permet à l'utilisateur de se localiser et se déplacer dans l'application.
Plusieurs utilisateurs ont fait part d'une frustration lorsqu'ils fermaient la navigation car elle disparaissait complètement.
La navigation est la main courante d'une application, elle permet à l'utilisateur de se localiser et se déplacer dans l'application.
Plusieurs utilisateurs ont fait part d'une frustration lorsqu'ils fermaient la navigation car elle disparaissait complètement.
La navigation est la main courante d'une application, elle permet à l'utilisateur de se localiser et se déplacer dans l'application.
Avant / Après de la navigation
Avant / Après de la navigation
Avant / Après de la navigation
Navigation unifiée
La navigation du produit est hiérarchisée sur 3 niveaux : Solution / Modules / Vue.
Initialement, la navigation dans les solutions se faisait dans le Header de l'application. La navigation dans les deux autres niveaux se faisait dans la side nav.
Regrouper les 3 niveaux dans un même composant side nav permet de clarifier la navigation de l'application. En utilisant un dropdown pour la sélection des solutions permet d'utiliser la disposition de liste verticale pour faciliter l'affichage des solutions et éviter un scroll horizontal.
Navigation unifiée
La navigation du produit est hiérarchisée sur 3 niveaux : Solution / Modules / Vue.
Initialement, la navigation dans les solutions se faisait dans le Header de l'application. La navigation dans les deux autres niveaux se faisait dans la side nav.
Regrouper les 3 niveaux dans un même composant side nav permet de clarifier la navigation de l'application. En utilisant un dropdown pour la sélection des solutions permet d'utiliser la disposition de liste verticale pour faciliter l'affichage des solutions et éviter un scroll horizontal.
Navigation unifiée
La navigation du produit est hiérarchisée sur 3 niveaux : Solution / Modules / Vue.
Initialement, la navigation dans les solutions se faisait dans le Header de l'application. La navigation dans les deux autres niveaux se faisait dans la side nav.
Regrouper les 3 niveaux dans un même composant side nav permet de clarifier la navigation de l'application. En utilisant un dropdown pour la sélection des solutions permet d'utiliser la disposition de liste verticale pour faciliter l'affichage des solutions et éviter un scroll horizontal.
La navigation située dans le Header présentait 2 problèmes majeurs :
Ui : chaque application Avanteam est unique et paramétrable. La direction horizontale des entrées du menu fait que de nombreuses applications ont un scroll horizontal ou un label tronqué.
UX : au survol d'un élément du menu de solutions dans le header, un menu contextuel (appelé Big menu) apparaît immédiatement et perturbe les utilisateurs.
La navigation située dans le Header présentait 2 problèmes majeurs :
Ui : chaque application Avanteam est unique et paramétrable. La direction horizontale des entrées du menu fait que de nombreuses applications ont un scroll horizontal ou un label tronqué.
UX : au survol d'un élément du menu de solutions dans le header, un menu contextuel (appelé Big menu) apparaît immédiatement et perturbe les utilisateurs.
La navigation située dans le Header présentait 2 problèmes majeurs :
Ui : chaque application Avanteam est unique et paramétrable. La direction horizontale des entrées du menu fait que de nombreuses applications ont un scroll horizontal ou un label tronqué.
UX : au survol d'un élément du menu de solutions dans le header, un menu contextuel (appelé Big menu) apparaît immédiatement et perturbe les utilisateurs.
Réorganisation des composants de la navigation.
Réorganisation des composants de la navigation.
Réorganisation des composants de la navigation.
Navigation
L'utilisateur peut naviguer dans les différentes vues d'une solution métier quand la side nav est réduite comme ouverte. Il a accès aux mêmes options.
Après avoir constaté que certains utilisateurs ouvraient plusieurs sessions pour naviguer plus rapidement entre deux vues, l'option d'ouverture rapide dans un nouvel onglet a été ajoutée.
Navigation
L'utilisateur peut naviguer dans les différentes vues d'une solution métier quand la side nav est réduite comme ouverte. Il a accès aux mêmes options.
Après avoir constaté que certains utilisateurs ouvraient plusieurs sessions pour naviguer plus rapidement entre deux vues, l'option d'ouverture rapide dans un nouvel onglet a été ajoutée.
Navigation
L'utilisateur peut naviguer dans les différentes vues d'une solution métier quand la side nav est réduite comme ouverte. Il a accès aux mêmes options.
Après avoir constaté que certains utilisateurs ouvraient plusieurs sessions pour naviguer plus rapidement entre deux vues, l'option d'ouverture rapide dans un nouvel onglet a été ajoutée.
Navigation dans l'application (Side nav étendue et repliée)
Navigation dans l'application (Side nav étendue et repliée)
Navigation dans l'application (Side nav étendue et repliée)
Personnalisation de son interface
En plus des refontes de l'existant, l'ajout de la fonctionnalité de vue favorite permet à chaque utilisateur d'accéder rapidement à des vues qu'il utilise le plus souvent.
Il peut renommer sa vue favorite, choisir une icône et gérer sa place dans la section vue favorite. Il retrouvera aussi la vue favorite dans le header de l'application.
Personnalisation de son interface
En plus des refontes de l'existant, l'ajout de la fonctionnalité de vue favorite permet à chaque utilisateur d'accéder rapidement à des vues qu'il utilise le plus souvent.
Il peut renommer sa vue favorite, choisir une icône et gérer sa place dans la section vue favorite. Il retrouvera aussi la vue favorite dans le header de l'application.
Personnalisation de son interface
En plus des refontes de l'existant, l'ajout de la fonctionnalité de vue favorite permet à chaque utilisateur d'accéder rapidement à des vues qu'il utilise le plus souvent.
Il peut renommer sa vue favorite, choisir une icône et gérer sa place dans la section vue favorite. Il retrouvera aussi la vue favorite dans le header de l'application.
Les applications Avanteam sont généralement paramétrées par un chef de projet chargé de créer les différentes vues utiles pour un module métier, de les nommer et les organiser.
Or, si une solution métier contient une quinzaine de vues, les interviews utilisateurs ont montré qu'un utilisateur final utilise 2-5 vues par solution en fonction de son rôle ou son habitude.
Les applications Avanteam sont généralement paramétrées par un chef de projet chargé de créer les différentes vues utiles pour un module métier, de les nommer et les organiser.
Or, si une solution métier contient une quinzaine de vues, les interviews utilisateurs ont montré qu'un utilisateur final utilise 2-5 vues par solution en fonction de son rôle ou son habitude.
Les applications Avanteam sont généralement paramétrées par un chef de projet chargé de créer les différentes vues utiles pour un module métier, de les nommer et les organiser.
Or, si une solution métier contient une quinzaine de vues, les interviews utilisateurs ont montré qu'un utilisateur final utilise 2-5 vues par solution en fonction de son rôle ou son habitude.
Ajout de vues favorites.
Ajout de vues favorites.
Ajout de vues favorites.
Barre d'action dans les vues
Zoom sur les refontes de la barre située en haut des vues de données, contenant les boutons d'action sur les données ou sur l'affichage.
Barre d'action dans les vues
Zoom sur les refontes de la barre située en haut des vues de données, contenant les boutons d'action sur les données ou sur l'affichage.
Barre d'action dans les vues
Zoom sur les refontes de la barre située en haut des vues de données, contenant les boutons d'action sur les données ou sur l'affichage.
Contexte
La vue est un des composants principaux du produit Avanteam, elle permet d'afficher les données. Les vues souffraient depuis longtemps de bugs mineurs et de retours clients qui n'utilisent pas les actions sur les vues.
En organisant les actions dans les vues, en facilitant l'accès et l'utilisation de certaines fonctionnalités jusque-là méconnues, les utilisateurs ont plus de liberté pour adapter leur vue à leurs besoins.
Contexte
La vue est un des composants principaux du produit Avanteam, elle permet d'afficher les données. Les vues souffraient depuis longtemps de bugs mineurs et de retours clients qui n'utilisent pas les actions sur les vues.
En organisant les actions dans les vues, en facilitant l'accès et l'utilisation de certaines fonctionnalités jusque-là méconnues, les utilisateurs ont plus de liberté pour adapter leur vue à leurs besoins.
Contexte
La vue est un des composants principaux du produit Avanteam, elle permet d'afficher les données. Les vues souffraient depuis longtemps de bugs mineurs et de retours clients qui n'utilisent pas les actions sur les vues.
En organisant les actions dans les vues, en facilitant l'accès et l'utilisation de certaines fonctionnalités jusque-là méconnues, les utilisateurs ont plus de liberté pour adapter leur vue à leurs besoins.
La barre d'action dans les vues contient des options d'affichages, des actions sur l'ensemble des données ou sur une sélection.
La barre d'action dans les vues contient des options d'affichages, des actions sur l'ensemble des données ou sur une sélection.
La barre d'action dans les vues contient des options d'affichages, des actions sur l'ensemble des données ou sur une sélection.
Pagination intelligente
La pagination est essentielle pour un produit pouvant gérer de grands volumes de données. Dans le cas de l'application web Avanteam, elle est directement liée à la technologie utilisée dans le produit
En créant une version repliée qui adapte son comportement en fonction du scroll ou du survole, on renforce le gain de place par les données fonctionnelles.
Pagination intelligente
La pagination est essentielle pour un produit pouvant gérer de grands volumes de données. Dans le cas de l'application web Avanteam, elle est directement liée à la technologie utilisée dans le produit
En créant une version repliée qui adapte son comportement en fonction du scroll ou du survole, on renforce le gain de place par les données fonctionnelles.
Pagination intelligente
La pagination est essentielle pour un produit pouvant gérer de grands volumes de données. Dans le cas de l'application web Avanteam, elle est directement liée à la technologie utilisée dans le produit
En créant une version repliée qui adapte son comportement en fonction du scroll ou du survole, on renforce le gain de place par les données fonctionnelles.
La pagination se révèle au survole.
La pagination se révèle au survole.
La pagination se révèle au survole.
Actions de sélection
Le produit permettait déjà de faire des actions sur une sélection (ouverture, mise à jour en masse d’enregistrement, l'export). Mais ces fonctionnalités souffrent d'une mauvaise ergonomie et ne sont pas mises en valeur.
En créant une barre flottante qui s'affiche à la sélection d'un enregistrement, on facilite l'accès à ces fonctionnalités.
Actions de sélection
Le produit permettait déjà de faire des actions sur une sélection (ouverture, mise à jour en masse d’enregistrement, l'export). Mais ces fonctionnalités souffrent d'une mauvaise ergonomie et ne sont pas mises en valeur.
En créant une barre flottante qui s'affiche à la sélection d'un enregistrement, on facilite l'accès à ces fonctionnalités.
Actions de sélection
Le produit permettait déjà de faire des actions sur une sélection (ouverture, mise à jour en masse d’enregistrement, l'export). Mais ces fonctionnalités souffrent d'une mauvaise ergonomie et ne sont pas mises en valeur.
En créant une barre flottante qui s'affiche à la sélection d'un enregistrement, on facilite l'accès à ces fonctionnalités.
Les actions de sélection étaient mélangées avec les actions de la vue donnant lieux à des menus lourds avec des options désactivées lorsque l'utilisateur ouvrait le menu sans sélection
Les actions de sélection étaient mélangées avec les actions de la vue donnant lieux à des menus lourds avec des options désactivées lorsque l'utilisateur ouvrait le menu sans sélection
Les actions de sélection étaient mélangées avec les actions de la vue donnant lieux à des menus lourds avec des options désactivées lorsque l'utilisateur ouvrait le menu sans sélection
Répartition des actions de sélection dans l'application original et le redesign
Répartition des actions de sélection dans l'application original et le redesign
Répartition des actions de sélection dans l'application original et le redesign
La prévisualisation
La fonctionnalité de prévisualisation d'un enregistrement ou d'une pièce-jointe dans une vue n'est jamais utilisée à cause d'importants problèmes d'ergonomie (accessibilité, utilisabilité, affichage).
Pour faciliter la recherche d'un enregistrement, la fonctionnalité a été mise en avant via un composant standard dédié et en retravaillant le comportement par défaut pour que la pièce jointe soit ouverte en prévisualisation.
La prévisualisation
La fonctionnalité de prévisualisation d'un enregistrement ou d'une pièce-jointe dans une vue n'est jamais utilisée à cause d'importants problèmes d'ergonomie (accessibilité, utilisabilité, affichage).
Pour faciliter la recherche d'un enregistrement, la fonctionnalité a été mise en avant via un composant standard dédié et en retravaillant le comportement par défaut pour que la pièce jointe soit ouverte en prévisualisation.
La prévisualisation
La fonctionnalité de prévisualisation d'un enregistrement ou d'une pièce-jointe dans une vue n'est jamais utilisée à cause d'importants problèmes d'ergonomie (accessibilité, utilisabilité, affichage).
Pour faciliter la recherche d'un enregistrement, la fonctionnalité a été mise en avant via un composant standard dédié et en retravaillant le comportement par défaut pour que la pièce jointe soit ouverte en prévisualisation.
Les applications les plus déployées chez les clients Avanteam sont le Gestionnaire Électronique de Document (GED) et le gestionnaire Qualité dans lequel les utilisateurs ont besoin d'accéder aux informations d'un enregistrement ou d'une pièce jointe rapidement.
Les applications les plus déployées chez les clients Avanteam sont le Gestionnaire Électronique de Document (GED) et le gestionnaire Qualité dans lequel les utilisateurs ont besoin d'accéder aux informations d'un enregistrement ou d'une pièce jointe rapidement.
Les applications les plus déployées chez les clients Avanteam sont le Gestionnaire Électronique de Document (GED) et le gestionnaire Qualité dans lequel les utilisateurs ont besoin d'accéder aux informations d'un enregistrement ou d'une pièce jointe rapidement.
Avant / Après de la prévisualisation. Mise en avant des options d'affichage.
Avant / Après de la prévisualisation. Mise en avant des options d'affichage.
Avant / Après de la prévisualisation. Mise en avant des options d'affichage.
Barre d'action dans les enregistrements
Zoom sur certains concepts de la refonte.
Barre d'action dans les enregistrements
Zoom sur certains concepts de la refonte.
Barre d'action dans les enregistrements
Zoom sur certains concepts de la refonte.
Contexte
L'objectif était de travailler sur l'organisation des actions standards ainsi que les règles de personnalisation pour les boutons d'action liées au workflow spécifique de chaque client.
Contexte
L'objectif était de travailler sur l'organisation des actions standards ainsi que les règles de personnalisation pour les boutons d'action liées au workflow spécifique de chaque client.
Contexte
L'objectif était de travailler sur l'organisation des actions standards ainsi que les règles de personnalisation pour les boutons d'action liées au workflow spécifique de chaque client.
La barre d'action dans les vues et d'enregistrement sont issues du même composant DevExpress dans l'application Legacy.
Dans le but de livrer une nouvelle version homogène et consistante d'un point de vue Ux et UI, les barres d'actions de toutes les pages ont été revues.
La barre d'action dans les vues et d'enregistrement sont issues du même composant DevExpress dans l'application Legacy.
Dans le but de livrer une nouvelle version homogène et consistante d'un point de vue Ux et UI, les barres d'actions de toutes les pages ont été revues.
La barre d'action dans les vues et d'enregistrement sont issues du même composant DevExpress dans l'application Legacy.
Dans le but de livrer une nouvelle version homogène et consistante d'un point de vue Ux et UI, les barres d'actions de toutes les pages ont été revues.
Homogénéisation de la barre d'action
En utilisant les concepts introduits dans la vue, des règles ont pu être créées pour encadrer la personnalisation.
Les actions et options standards présentes dans tout enregistrement sont placées dans la barre d'action située en haut de l'enregistrement.
Les actions de workflows (pouvant dépendre de l'étape, des droits,….) sont positionnées dans la barre flottante située en bas.
Homogénéisation de la barre d'action
En utilisant les concepts introduits dans la vue, des règles ont pu être créées pour encadrer la personnalisation.
Les actions et options standards présentes dans tout enregistrement sont placées dans la barre d'action située en haut de l'enregistrement.
Les actions de workflows (pouvant dépendre de l'étape, des droits,….) sont positionnées dans la barre flottante située en bas.
Homogénéisation de la barre d'action
En utilisant les concepts introduits dans la vue, des règles ont pu être créées pour encadrer la personnalisation.
Les actions et options standards présentes dans tout enregistrement sont placées dans la barre d'action située en haut de l'enregistrement.
Les actions de workflows (pouvant dépendre de l'étape, des droits,….) sont positionnées dans la barre flottante située en bas.
Les interviews utilisateurs ont montré que les logiques de paramétrages réalisées par les consultants Avanteam sont différentes d'un projet à l'autre.
Les utilisateurs ont souligné le manque d'ergonomie lié aux boutons d'actions de sauvegarde, validation,… en haut de l'enregistrement (dans le cas de long formulaire)
Les interviews utilisateurs ont montré que les logiques de paramétrages réalisées par les consultants Avanteam sont différentes d'un projet à l'autre.
Les utilisateurs ont souligné le manque d'ergonomie lié aux boutons d'actions de sauvegarde, validation,… en haut de l'enregistrement (dans le cas de long formulaire)
Les interviews utilisateurs ont montré que les logiques de paramétrages réalisées par les consultants Avanteam sont différentes d'un projet à l'autre.
Les utilisateurs ont souligné le manque d'ergonomie lié aux boutons d'actions de sauvegarde, validation,… en haut de l'enregistrement (dans le cas de long formulaire)
Organisation des boutons d'actions
Organisation des boutons d'actions
Organisation des boutons d'actions
Terminer l'édition
Une grosse friction UX existait depuis toujours dans l'application. Il n'existe pas de moyen de repasser en lecture après être passé en édition sur un document (contrainte Tech).
En ajoutant un bouton dédié réalisant automatiquement les actions que doit réaliser l'utilisateur, permet d'éviter 3 clics à chaque bascule édition/lecture en attendant la refonte
Terminer l'édition
Une grosse friction UX existait depuis toujours dans l'application. Il n'existe pas de moyen de repasser en lecture après être passé en édition sur un document (contrainte Tech).
En ajoutant un bouton dédié réalisant automatiquement les actions que doit réaliser l'utilisateur, permet d'éviter 3 clics à chaque bascule édition/lecture en attendant la refonte
Terminer l'édition
Une grosse friction UX existait depuis toujours dans l'application. Il n'existe pas de moyen de repasser en lecture après être passé en édition sur un document (contrainte Tech).
En ajoutant un bouton dédié réalisant automatiquement les actions que doit réaliser l'utilisateur, permet d'éviter 3 clics à chaque bascule édition/lecture en attendant la refonte
Revenir au mode lecteur après l'édition d'un enregistrement.
Revenir au mode lecteur après l'édition d'un enregistrement.
Revenir au mode lecteur après l'édition d'un enregistrement.
Tests utilisateurs
Tests utilisateurs d'une trentaine d'utilisateurs internes et clients ont permis de vérifier des hypothèses.
Tests utilisateurs
Tests utilisateurs d'une trentaine d'utilisateurs internes et clients ont permis de vérifier des hypothèses.
Tests utilisateurs
Tests utilisateurs d'une trentaine d'utilisateurs internes et clients ont permis de vérifier des hypothèses.
Tests utilisateurs
La création d'un scénario d'utilisation basique, utilisant tous les éléments touchés par la refonte, a permis d'avoir des retours sur l'utilisation d'un grand nombre d'utilisateurs.
À l'aide d'un prototype Figma et d'un Google Form donnant des indications pas à pas, les utilisateurs ont pu noter et commenter les différents aspects de la refonte.
Tests utilisateurs
La création d'un scénario d'utilisation basique, utilisant tous les éléments touchés par la refonte, a permis d'avoir des retours sur l'utilisation d'un grand nombre d'utilisateurs.
À l'aide d'un prototype Figma et d'un Google Form donnant des indications pas à pas, les utilisateurs ont pu noter et commenter les différents aspects de la refonte.
Tests utilisateurs
La création d'un scénario d'utilisation basique, utilisant tous les éléments touchés par la refonte, a permis d'avoir des retours sur l'utilisation d'un grand nombre d'utilisateurs.
À l'aide d'un prototype Figma et d'un Google Form donnant des indications pas à pas, les utilisateurs ont pu noter et commenter les différents aspects de la refonte.
Formulaire de test
Formulaire de test
Formulaire de test
Prototype Figma
Prototype Figma
Prototype Figma
Prototype scénarisé
Prototype scénarisé
Prototype scénarisé
Résumé des retours de la première campagne de test.
Résumé des retours de la première campagne de test.
Résumé des retours de la première campagne de test.
Les résultats de ce résumé sont issus de la première campagne de test utilisateur.
Ils ont permis de valider ou non les hypothèses de la refonte et de mesurer la capacité des utilisateurs à adopter/accepter les changements.
Les résultats de ce résumé sont issus de la première campagne de test utilisateur.
Ils ont permis de valider ou non les hypothèses de la refonte et de mesurer la capacité des utilisateurs à adopter/accepter les changements.
Les résultats de ce résumé sont issus de la première campagne de test utilisateur.
Ils ont permis de valider ou non les hypothèses de la refonte et de mesurer la capacité des utilisateurs à adopter/accepter les changements.
Sortie 2026
Présentation aux clients lors du Symposium Avanteam 2025.
Sortie 2026
Présentation aux clients lors du Symposium Avanteam 2025.
Sortie 2026
Présentation aux clients lors du Symposium Avanteam 2025.
Présentation symposium 2025
Cette refonte est la partie visible de la nouvelle version majeure du produit. Elle accompagne et facilite la migration technologique du produit tout en corrigeant des problèmes d’Ux Ui majeurs et historiques dans l’application web Avanteam.
Pour faciliter la prise en main des évolutions fonctionnelles, une conférence a permis d'introduire aux utilisateurs les points importants de la refonte et échanger sur leur questions.
Présentation symposium 2025
Cette refonte est la partie visible de la nouvelle version majeure du produit. Elle accompagne et facilite la migration technologique du produit tout en corrigeant des problèmes d’Ux Ui majeurs et historiques dans l’application web Avanteam.
Pour faciliter la prise en main des évolutions fonctionnelles, une conférence a permis d'introduire aux utilisateurs les points importants de la refonte et échanger sur leur questions.
Présentation symposium 2025
Cette refonte est la partie visible de la nouvelle version majeure du produit. Elle accompagne et facilite la migration technologique du produit tout en corrigeant des problèmes d’Ux Ui majeurs et historiques dans l’application web Avanteam.
Pour faciliter la prise en main des évolutions fonctionnelles, une conférence a permis d'introduire aux utilisateurs les points importants de la refonte et échanger sur leur questions.
Symposium Avanteam 2025
Symposium Avanteam 2025
Symposium Avanteam 2025
