Concevoir une boutique en ligne qui vend

On voit souvent des projets transactionnels pencher d'un côté. Certaines boutiques roulent bien, mais ressemblent à n'importe quel thème. D'autres offrent une superbe expérience de marque où trouver une taille ou un prix tourne à la chasse au trésor. Une boutique qui vend réussit les deux à la fois.

Voici comment on cadre le projet, comment on conçoit chaque étape du parcours d'achat et où on laisse parler la marque, en plus des questions qu'on poserait à toute agence qui dit combiner UX, UI, mouvement et image de marque. Pour le volet animation, notre article sur le mouvement et l'UX dans les boutiques en ligne va plus loin.

« Refaire la boutique » peut vouloir dire bien des projets différents. Avant d'ouvrir le moindre fichier de design, on met par écrit ce qui change vraiment :

• La marque. Une mise à jour des règles visuelles, ou un nouveau positionnement, de nouveaux messages et de nouvelles photos ?
• Les parcours. Où perd-on des gens aujourd'hui : en cherchant un produit, en choisissant une variante, en comprenant la livraison, au paiement ?
• La plateforme. On reste ou on migre ? Quels marchés, quelles devises, quelles langues ? Notre guide pour choisir une plateforme de commerce en ligne vous aidera à trancher.
• L'édition. Qu'est-ce que votre équipe marketing voudra modifier seule après la mise en ligne : campagnes, collections, récits de produits ?
• Les contraintes. Intégrations, accessibilité, performance, analytique et soutien.

Cette page unique devient le cœur de votre brief de projet. Elle vous dit aussi, assez vite, si vous avez besoin d'un partenaire en image de marque, d'un intégrateur transactionnel ou d'une équipe capable de faire les deux.

Une vente se gagne rarement grâce à une seule page brillante. Elle se gagne en dissipant de petits doutes à chaque étape.

Navigation et collections

On organise le catalogue selon la logique de vos clients, qui ressemble rarement à celle de l'entrepôt. Les filtres doivent suivre les vraies décisions (taille, usage, compatibilité, prix), et une page de collection doit en montrer assez pour comparer sans ouvrir chaque produit.

Fiches produits

C'est ici que se joue l'essentiel de la persuasion. Une bonne fiche répond aux questions que les gens se posent vraiment : ce que c'est, pour qui, à quoi ça ressemble à l'usage, quelle variante choisir, quand ça arrive et quoi faire si ça ne convient pas. Sur un téléphone, le prix, la disponibilité et le bouton d'ajout au panier doivent sauter aux yeux.

Panier et paiement

Un panier court et transparent, c'est la base. Le coût total, les options de livraison et les taxes apparaissent tôt, pour qu'aucune surprise n'attende à la dernière étape. Comme la plupart des plateformes encadrent une bonne partie du paiement, on soigne la transition et on garde la marque cohérente jusque-là.

Mobile, rapidité et accessibilité

On conçoit d'abord pour le mobile, puisque c'est là que beaucoup de gens magasinent. Les images et les scripts restent légers, et on respecte les règles WCAG pour que la boutique fonctionne au clavier et avec les technologies d'assistance. L'accessibilité est une bonne pratique et, dans bien des marchés, une obligation légale.

Confiance

Des politiques claires, de vrais moyens de contact, des avis authentiques et des repères de paiement sécurisé font taire la petite voix qui murmure « peut-être plus tard ». Si un commerce physique ou un service expert se trouve derrière la boutique, dites-le. C'est exactement ce que fait Stenger Bike, en jumelant l'achat en ligne aux conseils en magasin que ses clients attendent.

Une couche de couleur sur un thème ne suffit pas. Dans une boutique, la marque vit dans des décisions :

• La direction artistique et la photo, qui rendent les produits désirables et cohérents, des pages de campagne jusqu'aux vignettes.
• Le récit des produits : l'origine, le savoir-faire, l'usage. Pour Pangram Pangram Foundry, la boutique comprend une expérience éditoriale qui présente les polices dans le contexte de la communauté du design, bien au-delà d'une liste de licences.
• Le ton, dans les descriptions de produits, les états vides, les messages d'erreur et les courriels de confirmation. Oui, même les messages d'erreur.
• Un système de design qui garde le tout cohérent à mesure que le catalogue grandit.

Parfois, la marque existe déjà et notre travail consiste à la traduire à l'écran. L'image de marque de Mate Libre a été créée par un autre studio, Caserne, et notre rôle portait sur le site web. D'autres fois, la boutique et la marque grandissent ensemble. Si vous hésitez entre les deux approches, lisez Marque et site web : ensemble ou séparément ?

Notre règle du pouce : la marque parle fort là où les gens décident si elle les intéresse (accueil, campagnes, récits de produits), et se fait discrète là où ils accomplissent une tâche (panier, compte, paiement).

Bien des agences disent combiner UX, UI, motion design et mise à jour de l'image de marque. La preuve apparaît quand ces disciplines rencontrent votre vrai catalogue. Voici les questions qu'on vous suggère de poser à chaque équipe retenue, la nôtre comprise :

• Quels projets transactionnels de votre portfolio ressemblent le plus au nôtre, et quel était votre rôle ?
• Qui dirigera l'image de marque, l'UX, le mouvement, le développement et l'assurance qualité, et ces personnes sont-elles à l'interne ?
• Comment le système de marque fonctionnera-t-il sur les fiches produits, au-delà de l'accueil ?
• Quelles parties de la plateforme et des intégrations livrerez-vous, et lesquelles seront confiées à d'autres ?
• Qu'est-ce que notre équipe pourra modifier sans développeur ?
• Quels contrôles d'accessibilité, de performance et d'analytique font partie de l'acceptation ?
• Quel soutien offrez-vous après la mise en ligne ?

Chez Locomotive, le design et le développement se font à l'interne dans la grande majorité des cas, et on fait appel à des partenaires de confiance pour les besoins spécialisés. On héberge, on soutient et on fait évoluer les boutiques qu'on bâtit. Pour des critères plus généraux, voir comment choisir une agence web.

Quand un intégrateur spécialisé convient mieux

Disons-le franchement. Si votre marque est établie et que le besoin principal est une migration de plateforme, la configuration d'un thème ou des intégrations administratives, un spécialiste de l'intégration transactionnelle pourrait mieux vous servir. Un studio porté par le design comme le nôtre prend tout son sens quand le projet repose sur une expression de marque distinctive et une expérience d'achat sur mesure.

La suite

Notez vos trois principaux irritants dans le parcours d'achat, les éléments de marque qui changent et les contraintes de plateforme que vous connaissez déjà. Mettez le tout sur une page : chaque discussion avec une agence deviendra plus rapide et plus franche, y compris avec nous.