Création du site e-commerce : optimisation de la recherche produit et du parcours d’achat
Arte Fact (site internet) est une boutique de bijoux de créateurs située à Bordeaux. En 2025, j’ai réalisé la refonte de son site en mettant l’accent sur la recherche et le parcours d’achat.
J’avais déjà accompagné cette boutique en 2020 en lui créant son site e-commerce. Compte tenu de la crise sanitaire provoquée par le virus Covid-19, Arte Fact avait dû fermer temporairement et s’adapter en utilisant d’autres moyens de vente.
Optimisation de la recherche produit
Recherche AJAX
Afin d’améliorer le parcours d’achat, la recherche a été optimisée avec une recherche AJAX frontale qui affiche les résultats de recherche en direct dès qu’un visiteur commence à taper. L’utilisateur accède rapidement à des résultats pertinents filtrés par métadonnées.
En termes d’UI, j’ai conçu une interface agréable et tendance avec un fond flouté.
Les résultats de la recherche font apparaître au fur et à mesure les produits lors du défilement, avec une animation “load more” qui les charge automatiquement.
Filtres sur la page boutique
La page Boutique est accessible depuis un bouton primaire sur la bannière d’accueil et directement depuis la barre de navigation. Elle référence tous les bijoux en vente sur le site. J’ai mis en place un bouton de filtres sticky.
Cette fonctionnalité est conçue pour desktop et mobiles. Le bouton de filtres est accessible facilement quelque soit la main utilisée pour naviguer sur son mobile.
Lorsque l’on clique sur le bouton filtres, il s’ouvre sur une colonne latérale avec tous les filtres AJAX, actifs instantanément.
Filtres sur les autres pages
Afin de présenter la diversité des produits et de leur donner un maximum de visibilité, je leur ai réservé un espace sur chaque page de marques et de types de bijoux. Sur ces pages, une classification apparaît dans une barre latérale également sticky.
Les bijoux vendus dans la boutique sont tous des créations originales et artisanales, et souvent des pièces uniques. Nous avons créés des corners par marque qui valorisent le savoir-faire des créateurs et les méthodologies de travail. Leurs créations sont présentes également, avec une classification par typologie.
Design de l’IU : du parcours d’achat jusqu’au tunnel de paiement
L’utilisateur peut facilement ajouter des produits à son panier grâce à un bouton AJAX. Lorsqu’il ajoute un produit à son panier, un message de confirmation s’affiche automatiquement et un picto sur le panier de la barre de navigation lui indique le nombre de produits ajoutés. Pour finaliser son achat, l’utilisateur choisit de récupérer son produit en click & collect ou de se faire livrer (avec des frais de livraison calculés automatiquement selon son pays). L’utilisateur peut également créer un compte s’il souhaite consulter ses achats passés.
L’utilisateur est tenté de poursuivre ses achats, avec l’ajout de suggestions de produits similaires sous chaque article, ainsi que dans le panier. Ainsi, le client est incité à poursuivre sa navigation sur le site et de suivre un itinéraire alternatif.
Identité visuelle
La création et refonte du site e-commerce a débuté par une définition de la charte graphique. Celle-ci correspond à la décoration et au style de la boutique d’où l’importance de maintenir une unité visuelle pour les clients et utilisateurs.
Logo
Les deux versions du logo (carré, horizontal) ont été conçues en associant les couleurs et les valeurs de la marque : le doré est une couleur précieuse qui fait référence aux bijoux, à la qualité et à la beauté. Le vert fait référence au naturel et au minéral, aux pierres semi-précieuses utilisées. Le logo carré est le logo principal. Il évoque un tampon, une référence au savoir-faire et à la création artisanale des bijoux. Le logo horizontal est une variante utilisée notamment sur les supports digitaux.
Couleurs
Typographies
Voyage
Voyage est une police d’affichage romantique et généreusement courbée, idéale pour les titres ou pour des textes courts à moyens. Voyage se distingue par ses fins tracés délicats qui accentuent les contrastes. Cette police a été créée par VJ-Type.
Outfit
Outfit est une police Google. C’est une typographie Sans géométrique, police de caractères officielle de la société d’automatisation des marques outfit.io.
