Refonte de la liste produits version Desktop du site but.fr
BUT international, spécialiste dans la vente d'équipement de la maison
Avec plus de 10 000 références produits, 320 magasins présents sur tout le territoire français, BUT international est un acteur majeur sur le marché de la vente d'équipement de la maison.
En qualité de webdesigner et développeuse front-end, j’ai été amenée à travailler sur la refonte de la version desktop du site e-commerce BUT.fr. La dernière refonte datant de 2018, les équipes ont souhaité, plus qu'une refonte graphique, une refonte structurelle des pages, ce qui devenait nécessaire afin de moderniser son design, améliorer l'expérience utilisateur et l'ergonomie et d’ajouter de nouvelles fonctionnalités.
Après avoir travaillé sur la refonte header, du footer et de la page d'accueil, il devenait urgent de se concentrer sur la liste produits.
Ce projet a été lancé dans le but d'améliorer l'expérience utilisateur, augmenter la visibilité des produits et également s'adapter au marché en proposant de nouvelles fonctionnalités.
Après avoir proposé les prototypes de cette liste produits et de ces déclinaisons, je me suis concentrée sur le développement front-end du conteneur, de la partie haute de la page (fil d'Ariane, titre, zone rattachement, filtres et des bannières de pages boutiques) et du contenu SEO présent en bas de page. J'ai été amenée à migrer ces zones Twig en composants React.js et à mettre en place SASS qui n'existait pas dans la version desktop du site, un gros nettoyage et une restructuration de CSS était nécessaire.
- Implication dans le projet
Webdesign et développement front-end
- Adobe XD
- Photoshop
- Illustrator
- HTML/SASS
- Javascript
- React.js
- Next.js
- Date de mise en production
Décembre 2022
- Site Web*
www.but.fr * La plateforme étant évolutive, la version en ligne peut être différente de celle présentée
J’ai été amenée à travailler sur d’autres éléments du site BUT.fr. Je vous invite à voir les réalisations suivantes :
Avant refonte
Après refonte
Cellules produits versions "Grid" et "Line"
La version "Line" de cette page est utilisée pour l'électroménager et le multimédia afin de permettre l'affichage des caractéristiques produits et ainsi faciliter la comparaison d'un produit à l'autre.
Les filtres
Un problème majeur avait été constaté au niveau des filtres, un constat qu'ils étaient peu ou mal utilisés. Un manque de clareté et un problème d'inaccessibilité au scroll nous a poussé à réétudier son ergonomie et son graphisme.
Rattachement au magasin
La zone rattachement au magasin souffrait du même problème que dans le header avant sa refonte, elle était difficilement comprise par l’utilisateur et manquait de visibilité.
Résultats de recherche
Refonte des pop-in