Refonte site web

Refonte du site web de la marque de cosmétique homme Man’s Beard. La demande était de le moderniser et d’en améliorer l’ergonomie. Projet à finaliser au fil du temps en parallèle de travaux diverses dans un délai de 1 an.

Site v1

Site v2

CONSTAT

De trop nombreux retours clients pour un éclairage complet sur toute la gamme de produits. Cible intéressée mais noyée dans une masse d’informations.

 

ANALYSE

Il existe là un réel besoin pour cette cible d’être davantage guider dans l’information. En d’autres termes le site V1 doit absolument évoluer vers un design UX plus poussé en ce sens.

 

CAUSE

L’entité Man’s Beard propose une gamme très riche et complète de produits cosmétiques hommes. V1 du site trop peu catégorisante.

 

SOLUTION

Nécessité de mettre en place un Audit UX sur le site V1.

Découverte du concept
Accés au catalogue
Rassurance qualité
Adhésion réseaux
Contacter
Action

•  Je me renseigne
•  Je veux comprendre

•  Je découvre la gamme
•  Je consulte les produits

•  Je veux être rassurer sur la qualité des produits pour commander

•  Je consulte les réseaux sociaux
• J’adhère à la communauté

•  Je les contact

Pensée

« Super ! C’est concis et clair. J’ai immédiatement compris. »

« J’accède facilement au catalogue mais quel produit choisir ? La gamme est trop fournie. Je ne la comprends pas. »

« Ok bof. Le concept présente une fabrication française et des soins naturels. C’est cool. Mais rien ne me convainc sur la qualité. »

« Où sont les liens ? La marque est-elle absente des réseaux sociaux ? Quel dommage ! »

« Le menu indique une page dédiée à l’envoi de mail. Ha ok, c’est écrire en tout petit mais le footer indique aussi toutes les coordonnées. »

Expérience
Faiblesses

Trop de produits répertoriés dans chaque catégories.

Aucune section rassurance.

Pas de liens vers les comptes Facebook, Instagram (très actifs notamment sur des promotions et jeux concours) et la chaîne Youtube.

Coordonnées dans le footer pas assez visibles.

Opportunités

Garder le design.

•  Recatégoriser la gamme pour réduire la quantité de produits présentés dans une page
•  Pas d’article pour chaque produits afin de faciliter la comparaison avec certains d’entre eux. Et garder comme stratégie commerciale de rappeler à l’utilisateur l’existence d’autres produits

Rassurer sur la qualité professionnelle avec :
•  Section avec les logos des clients professionnels référents
•  Avis de professionnels reconnus

Icônes des réseaux sociaux visibles.

Les mettre un peu plus en avant

Le zoning

Zoning ensuite posé sur un rough papier.

L’opportunité prioritaire qui se dégage de l’audit UX est donc de rescinder la gamme en plus de catégories, à la fois de façon claire et instructive. Cette réflexion concerne davantage la section « produits » du site.


Dans un second temps, l’objectif de départ étant de moderniser le site, l’aspect graphique a donc dû aussi être modifié. Un benchmark et une veille concurrentielle a aider à nourrir l’inspiration et la créativité.

Le contenu

Travail de réflexion, de traitement et d’organisation du contenu.

 

LES IMAGES

Crées depuis un shooting photo produits (Bridge numérique Nikon CoolPix B500 et mini studio photo) et retravaillées sur PHOTOSHOP, chacune d’entre elles ont été pensé en fonction de leur utilité et position dans le site.

Puis allégées d’une moyenne de -80% via l’outil TinyPNG et renommées judicieusement pour l’optimisation du référencement naturel.

 

LES TEXTES

Reformulés ou complètements réécrit avec un ton propre à la marque et validés auprès de professionnels (barbiers, coiffeurs, laborantins …).

LE CONTENANT

Recherche d’un thème gratuit performant et collant au mieux au rough. « ASTRID » développé par ATHEMES a été retenu.

Mise en place du CMS, du thème et de son thème enfant. L’hébergement et le nom domaine étant déjà acheté.

Structuration du site, création des pages et des articles via l’extension ELEMENTOR. Insertion du contenu. Derniers réajustements en CSS & PHP. Sauvegarde complète du site.