Expérience d’achat fluide et inspirante : découvrez la nouvelle boutique Shopify de la marque Alain Milliat

Conçue sur la plateforme Shopify, la nouvelle boutique en ligne de la célèbre marque de jus de fruits propose une expérience d’achat fluide et en cohérence avec son positionnement haut de gamme.

Design, expérience utilisateur, technologie et marketing digital : on vous présente le projet !

L’identité visuelle

Immerger le visiteur dans l’univers de marque

Cette phase de travail a consisté à décliner l’identité visuelle de la boutique en ligne en s’inspirant de la nouvelle charte graphique d’Alain Milliat, brillamment pensée par nos amis de l’agence créative Abmo. Les maquettes graphiques de chaque page du site ont été conçues en respectant les codes de la marque : premium, authenticité, plaisir, sensibilité.

Résultats : avec un web design réussi et différenciant, le lien affectif est renforcé entre les visiteurs et la marque.

Webdesign - wireframes pour site e-commerce

Wireframes : les bases de la conception de l’interface web.

Webdesign - maquettes graphiques pour site e-commerce

Déclinaison des wireframes en maquettes graphiques.

L’expérience utilisateur

Proposer une expérience d’achat fluide et efficace

Le webdesign d’un site e-commerce est une première base, mais l’expérience utilisateur – et plus précisément l’expérience d’achats – est cruciale pour garantir la conversion. Ce travail s’est effectué en déclinant les maquettes graphiques en prototypes interactifs (sur l’outil Adobe XD), permettant ainsi de tester et d’améliorer l’expérience offerte par la boutique avant de commencer à développer.

Parmi nos axes d’amélioration sur l’expérience utilisateur :

  • Fluidifier la navigation : menu principal épuré mais toujours visible, fil d’ariane et boutons de retour, suggestions de contenus similaires.
  • Faciliter la lecture de l’information : conception de page aérée, ratio texte-image, hiérarchisation de l’information,
  • Garantir la vitesse et l’accessibilité du site : vitesse de chargement des pages optimisée, images compressées au format .webp, boutique hébergée sur le cloud Shopify.
Test de l'expérience d'achat avec l'outil adobe XD

Déclinaison des maquettes en prototypes interactifs (adobe XD) ,
test de la navigation et de l’expérience d’achat.

Parmi les points d’amélioration de l’expérience d’achat :

  • Faciliter la recherche produit : module de recherche, système de filtres produits (type, ingrédient et sélection).
  • Proposer une expérience inspirante : pages thématiques sur les instants de dégustations mélangeant sélections de produits avec du contenu de marque, des recettes et témoignages.
  • Rassurer le client : transparence sur les informations produits et conditions de vente (frais et délais d’expédition, retours, …), mise en avant de la proximité du service clients (téléphone, formulaire, questions fréquentes, …).
  • Garantir un achat rapide et efficace : système d’ajout panier rapide depuis les collections, tunnel de commande Shopify parmi les plus efficaces.
Expérience utilisateur mobile - e-commerce Shopify
Expérience utilisateur mobile - boutique en ligne

M-commerce

Optimiser l’expérience d’achat sur mobile

Le m-commerce (comprendre les achats sur mobile) n’est plus une tendance mais une réalité. Le travail que nous avons mené sur l’amélioration de l’expérience d’achat a donc été particulièrement orienté sur mobile. Via les prototypes de maquettes interactives, nous avons pu tester et optimiser la conversion mobile, de la recherche produits à la validation de la commande.

Parmi les points d’amélioration sur l’expérience mobile :

  • Garantir une navigation fluide avec une gestion « responsive » des contenus et une utilisation de spécificités propres au mobile (défilement par balayage, accessibilité des liens/boutons, menu principal, …)
  • Faciliter l’ajout au panier, que ce soit depuis une page Collection (via l’achat rapide) ou une page Produit (avec ajout panier toujours visible pendant le scroll).
  • Améliorer la conversion mobile en proposant le « guest checkout » lors d’une commande.
Expérience d'achat mobile - boutique Shopify

La technologie : Shopify

Une plateforme e-commerce intuitive et efficace

En tant qu’agence e-commerce Shopify Partner, Shopify est une plateforme e-commerce que l’on recommande souvent à nos clients, si le cahier des charges le permet. La plateforme offre à la fois une expérience utilisateur excellente -notamment via son tunnel de commande -, et une gestion simple et intuitive de la boutique pour les administrateurs.

Parmi les interventions sur le back office Shopify :

  • Installation et configuration du multilingue (FR/EN)
  • Configuration des zones et des frais de livraison, connexion avec la plateforme SendCloud pour la gestion des expéditions
  • Installation de la solution de paiement en ligne PayZen, et personnalisation des emails transactionnels
  • Connexion à la plateforme de marketing en ligne Mailchimp, synchronisation des abonnés, des produits et des transactions
  • Création et configuration des canaux de vente Facebook et Instagram depuis la plateforme Shopify

Parmi les points d’optimisation de la boutique :

  • Référencement naturel (SEO) : optimisation des contenus et des balises titres, compression des images, test de la vitesse d’affichage, redirection des anciennes URLs
  • Web Analytics : connexion et configuration des comptes Google Search Console et Google Analytics afin de mesurer les performances de visibilité, de visites et de conversions sur la boutique en ligne.

Accompagnement et collaboration

Tout au long de ce projet, il nous a fallu prendre en compte les attentes et les objectifs de cette refonte, ainsi que le secteur et l’écosystème existant d’Alain Milliat (clients, collaborateurs, partenaires). Choix et configuration de la plateforme e-commerce, arborescence du site, webdesign et expérience utilisateur : le succès de ce projet e-commerce s’est fait grâce la collaboration de l’agence créative Abmo, et celle des équipes d’Alain Milliat qui ont su nous challenger, s’adapter, et nous faire confiance pour piloter cette refonte.

Et vous, vous avez un projet de boutique Shopify ?

Partenaire impliqué sur le projet

Abmo agence partenaire
Abmo
Direction artistique
Visiter la boutique