Hemricourt — Création site e-commerce mode | DA, UX et maquettes Shopify

◎ Une marque qui vend un uniforme, pas une collection

Le manifeste d'Hemricourt tient en une idée : chaque femme cherche son uniforme, ces pièces indispensables qui deviennent une signature à force d'être portées. La marque le formule elle-même sur sa page « About » : une coupe sans compromis, une vaste gamme de couleurs, un éventail de finitions, et une conviction, « acheter moins mais mieux ».

Le produit iconique de la marque illustre ce parti pris : un haut et un bas à mixer, déclinés dans des couleurs franches. La cliente ne choisit pas une tenue toute faite, elle compose la sienne.

Pour un site de vente en ligne, cette promesse pose un problème précis. Un thème standard présente les produits un par un, en grille serrée, avec des vignettes identiques. Il montre un catalogue. Hemricourt devait montrer une manière de s'habiller.

◎ Ce que la direction artistique devait traduire

Avant la première maquette, nous avons fixé trois exigences, issues du positionnement de la marque et non d'une tendance graphique :

• La couleur comme repère de navigation. La palette est l'argument de vente. Elle devait guider l'œil, pas décorer.
• Le vêtement en grand. Une coupe se juge sur la silhouette entière. Une vignette de 300 pixels ne permet pas de voir la tombée d'un pantalon ni la longueur d'un haut.
• Une identité qui assume l'audace. Une marque mode et trendy ne peut pas ressembler à toutes les boutiques bâties sur le même modèle gratuit. Le site devait surprendre sans perdre la cliente.

Ces trois exigences ont servi de grille de décision pendant tout le projet : chaque élément proposé en maquette devait servir au moins l'une d'elles.

◎ Les maquettes UX : six choix de conception et leur raison

◈ Des collections à deux produits pleine largeur par ligne

Plutôt que la grille de quatre ou cinq produits par ligne, les pages collection affichent deux pièces en grand format. La cliente voit la coupe, la matière et la couleur sans ouvrir chaque fiche. Sur une marque à catalogue resserré, ce format met chaque pièce en valeur au lieu de la noyer.

◈ Des color swatches sur les produits

Les pastilles de couleur permettent de passer d'un coloris à l'autre directement. Pour une marque dont l'argument est la palette, c'est le moyen le plus direct de montrer l'étendue du choix et d'inviter à composer haut et bas.

◈ Des survols rouges et des GIF animés

Le rouge vif au survol et les GIF animés donnent au site son énergie. Ils jouent le rôle qu'une vitrine joue en boutique : attirer le regard et donner envie d'entrer. Ils restent cantonnés aux zones de découverte pour ne jamais gêner l'acte d'achat.

◈ Une fiche produit avec bouton d'ajout au panier fixe

Une fiche mode est longue : photos portées, détails, guide des tailles, livraison. Le bouton « ajouter au panier » reste visible pendant tout le défilement. La cliente qui a décidé n'a pas à remonter en haut de page pour acheter.

◈ Des pages déstructurées

Les pages éditoriales cassent volontairement la grille : images décalées, blocs qui se chevauchent, rythme irrégulier. Elles portent le discours de marque, quand les pages collection et produit restent lisibles et rapides.

◈ Une hiérarchie claire entre l'inspiration et l'achat

C'est le fil conducteur des six choix : l'audace graphique vit sur l'accueil et les pages de marque, la sobriété sur le tunnel d'achat. Le site peut ainsi être original sans coûter de ventes.

◎ De la maquette au thème Shopify, puis à l'autonomie

Les maquettes validées ont été intégrées dans un thème Shopify personnalisé. Le projet a été suivi de bout en bout par la même équipe, de la conception à la livraison, avec une étape souvent négligée : la prise en main de l'outil par la marque. Une DNVB vit de ses mises à jour, nouvelles pièces, nouveaux coloris, lookbooks. Elle doit pouvoir les publier seule, sans repasser par l'agence pour chaque fiche.

