- projet en alternance -

Filtres pour générer une liste de produits dans Evercampaign

Objectif : optimiser l’interface et introduire des options de filtrage plus avancées et ergonomiques.

Contexte : alternance

Support : desktop

Logiciel : Evercampaign

Rôle : chargée UI/UX

Outils : Figma

- à propos de -

Evercampaign est un outil interne de création et de gestion de campagnes marketing. Il est conçu pour simplifier et optimiser l’ensemble du processus, depuis le brief avec l’industriel jusqu’au pilotage de la campagne dans les différentes enseignes. Il permet aux Customer Success Managers (CSM) de planifier, organiser et piloter des campagnes marketing de manière efficace.

- Avant -

Dans l’ancienne version, l’interface de filtrage de liste de produits présentait une conception compacte, mais elle manquait de clarté et de flexibilité. Cette limitation rendait la navigation et l’application de plusieurs filtres confus pour les utilisateurs, entravant ainsi leur expérience globale. De plus, certaines options de filtrage utiles étaient absentes.

Les principaux axes des problèmes identifiés :

1. Interface :

surchargée et confuse ;

2. Options de filtrage :

limitées, ambiguës et difficilement modifiables ;

3. Liste :

surchargée et peu personnalisable.

- Aperçu avant / après -

Avant de voir les solutions proposées pour chaque problème, voici un aperçu de l’interface avant et après la refonte.

Avant*

Après*

*Faites glisser le curseur (< >) pour visualiser les différences entre les versions avant et aprés.

Refonte

- Interface -

Problème :

Interface surchargée : L’interface chargée rendait difficile la navigation et la compréhension des filtres. Les options étaient entassées sur un seul écran, créant une expérience utilisateur confuse.
Manque de hiérarchie d’information : La disposition des filtres était plutôt ambiguë et les éléments utilisés etaient linéaires, notamment les boutons, ce qui compliquait l’orientation rapide.

Solution :

Un point de départ : Les filtres sont maintenant répartis dans des sections distinctes (groupe, marque, catégorie), offrant un point de départ clair pour affiner la liste de produits.
Personalisation de filtrage : Les filtres sont ajoutés en fonction des besoins d’utilisateur, cela permis d’éviter le surcharge de l’interface, en offrant uniquement les options pertinentes.
Optimisation de l’espace et structure : L’interface a été réorganisée pour être plus structurée. De plus, lorsqu’une recherche est lancée, les filtres se ferment automatiquement, offrant ainsi plus d’espace pour afficher les résultats.

- Filtres -

Problème :

Absence de certains filtres souhaitables : Certains filtres étaient absents, comme la possibilité de retirer les produits labellisés bio de la liste. Avant, il n’était possible que de les ajouter.
Gestion de l’espace pour les filtres supplémentaires : L’ajout de nouvelles options de filtrage était compliqué, car il était difficile de prévoir l’espace nécessaire sans surcharger l’interface.
Gestion des filtres : Il était difficile de visualiser tous les éléments dans les filtres appliqués, et les utilisateurs ne pouvaient réinitialiser que l’ensemble des filtres et pas les cas individuels.
Manque de retour visuel et textuel : Il n’y avait peu d’accents de couleur ou explications textuels, laissant les utilisateurs incertains des actions à éffectuer.

Solution :

Plus de filtres : De nouveaux choix des filtres ont été ajoutés, avec la possibilité d’en ajouter encore plus en fonction des besoins, sans craindre de surcharger l’interface. De plus, l’option de « retirer » est maintenant disponible pour chaque filtre.
Gestion des filtres : La possibilité de modifier, effacer ou supprimer les filtres a été ajoutée et/ou mise en avant, rendant la gestion des filtres plus flexible et accessible.
Indices : Des codes couleur et des textes informatifs ont été ajoutés pour guider les utilisateurs, offrant un retour visuel immédiat et clair. Désormais, lorsque qu’un utilisateur souhaite « ajouter » ou « retirer » un élément de la liste, ces actions sont distinguées par différentes couleurs.

- Liste -

Problème :

Liste surchargée : La visualisation de la liste des produits était trop dense, ce qui rendait difficile la lecture et la comparaison des informations.
Personnalisation limitée : Les options pour personnaliser l’affichage des listes étaient limitées, réduisant la flexibilité et n’offrant pas gestion d’espace pour les utilisateurs.

Solution :

Espacement amélioré : La liste des produits a été réorganisée pour offrir plus d’espace entre les éléments, améliorant ainsi la lisibilité et la comparaison des informations.
Options de personnalisation : Des options de personnalisation de l’affichage ont été ajoutées, permettant aux utilisateurs d’adapter la liste selon leurs besoins, rendant la navigation plus efficace et l’utilisation plus agréable.

- voir le projet -

APERÇU DU PLAN DE TRAVAIL

prototype dynamique

Ci-dessous, un bouton vous permet d’accéder directement au fichier du projet édité dans Figma.

Accéder à figma