UX / UI : refonte d'un site e-commerce
Voici quelques exemples tirés d'un projet, il s'agit de la refonte de l'intégralité du site d'une marque d'outillage.
L'objectif ? Passer d'un site vitrine à une boutique en ligne, tout en modernisant l'aspect général et la navigation.
Les 3 grandes contraintes du projet :
1) Humaniser le style de la marque
2) Mettre en avant la technologie phare proposée
3) Rendre tous les services très accessibles pour le client dès la homepage
Mon rôle sur ce projet : prototypage du site, réalisation des maquettes, direction artistique, prise de vue, design graphique.
Wireframe de la Homepage
Dès le prototypage du site, nous répondons à la problèmatique "Comment humaniser le style de la marque ?" en proposant de grands espaces réservés à des photos type Lifestyle. Ainsi nous pourrons mettre en scène des personnes utilisant les outils. Pour les photos des outils, nous préconisons l'utilisation de photos en situation.
Pour mettre en avant la technologie phare, nous choisissons d'intégrer directement dans la navigation principale, un menu déroulant menant à des pages dédiées à ce sujet.
Enfin, pour rendre tous les services très accessibles pour le client, nous décidons d'intégrer 4 pictogrammes sous le slider. Ces pictogrammes résument les 4 grands services proposées par la marque soit le SAV, la bibliothèque de notices, l'aide pour trouver un site où acheter et le contact d'un conseiller.
Première maquette Homepage
J'ai réalisé cette maquette à l'aide d'Adobe XD. Un travail a été réalisé sur la photographie pour donner de l'éclat à l'ensemble des visuels et adopter un style "réseau sociaux". Une charte de pictogrammes a également été crée uniformiser le style graphique. Nous avons également intégré de nouvelles couleurs pour égayer l'ensemble et distinguer les 3 grandes catégories : Bricolage / Jardin / Maison.
Maquette d'un article de blog
Design des articles de blog, avec produits associés au thème de l'article. L'idée est ici aussi de laisser place à de grandes images, renforçant l'ancrage de la marque dans la vie de ses clients.
Maquette de la fiche produit
Page la plus importante du site, la fiche produit a été travaillée pour que le potentiel client voit directement les 5 grands services proposés par la marque, pouvant conforter sa décision d'achat : Où acheter / Accessoires / Garantie / Notice / SAV. Ces services ont été illustrés avec des bannières pour capter son attention.