C'est ce que la cliente a retenu du projet dans l'avis qu'elle a laissé sur le Shopify Partners Directory, reproduit plus bas.

◎ Le site aujourd'hui : ce que nous avons constaté en ligne

Nous avons parcouru hemricourt.com pour vérifier ce qui tient, plusieurs années après la mise en ligne :

• le site tourne toujours sur Shopify, avec 72 pièces en ligne, des tops et tee-shirts aux vestes, de 39 à 479 € ;
• la marque a fait évoluer son offre, avec une sélection de cuir vintage et des bandanas en soie, sans changer de plateforme ;
• le site est proposé en français et en anglais, avec un affichage des prix dans de nombreuses devises ;
• la livraison passe par Mondial Relay en France et par DHL à l'international, avec un portail de retours en ligne et un guide des tailles sur les fiches ;
• la page « About » porte toujours le manifeste de l'uniforme, preuve que le positionnement défini au départ reste le socle de la marque.

Une marque qui garde la même plateforme et le même discours en élargissant son catalogue, c'est le signe d'une base bien posée.

◎ Les outils en place sur le site et ce qu'ils apportent

Voici les outils que nous avons relevés sur le site d'Hemricourt, avec les chiffres publiés par leurs éditeurs :

• Klaviyo, pour l'email marketing. Selon les benchmarks publiés par Klaviyo, les flows automatisés génèrent près de 41 % du revenu email avec seulement 5,3 % des envois, et un revenu par destinataire près de 18 fois supérieur à celui des campagnes. LobsTTer est partenaire Klaviyo, niveau Gold.
• Weglot, pour la version anglaise du site. Sa fiche sur le Shopify App Store annonce une traduction automatique dans plus de 110 langues, et une note de 4,5 sur 5.
• Shop Pay, le paiement accéléré de Shopify. Shopify indique que, par rapport au paiement en tant qu'invité, Shop Pay peut augmenter la conversion jusqu'à 50 %, et qu'il surpasse les autres paiements accélérés d'au moins 10 %.
• Mondial Relay, pour la livraison en France. Le transporteur revendique plus de 7 000 Points Relais et plus de 12 000 Lockers, avec un envoi dans 9 pays européens.

PayPal complète les moyens de paiement. Pour une marque mode, ce socle couvre l'essentiel : un paiement rapide sur mobile, une livraison peu chère en point relais, des retours simples et une relance automatisée par email.

◎ Ce que ce projet enseigne pour la création d'un site e-commerce mode

Sur plus de 500 sites créés, migrés ou refondus, nous retrouvons les mêmes leçons dans la mode. Le projet Hemricourt les illustre bien :

1. Partir du positionnement, pas du thème. La direction artistique se construit à partir de ce que la marque vend vraiment. Ici, une coupe et une palette.
2. Montrer le vêtement en grand. En mode, la photo est le produit. Le format des collections se décide avant le choix des couleurs du site.
3. Réserver l'audace aux bons endroits. Un site original convertit s'il reste simple là où la cliente achète : fiche produit, panier, paiement.
4. Penser la composition. Pastilles de couleur, produits complémentaires, looks : tout ce qui aide à assembler une tenue augmente le panier.
5. Rendre la marque autonome. Une boutique de mode se renouvelle sans cesse. Former l'équipe à Shopify fait partie du projet, pas du service après-vente.

Vous préparez la création ou la refonte du site de votre marque de vêtements ? Notre page dédiée détaille notre façon de travailler comme agence e-commerce mode sur Shopify, et notre offre de maquettes UX mobile et desktop décrit l'étape de conception.

◎ Questions fréquentes

« Très satisfait du travail effectué, avec Marion et Arthur, du suivi de projet , à la prise en main de l'outil jusqu'a la livraison. »

— Hemricourt, client LobsTTer · Shopify Partners Directory · 5/5

Voir le site du client : hemricourt.com.