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. Simplifier l’interface actuelle, la navigation, hiérarchiser et structurer les contenus, guider l’utilisateur 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 pour 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 liens 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
- rendre possible la recherche d’un opticien ESV dans une ville
- Localiser la boutique sur une carte
- Indiquer si la boutique est ouverte.
La page opticien doit :
- Présenter la devanture de 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
Le logotype “Expert en Santé Visuelle” (ESV) se compose 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é 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 typographies sur l’ensemble des services de la société Groupe All, en utilisant la “Open Sans”.
Iconographie
L’usage des pictogrammes a été jugé excessif et parfois inadapté sur l’ensemble des pages du site.
- Présent principalement à but décoratif,
- Nuit à 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.
Le manque de cohérence graphique, jusque dans les usages interactifs des pictogrammes, fragilise l’expérience de navigation et renvoie une image de marque confuse et peu maîtrisée. J’ai choisi d’utiliser des pictogrammes provenant d’une même famille pour :
- guider le regard des utilisateur
- 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
La page d’accueil
- Les derniers articles
- Représenter les Experts en Santé Visuelle,
- Communiquer leurs valeurs de ses adhérents,
- Présenter les offres,
- Donner des informations,
- Mettre en avant les magasins adhérents auprès des consommateurs.
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
> Rendre plus visuels les éléments du menu
Contenu
FOOTER
- Mise en avant de l’adhésion à la newsletter
- Reprendre les liens de navigation principale + FAQ (consigne)
- Mentions légales
Wireframe
Maquette
