Contexte
La société Groupe All m’a proposé (ainsi qu’à d’autres designers graphiques) de travailler sur la refonte de leur site “Expert en Santé Visuelle”. Ce site propose des informations et des conseils liés à la santé visuelle.
Avec ce site, Groupe ALL souhaite mettre en avant les opticiens labellisés « Expert en Santé Visuelle ». Ces opticiens proposent une prestation de qualité et prend le temps d’échanger avec sa clientèle.
Client
Groupe All est une PME situé à Mons-en-Barœul (Haut-de-france), elle s’adresse aux opticiens indépendant, dans le cadre de ce projet aux opticiens certifié “Expert en santé visuel”. Différents services sont proposés par le Groupe All :
- Une centrale d’achat (montures, verres, …) offrant aux opticiens indépendants les mêmes avantages que les grandes enseignes tout en restant indépendant.
- Un service de communication qui aide les opticiens à communiquer plus efficacement sur la valeur de leur service, des offres promotionnelles…
- Un service de community manager pour animer les pages Facebook des opticiens, en leur proposant des publications (visuel + texte) que les opticiens peuvent utiliser.
- Un site dédié aux opticiens certifiés “Experts en Santé Visuelle”, ce qui met en avant leur engagement, leurs expertises et leur permet de gagner en visibilité pour toucher plus facilement leur cible grâce à un annuaire en ligne…
Challenge
- Rafraichir l’apparence du site
- Re-structurer le site, centraliser les informations, faciliter la navigation et la lecture des informations.
Problème : Tout est trop gros et manque d’aération ce qui donne un aspect très brouillon, on se sent ensevelis par toutes ces informations - Améliorer l’expérience utilisateur
Problème : Simplifier l’interface actuelle, simplifier le menu de navigation, hiérarchiser et structurer les contenus pour faciliter la navigation dans le site et vers l’information recherchée. - Présenter l’expert en santé visuelle, ses valeurs, son magasin, ses produits
- Mettre en avant les magasins adhérents auprès des consommateurs
- Faciliter la prise de contact et encourager l’utilisateur à se rendre en magasin.
Pour cette première étape de travail, les efforts se sont d’abord portés sur la page d’accueil et l’annuaire et la fiche opticien.
Cible
La plateforme Expert en Santé Visuelle est “Business to Business to Consumer” (B2B2C), c’est-à-dire qu’elle s’adresse à la fois aux :
- Professionnels : les opticiens adhérents Expert en Santé Visuelle
> Être plus visible de leurs prospects locaux - Particuliers
> Faciliter la recherche d’un opticien qualifié à proximité
> Trouver des informations fiables et des articles sur la santé visuelle.
Exploration
Recherche
Liste des éléments fournis aux designers graphiques participants à la refonte :
- Un brief complet : retraçant l’historique de la société, le besoin et les attentes
- La structure des pages du site
- Les éléments de navigation
- Une capture d’écran de l’état actuel de la page d’accueil de la plateforme
- Des références : liens vers des sites concurrents ou ayant des thématiques proches.
J’ai, en guise de complément, visiter des sites e-commerce et des annuaires en ligne afin de comprendre les besoins des utilisateurs et repérer des modèles de conception sur ce type de site. “Rien ne sert de réinventer la roue”. D’autant plus que ces sociétés sont peut-être plus mature sur les sujets UX et ont fait des test utilisateurs.
Analyse
L’analyse de la concurrence directe et indirecte m’a permis de comprendre que
L’annuaire doit :
- Permettre la recherche dans une zone géographique
- Mettre en avant la disponibilité (ouvert/fermé) de la boutique
- Repérer facilement sur une carte où la boutique se situe
La page opticien doit :
- Présenter la boutique, ses valeurs
- Indiquer les transports en commun aux alentours (Ligne, arrêt, …)
- Présenter les marques phares présentes en magasin.
Idéation
Conception
Couleurs
J’ai décidé d’utiliser les couleurs présentes sur le logotype d’ “Expert en Santé Visuelle” (ESV). Le logo ESV est composé de 5 pastilles colorées représentant les différentes couleurs de l’oeil humain : bleu, gris, marron, vert et olive/dorée. J’ai choisi d’utiliser ces couleurs pour la navigation afin de différencier les pages principales du site.
- Bleu : Santé visuelle
- Gris : Vue des enfants, Vue des adultes
- Marron : Choisir ses lunettes
- Vert : Prix et remboursement
- Vert/Doré : couleur identitaire des ESV
J’ai utilisé la couleur olive/dorée comme couleur principale de la plateforme, en accord avec la refonte de la communication externe et interne pour les ESV. Cette couleur véhicule une image de marque à la fois douce, qualitative et proche des autres. Ce qui est totalement raccord avec la vision de “Groupe All”, faire de ESV un label, une distinction, un gage de qualité.
Typographie
J’ai utilisé la typographie “Open Sans” déjà utilisée sur le site et les supports de communication existants.
J’ai suggéré d’uniformiser les typographie sur l’ensemble des services plateformes la typographie de marque du Groupe All, en utilisant la “Open Sans”.
Iconographie
Il a été reproché une utilisation trop fréquente des pictogrammes sur l’ensemble des pages du site.
Au delà de la fréquence, les pictogrammes n’étaient pas correctement utilisés :
- Présent principalement à but décoratif,
- Trop gros, ce qui altère la hiérarchie visuelle des informations
- Problème d’accessibilité, difficile à comprendre car il manque un texte d’accompagnement.
- Graphiquement hétérogènes, ce qui met en péril l’unité graphique et pire crée une perte de repère pour l’utilisateur.
Une utilisation hétérogène des pictogrammes nuit à :
- la navigation interne du site
- l’utilisateur qui est perdu,certains sont cliquables d’autres non dans un lot informations
- l’image de marque devient confuse, manque de clarté et d’unité
J’ai choisi d’utiliser des pictogrammes provenant d’une même famille pour
- guider le regard de l’utilisateurs
- mettre en avant les informations qui lui seront utiles (navigation interne)
- différencier et regrouper les éléments qui composent la page.
———-
Task Flow
Accueil > Pages du site
Accueil (Recherche d’un ESV) > Résultat de recherche > Page ESV
Beaucoup de choix sont présentés aux utilisateur, moins il y a de choix, plus le parcours est simplifié, plus l’utilisateur se sent guidé.
Répartition des fonctionnalités
Accueil
– Les derniers articles
Annuaire
- Rechercher un opticien en tapant le nom d’une ville ou en se géolocalisant grâce à l’appareil utilisé
- Avoir une carte interactive pour situer les opticiens ESV.
Fiche opticien ESV
- Afficher une galerie d’images pour découvrir l’ambiance de la boutique, les opticiens
- Afficher un texte descriptif pour rassurer les potentiels clients
- Afficher les informations relative à la boutique (horaires d’ouverture, adresse, téléphone, …) pour faciliter la prise de contact et le déplacement en boutique
Zoning
HEADER
> Structurer les éléments et les informations
> Donner
FOOTER
Wireframe
Maquette