Tous les projets
BOUQUINERIE DES FLANDRES - Refonte UX-UI
d'un site vitrine
Refonte du site responsive (desktop, tablette, mobile) d'une bouquinerie, pensé pour la consultation du catalogue avec pour objectif de recentrer l'expérience sur l'essentiel : donner envie, montrer les livres disponibles, leur prix et leur état.
Projet fictif réalisé pour une entreprise existante, La bouquinerie des flandres, dans le cadre de ma formation.
CONTEXTE
La Bouquinerie des Flandres est un site vitrine permettant de consulter un catalogue de livres. Dans le cadre de ce projet, j'ai mené la refonte UX-UI de ce site existant, en conservant volontairement son identité visuelle (palette de couleurs et typographie) pour me concentrer sur un exercice précis : repenser l'architecture de l'information, la hiérarchie des contenus et les parcours de consultation, sans repartir d'une feuille blanche graphique.
L'objectif du site reste inchangé : permettre à un visiteur de parcourir le catalogue d'une bouquinerie et de consulter les fiches livres (prix, état, disponibilité).
PROBLÈME
En analysant le site existant, plusieurs frictions ressortaient :
-
Un hero header peu engageant : L'en-tête d'accueil reposait sur un visuel de livres assez générique, qui ne donnait pas immédiatement envie de se plonger dans le catalogue ni ne transmettait l'ambiance d'une vraie bouquinerie,
-
Des contenus dilués : La page d'accueil multipliait les sections (présentation, chiffres clés, catégories, avis) sans hiérarchie claire, ce qui noyait l'information réellement utile à un visiteur venu consulter des livres,
-
Des interactions superflues : Chaque fiche livre affichait un bouton "Consulter" en plus du titre, redondant avec le clic naturel sur la carte elle-même : une étape en trop dans le parcours,
-
Un manque d'informations essentielles : Le prix et l'état des livres, pourtant déterminants pour un achat en bouquinerie, n'étaient pas mis en avant.
Le vrai problème à résoudre : Comment simplifier le site pour qu'il remplisse au mieux sa mission donner envie de venir, et permettre de consulter rapidement les livres disponibles avec leurs informations clés sans surcharge inutile ?
PROCESS
-
Audit du site existant : J'ai passé en revue chaque section du site pour identifier ce qui servait réellement l'objectif de consultation, et ce qui relevait du superflu,
-
Définition du parcours prioritaire : J'ai posé un parcours simple : arriver → être happé par l'ambiance de la bouquinerie → consulter les services proposés → parcourir le catalogue → accéder en un clic à la fiche d'un livre,
-
Réorganisation de l'architecture : J'ai restructuré la page d'accueil autour de trois blocs clairs : un hero renouvelé, une section "Nos services", puis "Notre catalogue", suivis du footer en supprimant les sections qui n'apportaient pas de valeur immédiate au visiteur.
-
Nettoyage des micro-interactions : J'ai revu chaque composant (cartes livres, boutons, liens) pour ne garder que les actions nécessaires.
-
Maquettage et prototypage responsive (desktop, tablette, mobile), avant intégration.
SOLUTION
-
Un hero header repensé : une image plein cadre remplace le visuel de livres, pour créer une accroche visuelle immersive et donner immédiatement envie de découvrir la bouquinerie,
-
Une structure resserrée : "Nos services" pour présenter l'offre, "Notre catalogue" pour aller droit à l'essentiel (la consultation des livres), puis le footer,
-
Des fiches livres épurées : prix et état affichés directement sur chaque carte, pour donner l'information utile sans clic supplémentaire,
-
Une interaction simplifiée : le bouton "Consulter" est supprimé, le clic sur le titre de la carte suffit désormais à accéder à la fiche détaillée du livre,
-
Une identité visuelle conservée : couleurs et typographie d'origine reprises à l'identique, pour ancrer la refonte dans la continuité de marque plutôt que dans la rupture,
-
Intégration sur Webflow, en veillant à la cohérence du rendu sur desktop, tablette et mobile.
RÉSULTATS & APPRENTISSAGES
Cette refonte m'a permis de travailler un exercice UX classique mais formateur : améliorer un existant plutôt que créer une interface de zéro, ce qui impose de justifier chaque suppression et chaque ajout au regard de l'objectif métier. Elle m'a aussi confrontée à un principe que je retiens pour mes prochains projets : une information essentielle (ici, le prix et l'état) doit être visible sans effort, et toute interaction qui double une action déjà possible (comme un bouton "Consulter" à côté d'un titre cliquable) est un frein, pas un service rendu à l'utilisateur.
hero-header actuel de labouquineriedesflandres.fr
hero-header retravaillé