Refonte de la liste produits version Desktop du site but.fr

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

    Liste produits avant la refonte
  • Après refonte

    Liste produits après la refonte
  1. 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.

    Page d'accueil après la refonte
  2. 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.

    Page d'accueil après la refonte
  3. 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é.

    Page d'accueil après la refonte
  4. Résultats de recherche

    Page d'accueil après la refonte
  5. Refonte des pop-in

    Page d'accueil après la refonte
Web Analytics