Sept leçons apprises de la conception d’un site ecommerce en web responsive
Il y a quelques semaines, nous avons découvert avec joie la sortie du premier site responsive e-commerce : Lot18.com, un site new-yorkais de ventes privées de vin. Passé inaperçu en France, ce lancement a été suivi (quelques jours après) de la publication sur le site du magazine .Net d’un super article de Vince Allen, senior développeur front-end chez Lot18, faisant un super retour d’expérience sur le projet de refonte du site Lot18.com en web responsive: il y explique pourquoi il pense qu’il s’agit du développement de demain. La phrase-clé ? « Ce qui est bon pour le développeur n’est pas nécessairement bon pour le client. »
J’ai donc demandé à Vince et Oliver Lindberg (Editeur du Magazine .Net) l’autorisation de traduire ici cet article, ce qu’ils ont accepté et je les en remercie.
Lot18.com en bref :
Au lancement du site en 2010, ses fondateurs ont levé plus de 45 millions de dollars. La société, qui a démarré avec 6 employés, en comptait plus de 90 fin 2011. Le site regroupe plus de 600 000 membres et comptabilise plus de 700 000 bouteilles de vin vendues aux USA.
«
Bien qu’il puisse être passionnant de travailler dans une entreprise e-commerce en plein essor comme Lot18, notre ferveur a été tempérée il y a quelques mois lorsque l’équipe de développement a été confrontée à un choix :
1. Continuer à construire sur le socle actuel du site, qui n’a jamais été destiné à être utilisé pendant plus de quelques mois après le lancement de l’activité.
2. Construire une plate-forme de toute nouvelle génération qui pourrait durer des années.
Nous avons opté pour ce dernier choix, malgré un délai très court : trois mois et demi.
Nous savions aussi que nos visiteurs accédaient à Lot18 de façons de plus en plus diverses en termes de devices et que cette tendance allait se développer. Plutôt que d’anticiper les préférences de nos utilisateurs, nous avons développé un site « souple » qui s’adapte naturellement à un large éventail de devices connectés au web. Bref, la conception d’un site responsive était au cœur de notre stratégie de développement, mais il nous a obligé à penser comme nous n’avions jamais eu à le faire lors de nos précédentes missions de développement.
Voici sept choses que nous avons apprises durant la construction d’un site web responsive dans un court laps de temps.
1. Combien de sites peut-on construire?
Le côté positif quand on est développeur, c’est qu’il y a toujours un autre système d’exploitation, navigateur ou périphériques auquel il faut s’adapter, bref on ne manque jamais de travail ! Mais la construction d’une version ou d’une application, l’une après l’autre, n’est pas viable dans une petite entreprise. Développer, tester et déployer une base de code unique simplifie presque toutes les étapes dans le processus. Quand le temps presse et que la fatigue se fait ressentir, vous pouvez vous focaliser sur un objectif unique – sans distraction.
2. Le business est le plus important
La saison des fêtes est la plus importante en e-commerce, d’autant plus pour les sites spécialisés dans l’alimentaire et le vin comme Lot18. Avec des milliers de clients qui planifient fêtes et achats de cadeaux, nous ne pouvions pas envisager que nos clients seraient tous assis derrière un bureau ou, à l’inverse, prendraient le temps de rechercher une application, la télécharger et l’utiliser. En effet, cette hypothèse était tout aussi dangereuse que celle qui aurait consisté à penser que n’importe quel client utiliserait le même device pour chaque visite sur le site, ou que tout ami invité par un utilisateur du site aurait un device similaire. Adopter une approche responsive privilégie le business et réoriente notre pensée comme une équipe de développement. Nous sommes plus près de l’expérience client et non pas uniquement concentrés sur nos propres horaires et plannings.
3. Arrêtez de courir après les plateformes et construisez de nouvelles fonctionnalités
En nous libérant de la recherche de plateformes, nous avons consacré plus de temps à la construction des fonctionnalités pour le nouveau site. Par exemple, nous avons revu notre tunnel de commande et nous avons pu nous concentrer sur une seule stratégie UI/UX (Interface Utilisateur/Expérience Utilisateur) sans se soucier de constructions spécifiques à l’appareil. En allant ainsi de l’avant, l’équipe de développement sera plus concentrée sur les fonctionnalités et plus efficace.
4. Tout le monde recette
Dans une petite entreprise, tout le monde est occupé et personne n’a le temps de naviguer sur la nouvelle version du site pour aider à trouver des bugs ou des complications imprévues. Mais nous avons rencontré une conséquence agréable au développement d’un site responsive : tout le monde pouvait tester le site sur leur propre temps !
Si certains collaborateurs voulaient tester ou tout simplement consulter le site en cours de développement, ils pouvaient utiliser leurs téléphones au cours de leurs déplacements ou leurs tablettes, ou même leurs téléviseurs à la maison. Encore mieux, ce type de test permet à chacun de mieux appréhender la façon dont nos membres vont utiliser le site.
5. Soyez cohérent entre les applications natives et le web mobile
Lot18 publiera prochainement une application et, comme c’est le cas la plupart du temps, elle a été conçue pour l’iPhone. Cependant, même les mobinautes les plus addicts d’applications navigueront sur le site en y accédant via un e-mail, Twitter, Facebook, etc. Le site fournit une réponse cohérente entre les expériences Web native et mobile, et renforce l’expérience de marque globale.
6. Explorez de nouvelles interactions
Avant le lancement, nous avons observé un nouveau comportement chez les personnes qui avaient pu tester le nouveau site. Dès qu’ils comprenaient que le site s’adaptait à l’écran, ils commençaient à jouer avec lui. Le responsive ajoute une dimension à l’expérience et offre un regard neuf, les utilisateurs jonglent d’un périphérique à un autre – ou d’un mode de l’appareil à l’autre.
Il s’agit d’une réaction émotionnelle que l’on pourrait traduire par «c’est amusant » et c’est toujours une bonne chose.
7. Vous obtiendrez des analyses fiables
Enfin, lorsque l’on compare les statistiques, il est bon de savoir que les utilisateurs arrivent sur le même code, le même site et donc interagissent avec le même contenu. Nous avons également ouvert de nouvelles perspectives sur la manière dont les utilisateurs se comportent, et nous voyons déjà des évolutions positives dans nos statistiques.
Pour nous, la meilleure chose concernant ce lancement est qu’il n’y a plus qu’un « unique » Lot18.com. Désormais il y a UNE expérience Lot18 pour chaque visiteur, quel que soit le device utilisé. Au final, notre équipe de développement est plus proche de l’activité de l’entreprise et peut agir un peu comme une extension du département relation client, en fournissant une meilleure expérience de commerce en ligne … ce qui ne peut pas être mauvais dans le secteur du e-commerce hautement concurrentiel !
»
Un super article de Vince Allen que je vous invite à suivre @vinceallen
Tout comme le site www.netmagazine.com
Pour ceux qui voudraient en savoir plus sur le responsive, une super conférence de Stéphane LECOUTURIER en français : qui vous permettra probablement de clarifier votre vision du mobile en 60 minutes de démêlage de l’univers bouillonnant du cross-devices.
Et pour les Lyonnais, vous avez de la chance … cette conférence est reprogrammée à Lyon le 15 Mars 2012 au MAC, inscription ici .
WhichTestWon Testing Awards 2012
WhichTestWon.com, hebdomadaire consacré à l’évangélisation des tests A/B et multivariés, organise pour la deuxième année consécutive les Testing Awards.
Lancé en 2009, le site réunit les professionnels de l’optimisation du monde entier qui y partagent les résultats de campagnes de test qu’ils ont mené. 176 cas sont actuellement disponibles et chaque semaine de nouveaux cas sont ajoutés. Chaque année, un jury est réuni pour récompenser les meilleurs tests de l’année dans plusieurs catégories avec des participants tels que Dell, Infiniti, Avis, Urban Outfitters, DHL …
La cérémonie se déroulera demain à 19h (Vendredi 18 février 2012) et sera diffusé sur Internet via un Live Webcast gratuit. Les inscriptions sont limitées à 1000 personnes et il reste encore des places :
Nous sommes particulièrement impatient car l’année dernière nous avions participé et remporter deux Awards : un Gold Award avec Jules.com et un Silver Award avec Cofidis.fr. Cette année nous avons donc présenté quelques nouveaux tests …
Conférence à Roubaix : « TRANSFO, Comment l’augmenter sans tout révolutionner ? », le 23 février
Venez découvrir comment vous pouvez améliorer la conversion de votre site tout en échappant aux contraintes de la vraie vie (disponibilité des équipes, processus de décisions, contraintes techniques…) ?
Au programme de cette conférence de 60 minutes animée par Thomas TONDER (Directeur Design & Optimisation) le 23 Février 2012 :
- Une démarche d’optimisation compatible avec la vraie vie : Flip the iceberg!
- Une solution pour libérer l’action : Testing A/B ou MVT
- Des cas concrets et chiffrés
- Des réponses à vos nombreuses questions
Nombre de places limité. Inscription avant le vendredi 17 février 2012
Cofidis Belgique optimise son formulaire
Après un premier test mené sur l’ensemble du site et un second sur les fiches produits, un troisième test est lancé sur le formulaire de demande de crédit en ligne. L’objectif est simple : continuer à optimiser le taux de conversion !
Le défi ?
« Suite à nos précédentes campagnes d’optimisation sur le site et les pages produits, je souhaiterais améliorer le taux de conversion du formulaire de demande en ligne. », Nicolas NAZE, Responsable web
Le formulaire permet d’effectuer une demande de souscription à un produit financier en ligne. Cette demande fait ensuite l’objet d’une acceptation ou d’un refus. Il est donc primordial de contrôler la qualité des leads générés pour s’assurer de la performance des évolutions.
Notre réalisation
Quatre versions sont ainsi lancées dans une campagne de test A/B face à la version originale du formulaire de souscription. Leur design est adapté au reste du site, modifié suite aux précédentes campagnes. L’accent est mis sur les éléments d’incitation, l’accompagnement du visiteur dans la saisie des champs et la rassurance (récapitulatif de la demande de financement, règles de confidentialité des données personnelles et module de web-call-back). Le header (avec navigation ou non) et la position du récapitulatif de demande (à gauche ou à droite) sont les deux éléments différenciant les 4 versions.
Le résultat
La version gagnante se démarque par une amélioration de la conversion de plus de 43%. L’analyse détaillée des leads générés via la version gagnante indique un taux d’acceptation iso à la version originale.
Comme à l’issue du premier test, un différentiel est présent entre les prospects francophones et flamands. La version gagnante est celle présentant le meilleur résultat combiné sur les deux cibles.
Les slides de la conférence « TRANSFO, Comment l’augmenter sans tout révolutionner ? »
Nordistes et belges ne vous sentez pas frustrés, nous avons programmé la conférence le 23 février à 9h à La Piscinede Roubaix !
Découvrez comment vous pouvez améliorer la conversion de votre site tout en échappant aux contraintes de la vraie vie (disponibilité des équipes, processus de décisions, contraintes techniques…).
Au programme :
- Une démarche d’optimisation compatible avec la vraie vie : Flip the iceberg!
- Une solution pour libérer l’action : Testing A/B ou MVT
- Des cas concrets et chiffrés d’optimisation de fiche produit, landing, checkout…
- Des réponses à vos nombreuses questions
Vous pouvez vous inscrire dès maintenant ici : http://www.altima.fr/upload/rendez-vous-a-la-piscine/rendez-vous-a-la-piscine.html
Vertbaudet optimise sa fiche produit
Depuis plus d’un an, nous accompagnons Vertbaudet sur l’optimisation de son site de vente en ligne Vertbaudet.fr. Voici un cas d’étude relatif à la campagne de test menée sur la fiche produit en début d’année.
Le défi ?
« Le lancement de notre nouvelle fiche produit ne présente pas les résultats attendus et nous avons dû revenir à l’ancienne version. Peut-on améliorer cette nouvelle fiche produit pour gagner en conversion et panier moyen ? », Chrysoline DEPREZ, Responsable web.
Les enjeux nécessitent de sécuriser le changement en mesurant précisément l’évolution des principaux indicateurs business entre la version originale et la nouvelle fiche produit «améliorée».
Notre réalisation
Une campagne de test A/B est lancée sur la fiche produit prêt-à-porter afin de déterminer la structure optimale pour ce template clé. La version mise en compétition face à l’originale est plus simple : les informations superflues sont supprimées et les informations secondaires sont mises en retrait. Cet axe d’optimisation permet d’accentuer la séduction et la valorisation des éléments clés (visuel et descriptif produit plus grand, impact du call-to-action, …).
Le résultat
La version gagnante se démarque par une amélioration de la conversion de plus de 8%, une très faible baisse du panier moyen, pour un impact sur la valeur du visiteur proche aussi de 8%.
L’analyse détaillée permet d’isoler deux profils de visiteurs : les nouveaux et les anciens. L’impact des optimisations étant très important sur les nouveaux, à l’inverse des anciens.
Lèche-Vitrines, le merchandising visuel dans la mode
Découverte du week end : le livre Lèche-Vitrine de Françoise Sackrider, Gwenola Guidé, et Dominique Hervé.
Cet ouvrage est à priori le premier du genre en France spécifiquement consacré aux principes fondamentaux du merchandising visuel dans la mode. Il déroule les techniques et outils du merchandising visuel, évoquant au passage l’évolution de la distribution comme les différentes tendances en termes d’architecture et de concept magasins.
Paru en 2003, il a fait l’objet d’une seconde édition « actualisée » en 2008 qui prolonge l’analyse du paysage de la distribution et les réflexions sur l’évolution d’un des métiers les plus en développement et en mutation du secteur de la mode.
Editions IFM (Institut Français de la Mode) / Editions du Regard
ClubMed optimise son booking engine
Nous accompagnons actuellement Club Med sur l’optimisation de leurs sites de réservation en ligne. Voici un cas d’étude relatif à notre première campagne d’optimisation
Le défi ?
« Améliorer la conversion du tunnel de réservation et extraire des enseignements sur le comportement des clients pour guider les futures évolutions du site », Jérôme HIQUET – Directeur Internet & CRM.
Le tunnel de réservation est décliné dans 40 pays avec des contextes marketing très différents. Il est composé de 7 étapes et doté d’un code HTML en «tableaux». Les enjeux business sont très importants et il y a une petite fenêtre de tir pour lancer la campagne en période estivale. Il est impossible de modifier le contenu des pages et le code de l’application.
Notre réalisation
Nous avons conçu une version optimisée du processus de réservation construite autour de 3 partis pris : augmenter l’incitation, clarifier la lecture et réduire la distraction. Afin de challenger différentes hypothèses nous l’avons décliné en 8 variantes (ex : avec ou sans menu de navigation). Les 8 variantes ont été mises en oeuvre uniquement à travers des fichiers CSS et JS (aucune modification du code du site) et ont été testées au travers d’une campagne MVT de 6 semaines menée en parallèle dans différents pays.
Le résultat
La version gagnante apporte une amélioration de plus de 15% de la conversion et une légère amélioration du panier moyen. C’est la même version qui gagne dans tous les pays même si on constate des niveaux d’uplift contrastés. Les résultats ont pu être décortiqués pour extraire des enseignements précieux pour la suite du projet (ex : nouveaux vs anciens clients, par pays…). Le ROI a été immédiat puisque les revenus additionnels des 6 semaines de test ont dépassé l’investissement réalisé pour cette mission.
