Groupe All : espace adhérent

Mai 2018 —
Noctaupus Ga Espace Adherent Cover
Livrables
Application
À chaque chargement de cette page
Testé le
CO2 émit
Chargé
Qualité

Groupe All : espace adhérent

Contexte

Groupe All m’a confié la refonte de son espace adhérent, un espace d’échange avec ses adhérents utilisé pour :

  • Communiquer des actualités : formations, nouveautés, évènements, réglementations
  • Transmettre des documents administratifs : factures, CGV fournisseurs, suivre les commandes
  • Faciliter les achats : montures, produits de contactologie…

Mission

Améliorer l’esthétique et l’expérience utilisateur, en prenant en compte que la page d’accueil est susceptible d’évoluer (s’étoffer). Il m’a aussi été demandé de créer les icônes correspondant à chacune des parties de la plateforme. Ensuite, est venu la refonte de l’agenda et l’espace de partage de fichiers.

Préliminaire : audit

J’ai réalisé un audit d’après la capture d’écran de l’actuel espace adhérent (fourni par le client) et des questions que j’ai posé au client. J’ai remarqué plusieurs axes d’améliorations : l’identité graphique et la navigation.

Problèmes liées à l’identité graphique

Les codes graphiques et les éléments mis en place sur le site vitrine du Groupe All et sur l’espace adhérent sont assez différents : logo, barre de navigation, couleurs… Aussi, le style des icônes n’e son’est pas homogènes sur l’application. Certaines sont en contour, d’autres en aplat et en dégradé… Bref, c’est un joyeux bazar.

Problèmes liées à la navigation

Les liens de navigation ne sont pas accessibles sur toutes les pages de l’application web. Pour naviguer dans les différentes pages de la plateforme, il faut systématiquement repasser par l’écran d’accueil. Ce qui complexifie le parcours et génère de nombreux clics et chargements.

Autant dire que les opticiens ont tout intérêt à être patient et à avoir les pages de l’application qu’ils utilisent régulièrement dans des onglets différents.

Conception

Concept 1 : tableau de bord

Cette proposition a été jugé trop “novateur” et a été directement écarté. L’idée était d’avoir un tableau de bord à la manière des interfaces des applications métiers que les opticiens ont l’habitude d’utiliser. Toutes les informations utiles sont visibles à l’écran sans avoir besoin de défiler dans la page à la recherche de l’information recherchée.

J’aurais apprécié avoir la possibilité d’en discuter directement avec un panel d’opticiens adhérents ESV de tous âges. Ceci dit, j’ai discuté de mes intentions croquis à des amis opticiens et opticiennes, qui m’avaient encouragé dans ce sens.

Les interfaces “tableau de bord” offrent de nombreux avantages :

  • une navigation facilité, puisque le menu et toujours à porté de clic
  • Sur la page d’accueil les données clés sont visibles : évènements à venir, état des commandes, services mis en avant, incitation à augmenter sa formule.
  • S’adapte facilement aux différentes tailles d’écran

Concept 2 : Comme un smartphone (piste suggérée)

Il m’a été demandé d’intégrer un smartphone dans l’interface non pas comme élément visuel, mais comme élément interactif. Les icônes dans l’écran serviraient à naviguer sur les différentes pages de l’application web.

Cette demande pose 5 problèmes :

  • La navigation poserai le même que celui sur la plateforme actuelle.
  • L’utilisateur risque de penser qu’une partie du contenu n’est pas chargé.
  • L’utilisateur risque de se demander s’il est bien sur le bon site. Les photos de smartphones sont généralement utilisées sur les sites des fabricants ou des revendeurs pour présenter le produit.
  • L’utilisateur risque de ne pas comprendre ce qu’il est sensé utiliser les icônes du smarphone pour naviguer dans l’application. Cette utilisation sort du modèle de navigation familier aux utilisateurs sur le web.
  • Sur mobile on aurait une infection, un téléphone dans un téléphone…

Certes cette proposition est originale, mais l’originalité n’est pas toujours la meilleure option, c’est d’ailleurs le fondement de la loi de Jakob (une règle de design d’expérience utilisateur). Selon laquelle, les utilisateurs passent plus de temps sur d’autres sites que sur le votre. Autrement dit, l’humain préfère ce qu’il connait déjà.

En énonçant cette liste de problème, j’ai réussi à convaincre le client que cette idée n’était pas la meilleure solution à adopter. Un compromis a été trouvé, le smartphone a été abandonné, mais la représentation des différentes pages en icône d’application mobile conservée.

Réalisation

Page d’accueil

Pour simplifier le parcours de l’utilisateur dans l’application, j’ai intégré une barre de navigation catégorisée semblable à celle du site de la société.

Il m’a été demandé par le biais d’un court texte de souhaiter la bienvenue à l’utilisateur connecté et de reprendre l’idée d’icônes d’application sur smartphone. La page d’accueil est composée de “blocs” avec une icône (que j’ai créé pour l’occasion), un titre et une courte description pour expliquer ce que trouvera l’utilisateur.

Agenda

Cet interface est un espace d’échange avec l’adhérent ESV, notamment pour lui communiquer les évènement organisé par Groupe All. Est associé à l’évènement, une date, une photographie, une catégorie, un tarif, un organisateur. Les évènements sont rangé par ordre chronologique et celui du jour sont mis en avant par rapport aux autres. Au clic, l’évènement s’ouvre en modale (j’aurais préféré sur une nouvelle page) dans laquelle les détails de l’évènement sont plus amplement détaillés.

Dossier de partage

Il s’agit d’un espace où des fichiers sont mis à disposition de l’adhérent regroupé en 3 rubriques :

  • Les fichiers récemment ajoutés
  • les services
  • les achats