Le mois de juillet a été riche en nouvelles analyses, et ce mois ci, ça ne sont pas moins de 5 sites qui sont passés sous la loupe de notre expert UX, Olivier Sauvage.
Dans cet article, on vous explique un peu mieux le concept de simplicité et d’esthétique et on vous invite à découvrir 5 sites ecommerce B2B inspirants.
La simplicité : grande gagnante des sites ecommerce B2B d’aujourd’hui
Faut-il encore le répéter ? La simplicité fait l’essence de la réussite d’un site ecommerce B2B. Être simple, facile à utiliser, ne pas bloquer les clients dans des parcours longs et demandant trop d’interactions, voilà le challenge des entreprises B2B aujourd’hui.
Mais qu’est-ce que la simplicité ? Comment la définir ? Et… la simplicité se voit-elle ?
Ce n’est pas parce qu’une interface est simple visuellement qu’elle est forcément simple à utiliser. Être simple en apparence encourage l’engagement, mais la simplicité visuelle peut dissimuler une complexité d’utilisation de par sa trop grande simplicité, justement !
Autrement dit : il ne faut pas juger la simplicité sur son apparence, mais bien sur la manière dont les utilisateurs d’un site interagissent avec ce site. Et si les utilisateurs sont satisfaits, ont l’impression d’avoir atteint leurs objectifs rapidement et simplement, c’est gagné !
C’est pourquoi chez Wexperience, nous ne mettons jamais en avant nos maquettes de sites, mais bien nos méthodes d’analyse et de conception qui sont les véritables garanties de la simplicité.
Comment mesure-t-on la simplicité chez Wexperience ?
Pour toutes nos études, nous utilisons une échelle UXM. C’est un questionnaire que nous avons créé et qui nous permet de mesurer l’UX sur 4 dimensions.
Lors d’un test utilisateur, par exemple, chaque testeur répond à l’UXM. Ses réponses sont stockées en base, puis agrégées avec les autres réponses afin d’obtenir une moyenne. C’est cela qui nous permet de définir la simplicité d’une interface.
Pour certains projets, nous faisons jusqu’à 3 UXM afin de pouvoir comparer les évolutions de l’UX d’un site ou d’une app suite à nos recommandations.
Le design, un facteur d’engagement
En B2B, l’habitude de se préoccuper d’apparence visuelle a souvent été rejetée au profit de la technique. Or, aujourd’hui avec les nouvelles habitudes des acheteurs, l’esthétique d’une interface compte de plus en plus.
Fini les vilains sites où les catégories et les produits s’empilent comme dans un catalogue de pièces détachées automobile. Les acheteurs veulent des expériences ! Et ils ont besoin d’être séduits !
Même si la fidélité est plus grande en B2B qu’en B2C, il ne faut pas négliger l’aspect séduction. La concurrence n’est souvent qu’à un clic de souris, et parfois, les choses tiennent à la confiance que peut inspirer un site.
Or, cette confiance est véhiculée par l’apparence graphique. Un beau site inspirera plus sûrement confiance qu’un site désigné comme les pages jaunes de l’annuaire (👉 voir nos réfs).
Il faut donc changer de paradigme et accepter que, désormais, les sites de B2B soient aussi beaux que les sites de B2C.
Voici 5 sites que nous avons sélectionné pour leur design, mais aussi leur expérience.
Berlin Packaging : le n°1 mondial du packaging place la barre très haut
Berlin packaging est un des leaders mondiaux des récipients pour l’industrie et la grande distribution. Son site est une réelle réussite esthétique tant au niveau de la navigation et du confort d’utilisation.
Blake Envelopes : le roi britannique de l’enveloppe durable fait dans l’esthétiquement correct
Blake Envelopes est une PME britannique familiale qui vend, comme son nom l’indique, des enveloppes en gros avec une dimension développement durable forte. Son site rassemble les qualités d’une navigation de type B2C avec un réel succès.
Chocomize est une petite PME de fabrication de chocolats. Elle vend ses produits directement à de grandes entreprises. Un joli site qui donne envie d’être très très gourmand.
Shoprelevant : expérience simplifiée pour un équipementier dans l’industrie du pétrole
Relevant est une grosse PME texane qui fournit l’industrie gazière et pétrolière. La refonte récente de son site a été fait dans l’optique de proposer des services en ligne simple à utiliser à ses clients.
De plus en plus d’entreprises B2B investissent dans le design d’expérience et leur identité de marque. Non seulement pour se détacher de leur concurrence, mais aussi pour répondre à la demande croissante de leurs clients d’expériences simples, de facilité et de rapidité.
RAJA, c’est le leader européen de la vente de carton d’emballage et de matériel de bureau en France et en Europe. Créée en 1954, cette entreprise a connu une forte accélération dans les années 2020 pour atteindre un chiffre d’affaires en ligne de plus de 1 milliards d’euros.
Comment RAJA est parvenu à maintenir la cohésion au sein de ses multiples filiales ?
Quelle technologie a-t-elle employé ?
Comment a-t-elle géré sa croissance en transformant son organisation ?
A toute ces questions, Antoine Laffond, Head of Digital et Ecommerce, a répondu lors d’un passionnant webinar organisé par la plateforme de ecommerce B2B Intershop, le 18 juin 2024.
Raja, en résumé
[slide-anything id= »42684″]
Une entreprise à la longévité incomparable
Une entreprise vieille de 70 ans fondée par 2 femmes en 1954, Rachelle Markovic et Janine Rocher, d’où le nom RAJA, le deux premières lettres des préonomes des fondatrices.
Stratégie multicanale dès les premiers jours avec le premier catalogue de vente par correspondance en 1976.
Acquisitions multiples à partir des années 90 : en Belgique, aux Pays-Bas, en Allemagne et en Europe du Sud.
Premier site de commerce électronique dans les années 2000 avec la mise en place d’un modèle commun de ecommerce pour toutes les filiales.
Raja sort de l’emballage
Grand tournant en 2019 avec l’acquisition de Staples, Top Office, Bernard et Kalamazoo. Raja sort de l’emballage et doit donc adapter son modèle à des nouveaux produits.
En 2021 acquisition de Viking et Office Depot dans 7 pays. Le CA en ligne atteint plus de 1 milliard d’euros.
Chaque année, chaque client reçoit un catalogue. La relation client est locale, les forces de vente sont locales.
En 2022, 1,12 milliard de CA en ecommerce, soit 65% du CA du groupe. CA du Web a doublé en 3 ans. Neuf client sur 10 deviennent des clients en ligne.
Le choix d’Intershop
Pour accompagner une telle croissance, il a fallu adopter une plateforme souple, très évolutive, capable d’accueillir de nombreux modèles. Ce fut Intershop (dont Wexperience est partenaire).
En 2017, face à montée du mobile, création d’une app. Puis, rapidement pour des raisons de coûts de maintenance, passage à un site responsive. Et pendant la même période, création d’une Digital Factory, une équipe indépendante gérant tous les ecommerce.
Développeurs, chef de projets, designers, etc ont été rassemblés au même endroit. L’idée de la Digital Factory était d’être le meilleur ami du marketing.
La gros défi qui a suivi a été de convaincre toutes les filiales d’avoir un modèle et une marque unique. Cela a pris 12 mois. 12 mois pendant lesquels un CA de 300 millions a été migré sur une plateforme centrale. Cela représente 18 entreprises.
Durant la même période, accélération sur l’e-procurement. Seulement deux personnes y travaillaient en 2018, mais il a fallu accélérer pour s’adapter aux grand comptes.
Une organisation qui fait toute la différence
La Digital Factory n’appartient pas à l’informatique, mais à la division commerciale.
Autonomie pour créer des fonctionnalités qui ont de la valeur. Les équipes techniques se trouvent donc à l’intérieur de l’organisation de la Digital Factory.
Best-of-breed. Agnostique quand aux solutions et ouvert à toutes les solutions.
Souplesse
La Digital Factory est très souple et s’adapte en permanence à la stratégie globale de l’entreprise. Au moins deux fois par an.
Organisation souple et résiliente.
En 12 mois, par exemple, la Digital Factory été capable d’intégrer l’offre bureau. 30 nouvelles fonctionnalités ont été ajoutés. Et ces 30 nouvelles fonctionnalités ont immédiatement été disponibles pour toutes les entreprises du groupe.
Indépendance et écoute des parties prenantes
Feuille de route alignée sur le COMEX, mais aussi sur toutes les parties prenantes. Le clients sont également très écoutés. Et la feuille de route est révisée tous les 3 mois.
Beaucoup de CRO, le responsable CRO siège au centre de l’équipe de l’Usine Digital. Raja a créé une verticale qui travaille sur Google Analytics, mais aussi Content Square. Et cela lui permet de construire les meilleurs parcours clients en supprimant les frictions basées sur des données qualitatives et quantitatives.
L’UX également est très important.
Personnalisation
La personnalisation est un must-have lorsque vous savez que 80% du taux de conversion est augmenté dès que vous avez une expérience personnalisée en ligne.
Raja a commencé avec 3 ou 4 segmentations en ligne, puis a ajouté des dizaines de segments, en utilisant les fonctionnalités de segmentation d’Intershop. L’idée est de toujours faire des segments qui puissent être déployés dans les 18 autres filiales.
Personnalisation également en fonction des type de trafic. Grosse croissance du trafic payant. Donc, approche désormais très ROISTE.
On est encore en janvier, j’ai donc encore le droit d’écrire un autre article sur les tendances 2022. Et là, il se trouve que je suis tombé sur un article américain qui faisait sa liste des tendances à venir… et dans lequel sauta à mes yeux un mot assez étrange dont je n’avais jamais entendu parler : le scrollytelling. Bon, vous imaginez bien qu’il est assez facile de deviner ce qu’il veut dire, mais… ma curiosité a été titillée et j’ai trouvé le sujet parfaitement en phase avez le webinaire que je ferai la semaine prochaine sur le sujet l’UX Writing.
Quel rapport, me direz-vous ?
Eh bien, figurez-vous, qu’il y en a un, de rapport… et pas qu’un petit… et un rapport qui devrait vous intéresser si vous avez envie de savoir comment vous pourriez, en ces temps de télétravail et de pseudo-confinement, comment vous pourriez, peut-être, grâce au scrollytelling, réinventer la manière dont vous faites du ecommerce (rien que ça !)… ou, tout du moins, utiliser un nouveau pour transformer vos visiteurs en clients.
Alors comment ?
Sans doute (et aussi très malheureusement), la plus belle expérience de scrollytelling. Le compte-rendu de l’explosion de Beyrouth par le New York Times.
1) Nous avons toujours besoin qu’on nous raconte des histoires.
Pourquoi avons-nous besoin qu’on nous raconte des histoires ? Parce que c’est un des moyens les plus puissants pour capter l’attention et convaincre sans donner l’impression de vouloir convaincre. Les histoires ne font pas appel à notre rationnalité, mais viennent entrer en résonance avec notre moi le plus profond, et peuvent évoquer à chacun des nous des moments forts, agréables, en rapport avec notre existence personnelle. Et plus vous arrivez à toucher la fibre personnelle des gens, plus vous arrivez à entrer en affinité avec eux.
N’est-ce pas ce que toutes les marques cherchent ? Créer un lien personnel unique avec chacun d’entre nous, tout en nous faisant rêver et croire qu’en achetant leurs produits nous serons plus heureux, car nous vivrons de nouvelles histoires avec ce produit.
L’utilisation de ce mécanisme, inutile de vous le rappeler, n’est pas nouveau, mais le numérique lui a donné une nouvelle dimension, en offrant de nouvelles et de multiples possibilités narratives. Et le filon a déjà été exploité bien des fois, mais pourquoi alors en reparler maintenant ?
Autre exemple pour la série Narcos sur le Wall Street Journal
2) Le scrollytelling : c’est dans les vieux pots que…
Le scrollytelling n’est pas une nouveauté et remonte on pourrait le dire presque à aussi loin que l’histoire du Web (ou presque). En anglais, le scrollytelling, vous l’avez deviné par vous même, vient de la contraction des mots scroll et telling et fait allusion au storytelling, mot que tout le monde connaît et comprend, même en français. Le mot scroll vient rajouter une dimension interactive au mot storytelling, et signifie tout simplement que le storytelling se fait en scrollant une page web.
De nombreux sites de marque l’utilisent, mais aussi des médias, comme le New York Times ou le Wall Street Journal. Mais l’exemple le plus connu, et sans doute l’inspirateur de nombreux site est celui d’Apple. Chaque page produit du site y est transformé en petite expérience interactive destinée à transcender la marque et le produit. Et le moins que l’on puisse dire, comme toujours, chez Apple, c’est que c’est toujours aussi fascinant ! Et que l’expérience vécue sur le site n’est que la promesse en avant-vente de la même expérience avec les produits de la marque. Ce qui est, avouez-le, plus que malin.
Mais sans doute mieux encore, c’est que tout cela est pensé comme un élément particulier de la marque appartenant à un tout cohérent. L’esprit du scrollytelling chez Apple est le même qui préside celui de l’expérience d’unboxing qui a tant fait pour sa réputation. Autrement dit, la clé de l’expérience et du storytelling d’Apple ne se trouve pas dans l’équipe de design web, mais bien plus haut, en amont, dans l’ADN de marque. Et cette clé est appliquée savamment et irréprochablement dans chaque expérience fournie par Apple à ses prospects et à ses clients.
Apple n’a peut-être pas inventé le scrollytelling, mais sa manière de mettre en scène ses produits revient à raconter une histoire, même sans texte ! Un peu comme un spectacle de mime 🙂
3) Pourquoi un comeback du scrollytelling en 2022 ?
Mais si tout cela n’est pas nouveau, qu’est-ce qui a changé pour que l’on reparle en 2022 du scrollytelling ?
La réponse réside dans la première partie du mot : le scroll, cette manière habituelle de dérouler une page, dont la popularité n’a fait que s’accentuer depuis la sortie des premiers smartphones et qui est devenue très probablement l’interaction la plus utilisée du Web. Très utilisée par les réseaux sociaux, elle est connue pour son pouvoir d’engagement et est même contestée par de nombreux adversaires de l’addiction au numérique.
Mais c’est en 2021 que l’on a compris à quel point le scrolling était devenu un incontournable du Web.
Un fait, un seul suffit à comprendre pourquoi.
C’est cette année là que Tiktok a dépassé en trafic Google.
Et quelle est la manière principale d’interagir avec Tiktok ?
Vous avez bien deviné…
Autrement dit, nous sommes des centaines de millions, et nous serons bientôt des milliards à interagir de plus en plus sur le Web en scrollant. Le scroll est plus qu’un geste, c’est le symptôme de notre addiction au numérique. Et j’ai bien l’impression qu’on est pas prêt de s’en débarrasser.
Vous n’êtes pas convaincu ?
Encore un fait.
L’usage du mobile.
Quoiqu’on en pense, le mobile est en train de devenir à travers le monde le terminal le plus employé pour surfer sur le Web. Et plus nous surfons sur le web avec des mobiles, plus nous scrollons.
Le fabricant de vélo Van Moof maîtrise parfaitement les arcanes du scrollytelling produit.
4) Comment faire du scrollytelling ?
Devez-vous vous mettre au scrollytelling ?
J’ai la ferme conviction qu’il y a vraiment une opportunité à prendre en proposant de nouvelles expériences de shopping.
Vous me direz : chaque année, c’est la même chose. On me parle de nouvelles expériences : réalité augmentée, réalité virtuelle voice commerce, mais, dans le fond, rien ne change.
Et vous n’auriez pas tout à fait tort de me le dire.
Globalement, les interfaces de ecommerce, depuis des années n’offrent pas grand chose de nouveau et se contentent toutes, la plupart du temps, de reproduire le même modèle.
Oui, c’est vrai. Et le moins que l’on puisse dire, c’est que cela a toujours été efficace. Le ecommerce ne fait que croître depuis 20 ans, et il semblerait que cette croissance ne soit pas prêt de s’arrêter, surtout depuis qu’une malheureux virus nous en a fait voir de bien belles et que nos chers concitoyens ont passé plus de temps derrière leurs écrans que jamais. Et la tendance n’est sûrement pas prête de s’arrêter.
Mais maintenant que je vous l’ai dit, qu’il existe de belles opportunités pour offrir de nouvelles expériences… faut-il vraiment me croire ? Faut-il vraiment tenter de créer de nouvelles expériences en adéquation avec les nouveaux usages du moment ?
Sans doute oui, pour plusieurs raisons.
Scrollytelling de marque : le sujet n’est pas le produit, mais le positionnement de marque. On peu
5 raisons qui devraient vous pousser à faire du scrollytelling
1) La première tout simplement est que les utilisateurs sont toujours à la recherche de nouvelles expériences.
Surprenez-les ! Émeuvez-les ! Épatez-les ! Il en restera toujours quelque chose.
Nous savons tous que l’émotion est un puissant vecteur d’engagement et de mémorisation. Et que si vous arrivez à créer des expériences innovantes, vous renforcerez votre affinité de marque avec vos utilisateurs.
2) La deuxième est que les jeunes générations seront les consommateurs de demain et que ce demain va arriver très vite. Qu’on se rappelle Tiktok ! Il y a deux ans, personne n’imaginait y mettre un pied pour vendre des produits et des services. Et pourtant aujourd’hui, toutes les marques y sont. Et toutes les marques ont intérêts à se préparer aux nouvelles habitudes de leurs futurs utilisateurs. Dans combien de temps ? Le plus vite possible comme toujours, mais certainement pas dans 10 ans.
3) La troisième est que les marques ont intérêt à nouer de nouvelles relations avec leurs clients et prospects. Même si le shopping utilitaire existera toujours, la part se fera de plus en plus belle ceux qui sauront offrir des expériences plus élaborées que la simple fiche produit du réfrigérateur, de la perceuse ou bien du collant à 3€ les 10. Il ne s’agit pas de faire du scrollytelling pour toute votre offre, mais de cibler plutôt les produits les plus fédérateurs, les plus emblématiques, ceux qui pourront vous permettre de vous différencier de la concurrence et d’affirmer votre positionnement.
4) La quatrième est que les outils de création de page interactive sont de plus en plus efficaces et réduisent notablement le coût de production de ces pages, rendant presque possible l’industrialisation du scrollytelling. Certes, il sera toujours plus cher de faire une page animé avec des effets au survol et de la parallaxe plus qu’une page Web, mais la généralisation de framework js spécialisés dans les animations, le perfectionnement des outils de design, font qu’il sera plus facile et plus abordable de produire ces nouveaux types de contenus.
5) La dernière est que la prime sera toujours aux innovateurs, aux premiers arrivés, à ceux qui auront un coup d’avance, comme toujours. Et croyez-moi, il y a certainement beaucoup faire dans ce domaine comme dans beaucoup d’autres.
Toujours dans le vélo, le concurrent de VanMoof, le belge Cowboy, propose une expérience très interactive qui permet d’apprécier comme en vrai son produit phare.
5) Mes conseils pour devenir un scrollytelleur de la mort
Vous vous rappelez qu’en début d’article je vous parlais d’UX Writing et qu’il y avait un fort rapport entre UX Writing et Scrollytelling ? Eh bien maintenant, je vais vous dire pourquoi (sauf si vous êtes un malin et que vous avez déjà lu le livre de Gladys Diandoki, UX Writing) et comment l’UX Writing est la clé du Scrollytelling.
Contrairement à ce que sa traduction littérale laisse sous-entendre, l’UX writing n’est pas l’art d’écrire des textes centré utilisateur. En tout cas, ça n’est pas que ça. Et comme l’explique Gladys dans son livre, l’UX writing a plus à voir avec le design de contenus qu’avec l’art et la manière d’écrire des libellés de bouton.
L’UX writing, on ne le nommait pas comme cela à une époque lointaine, c’est la capacité à créer des contenus et à les agencer afin de créer des expériences captivantes et engageantes. L’UX Writing, c’est le nerf du storytelling, et donc, du scrollytelling. Car sans UX Writer (ou sans concepteur-rédacteur, son nom en français), pas de scrollytelling.
Raconter une histoire ne s’improvise pas. Il y faut de la psychologie, du bagou, une certaine capacité à savoir créer de l’émotion, de la surprise. Bref, on est plus proche de l’art du cinéma que de celui de l’UX designer ou du marketer.
Et sans cette capacité à s’emparer d’un produit et à le raconter de manière originale, difficile de créer des expériences en scrollant.
Encore du scrollytelling de marque, avec les fameux bonbons Pez. C’est presque trop simpliste, mais ça marche. En quelques secondes, vous savez tout de PEZ et pouvez aller déguster tranquillement vos bonbons.
Alors comment faire ?
1 – Choisissez votre sujet
Posez-vous dans un coin, reposez-vous, prenez votre offre, et demandez-vous à quel moment vous auriez besoin de raconter une histoire à vos clients. Qu’est-ce qui dans votre offre mériterait d’être mis en avant et vous permettrait de vous singulariser par rapport à vos clients ?
Si vous vendez des stylos, quels stylos méritent que l’on s’y attarde un peu… lesquels tranchent par leur qualité de fabrication, leur design, l’histoire de leur fabricant.
Si vous vendez de l’alimentaire, quels produits méritent que l’on braque un projecteur sur eux… racontent quelque chose de nouveau à vos clients, ont un secret de fabrication mystérieux, ou simplement suggèrent une ambiance, un mode de vie, une histoire, etc…
Les possibilités sont infinies et vous ne devez qu’à votre connaissance de votre offre pour en extirper ce qui peut vous rendre un peu plus original que les autres.
2 – Brainstormez
Faites brainstormer vos storytellers. Pas de mystère, là, il vous faut des spécialistes, des gens qui sont capables d’inventer une scénographie, une histoire autour d’un seul et même objet… En réalité, il y a de fortes chances pour qu’il s’agisse de plusieurs personnes en même temps : quelqu’un du marketing, adossé à un concepteur-rédacteur, adossé à un motion-designer, adossé à un directeur artistique. Bref, rassemblez-vous pour essayer de comprendre comment vous pourriez donner une âme à ce produit que vous aimez tant. Mon conseil : écrire d’abord l’histoire, voire même : la raconter à haute voix et l’enregistrer.
Ensuite, commencez à produire des roughs, comme au cinéma, sur du papier. Tentez déjà à ce stade de voir comment pourrait se dérouler votre histoire… quelles interactions pourraient se produire (décrivez-les sur vos storyboards). Partagez cela entre vous et choisissez deux de vos meilleurs scenarios pour passer à l’étape suivante.
3 – Prototypez
Maquettez, prototypez ! Facile à dire, pas si facile que cela à faire. Vos experts doivent avoir les outils qui permettent de prototyper plusieurs types d’interaction rapidement (comme Racontr ou Principle), par exemple. A ce stade déjà, il ne sera pas inutile de se faire accompagner par un développeur frontend qui pourra commencer à estimer la charge en développement, lever les alertes sur la faisabilité du projet, réfléchir également l’impact carbone de tout cela, à sa performance, mais aussi à son accessibilité. Vos prototypes ne doivent pas forcément être aboutis graphiquement (vous perdriez pas mal de temps à faire cela), mais doivent déjà contenir vos textes finaux (que vous pourrez toujours retravailler en fonction de vos tests) et vos médias finaux. Ne vous préoccupez pas d’avoir les interactions parfaites… essayez d’approcher le produit final. Le but est surtout à ce stade de pouvoir présenter votre projet à des utilisateurs néophytes et à récolter les insights qui feront de celui-ci la parfaite scrolly histoire.
4 – Testez !
On commence à rentrer là dans un processus classique du design. Votre prototype peut être testé en ligne ou en présentiel, cela dépend de vos moyens et du temps dont vous disposez. A un certain stade avoir un regard extérieur est indispensable et permettra d’affiner votre proposition. Choisissez cinq ou si utilisateurs, présentez leur le projet et enregistrez leur réactions. Posez leur des questions sur ce qu’ils ont compris.
Evaluez leur satisfaction à l’aide d’un questionnaire d’utilisabilité comme un Attrakdif ou un SUS.
5 – Développez !
On passe à la phase finale. Votre design, créé en parallèle de vos expérimentations, devrait être finalisé et pouvoir être appliqué à votre code. Et si vous n’avez pas les développeurs pour faire tout ça, Wexperience les a pour vous 🙂 N’hésitez pas à nous parler de vos projets en ce sens. Enfin, optimisez votre code. Ça n’est pas parce que c’est beau et envoûtant que ça doit être lourd et consommateur d’énergie. Faites un bon travail en ce sens pour donner encore plus de succès à votre histoire.
Un très beau travail graphique de la marque Crazy About Eggs. On a envie de se faire une omelette.
6) Conclusion
Pourquoi ai-je donc bien pris la peine d’écrire autant de mots sur le scrollytelling ?
Le Web n’offre pas tant de possibilités que ça de créer de la nouveauté et de la surprise. La plupart du temps, les budgets ne permettent pas de se lancer dans des fantaisies assez onéreuses, dont le retour sur investissement n’est pas directement mesurable. Or, le scrollytelling fait partie de cette catégorie de produits numériques. Et, la plupart du temps, seules des grandes marques peuvent se le permettre.
Certes.
Mais d’un autre côté, comment ne pas se dire que, parfois, il faut savoir tenter des expériences, renouveler sa manière de vendre, prendre le risque de découvrir quelque chose de nouveau. Cela peut peut-être un échec, mais, n’oubliez pas, un échec est toujours plein d’enseignements. Et c’est peut-être aussi cela que vous devez aller chercher. De l’innovation !
Et pour finir ce tour sur le scrollytelling, deux magnifiques exemples. Un pour une compagnie aurifère…
Cette semaine, je vous propose une sélection de sites inédite et plus ou moins originale ^^
Vous en avez tous chez vous, plus ou moins doux, molletonné et parfois avec une senteur. Alors imaginez un site exclusivement dédié à ce produit… Une idée ? Il s’agit du papier toilette, plus communément appelé « PQ ». Alors vous vous dîtes (et à juste titre) un site exclusivement dédié au PQ, pourquoi faire ? Je vous laisse découvrir les avantages liés à ce bien si précieux avec ces 4 super sites :
Commençons par Hey Bippy. Un site qui se définit comme “une ligne de produits de soins personnels modernes destinée exclusivement aux fesses et dont la mission est de préserver les forêts de fond en comble.”.
La homepage est à la fois fun et dynamique, avec une belle photo en full screen et quelques emojis assez bien utilisés pour le coup 💩🍑. La page « about » est simple et efficace tout comme la page blog qui propose des petits articles faciles à lire. Le petit plus : des gifs drôles à retrouver tout au long de la navigation.
Hello Tushy est dirigé par une équipe qui souhaite transformer « les gens en amoureux du bidet”. C’est pourquoi, dès votre arrivée sur le site, vous découvrez une image assez « marrante » pour ne pas dire bizarre, de personnes surfant sur un jet d’eau… fermez les yeux et essayez d’imaginer cette scène ou cliquez ici 🌊
La page liste est claire et très bien faite. J’ai personnellement adoré le wording « Every spray to your bootyhole will transport you to a relaxing spa experience in the comfort of your own bathroom » les termes utilisés et surtout le stop-motion d’utilisation qu’on retrouve sur la fiche produit.
Bref, un site avec une navigation bien simple que j’ai apprécié. J’ai presque envie de me l’acheter ce petit jet !
Go n°2 est un site qui a pour nom, une référence britannique utilisée par les enfants pour signifier « faire la grosse commission ». Une expression assez ingénieuse pour ne pas faire jurer ces bambins. Et puis, ils sont trop jeunes pour utiliser des mots techniques comme « déféquer » voyons !
Même si on parle de PQ, l’image de marque est plus « luxueuse » que celle des sites précédents. Le produit est présenté avec une petite touche d’humour dans un emballage design et bien quali.
Un doute sur les quantités à commander ? Un quizz assez fun et interactif est à votre disposition pour savoir combien de rouleaux il vous faut. Et si vous n’avez pas de doutes, vous pouvez choisir le nombre de cartons ou simplement le nombre de rouleaux qu’il vous faut 🙂
4 – Peach Goods
Il semble que tous les aspects de la vie moderne aient été examinés, optimisés et mis au point. Alors, pourquoi est-ce que nos moments les plus privés reçoivent si peu d’attention !? C’est pourquoi, Peach Goods propose un papier hygiénique doux et durable qui est fabriqué en Amérique à partir de fibre vierge, sans aucun produit chimique en vue. Le résultat est un produit biologique, 100% durable, 100% bons pour nos derrières !
Le site est encore plus épuré que ceux vus précédemment, minimaliste, à l’image de la marque. On retrouve sur Peach Goods, un système de concierge très sympa et permet d’ajuster les dates de livraison, les lieux et la taille des commandes en fonction des besoins.
🧻 Conclusion
Vous remarquerez que je n’ai pas parlé du checkout. Tout simplement parce que, même si ces sites semblent différents, ils disposent tous du même template de checkout avec une colonne de formulaire et une colonne d’informations récapitulatives. Il s’agit d’une mise en page qui tend à se normaliser sur desktop avec un formulaire et une partie récapitulatif clairs et basiques.
L’utilisateur a donc cette possibilité de changer facilement ses infos d’une étape à l’autre. Par défaut, il est proposé d’utiliser la même adresse livraison/facturation ou de changer pour une adresse différente au niveau de la dernière étape (paiement), et ça c’est cool !
La rentrée est déjà bien loin et le soleil aussi (et oui, il fait parfois gris dans le nord ;-). Mais qui dit soleil dit musique et qui dit musique dit forcément… Festivals ! Alors pour vous replonger dans cette fabuleuse saison ensoleillé, nous vous avons préparé une petite sélection de nos best sites entièrement dédiée aux festivals.
Øya Festival est le plus grand festival de la capital Norvégienne, Oslo. Mais parlons un peu du site. Avec un style assez dynamique et coloré, le site est assez surprenant pour un festival.
Le haut de page vous annonce la couleur d’un festival à la programmation assez branchée. Le menu ainsi que les dates du festival sont des éléments sticky et donc toujours visibles par l’utilisateur. La date fait également office de CTA et permet aux festivaliers de prendre leur billets directement en cliquant dessus. Les textes, quant à eux, sont bien lisibles grâce à l’interlignage et une typographie étendue. Un visuel de chaque artistes est visible dès la page d’accueil, au hover de leur nom. Et pour vous plonger dans l’ambiance, il vous suffit de vous rendre sur les fiches de présentation de chacun où vous pouvez écouter leurs musiques directement via spotify.
Festival à Paris, le We Love Green est organisé au bois de Vincennes et veut allier musique et respect de l’environnement. Et ça se voit tout au long de la navigation sur le site avec des paragraphes assez courts, un design assez aéré. Même si l’image prend le pas sur le texte lorsqu’on scroll, arrêtez-vous sur l’une d’elles et vous verrez le texte réapparaître sous l’image. Tout comme sur le site Øya Festival, les dates sont toujours visibles en sticky sur la gauche.
Notons que le site est disponible en anglais et en français ce qui permet un rayonnement de l’événement à l’international. Les partenaires sont visibles, rangés par catégorie et vous pouvez visiter chacun de leurs sites en un clic.
Sortons un tout petit peu de l’univers musicale et parlons d’un festival qui s’intéresse à la culture numérique : le Kikk Festival ! Cet événement se déroulera à Namur (salut les voisins Belges 🍟🍺) le 19 Novembre prochain et promet une belle programmation. Il y a énormément de choses à voir : de l’art, de la musique et surtout beaucoup de chose interactive et de nouveautés sur les dernières technologies.
Parlons du site maintenant (et pour cela nous vous conseillons de branchez vos écouteurs avant de vous rendre sur le site, histoire de ne pas déranger Charlie 😉):
Le site Kikk festival nous plonge directement dans l’ambiance avec un son ambiant de vent frais qui s’estompe dès qu’on scroll sur la page. Le style de site est en cohérence avec l’univers de l’évènement, dynamique et très créatif. Les dates, le lieu et le CTA d’achat de billets sont facilement visibles une fois sur le site. C’est clair, net et précis, tout comme les informations concernant le nombre de speakers, de visiteurs, de workshops et de démos.
Le switch « Kids Friendly » sur le calendrier est également une très bonne idée ! Le calendrier est présenté sous forme d’un vrai calendrier, sur desktop en tout cas. Et c’est là notre petite déception, la version mobile et moins engageante que la version desktop. Mais en tout cas les informations restent assez claires et compréhensibles.
Après des vacances bien méritées, la team Wex revient pour une nouvelle série d’articles sur le thème de l’UX ! Et pour bien commencer, voici une sélection de 3 sites qui nous ont marqué de par leur design et leur originalité.
1 – PENAROSA
Capture d’écran de l’écran de la personnalisation du site https://www.penarosawatches.com/
Commençons ce top 3 tant attendu par Penarosa. Ce site, d’origine italienne, est un site e-commerce de vente de montres pour femmes. Son point fort ? Outre ses photos qui permettent une belle mise en avant des produits, on y trouve surtout – et avec un avant goût dès l’arrivée sur la page d’accueil – une personnalisation 360° des produits ! En résumé : on se retrouve plongé dans une expérience immersive et interactive !
2 – COLLAGE
Capture d’écran du site https://collagecrafting.com/fr/
Continuons notre tour des meilleurs sites du moment avec Collage ! Le concept : une fabrique manuelle, des « produits originaux et uniques » (accessoires décoratifs, bijoux, etc…). Bref, on vous laisse y faire un tour ! 😉
En plus d’un design assez épuré, son principal atout se trouve dans les interactions qu’il génère : que ce soit sur le catalogue produits, sur la page d’accueil ou même dans le menu,… on a accès, sur ce site, à des petites animations sympathiques qui captent l’attention des utilisateurs. Attention toutefois à ne pas trop surcharger la page car cela risquerait de diminuer le temps de chargement de votre page et donc d’agacer vos utilisateurs mais aussi, parce qu’on en viendrait presque à s’intéresser plus au site lui-même qu’aux produits.
Cet article vous est présenté par Wexperience, l’agence d’ergonomie digitale. Pour en savoir plus sur nos prestations, cliquez ici
3 – CALEM
Capture d’écran du site https://calem.pt/
Pour terminer notre sélection (qui fût en réalité un véritable dilemme cornélien), nous vous présentons Calem. Calem est un site de vente en ligne de vin (l’abus d’alcool est dangereux pour la santé).
Ce site est un véritable coup de coeur design pour nous, et notamment grâce à l’expérience qu’il procure lors du scroll (cf la capture que nous en avons fait) : c’est-à-dire aux images des produits et aux petites animations qui apparaissent de temps à autre sur l’écran.
Nous espérons que cette sélection vous a plu ! N’hésitez pas à nous contacter si vous avez d’autres ressources à nous partager. Bonne rentrée 😉
Aider les utilisateurs à faire une tâche en proposant une expérience unique. C’est ce que les sites tentent de faire en utilisant l’UX. Nous revenons cette semaine sur trois sites qui ont attiré notre attention en terme d’expérience unique.
Gymbox
Gymbox est un vrai concept où vous trouverez une salle de sport qui ressemble à une boîte de nuit, où sont subtilement mélangés de la musique live et des cours de fitness. D’ailleurs l’entreprise se présente comme « l’antidote aux salles de sport ennuyeuses ». Et c’est tout ce positionnement affirmé qui nous a marqué sur le site.
Si vous vous rendez en Angleterre et que vous souhaitez tester cette salle, rendez-vous sur le site et appuyez sur « Book a Tour ». Une fenêtre s’ouvre pour vous proposer de remplir un champ à fois. Cette segmentation en six étapes permet de conserver l’attention de l’utilisateur.
La version mobile conserve l’émotion de celle desktop. Mais sur mobile, l’action principale (« book a tour ») n’est pas mise en avant, elle est au même niveau que le reste dans le burger menu, ce qui est dommage.
Erable du Québec
Après l’effort, le réconfort ! Alors avec Érable du Québec découvrez comment cuisiner les produits d’érable du Québec 100 % purs grâce à leurs trucs et astuces et recettes.
Sur le site, l’entreprise vous transporte dès le début avec de très grandes photos, vidéos et animations de recette à base de sirop d’érable, de beurre d’érable et autres produits. On vient clairement jouer sur les émotions de l’utilisateur pour créer une véritable expérience de navigation qui met l’eau à la bouche.
Tillamook
Du fromage…. Tillamook vous propose des sauces au fromage pour pouvoir accompagner vos plats.
En une page, le site vous donne faim : il vous suffit de scroller pour découvrir une première animation recette qui évolue au fur et à mesure du scrolle. Le seul hic, c’est que cette animation est très lourde est rend le site un peu lent. Une image ou une vidéo en full screen suffirait pour avoir la même émotion.
N’hésitez pas à nous suggérer vos best sites via notre compte twitter @Wexperience !
Construire un site, c’est une chose. Construire une véritable expérience utilisateur unique c’est autre chose.
Nous revenons aujourd’hui avec cette sélection d’interface attrayante où l’expérience est intuitive et fluide.
Casamance
Entreprise de l’année 2000, Casamance propose des collections de tissus et papier peint au style chic et intemporel. Ce n’est pas qu’une simple marque : c’est aussi un groupe. Camengo, Casamance et Misia proposent aux utilisateurs prés de 4000 références tissus et 1000 références de papier peint et revêtement mural.
En naviguant sur le site, on retrouve une touche très design avec une interface subtile et élégante. Ce qui nous a le plus marqué : le moteur de recherche produits. Il est simple et efficace avec la possibilité de rentrer le nom d’une couleur en mot-clef pour trouver les motifs correspondants.
Wed’ze
Cette semaine, nous avons aussi fait dans le national avec la marque de ski, snowboard et luge de Decathlon : Wed’ze.
Nous avons découvert que cette marque possède un site lookbook pour mettre en avant la nouvelle collection de la marque de sports d’hiver du groupe. Immersion réussie dans l’univers de la marque par les couleurs utilisées. Notons aussi que l’utilisation de la modélisation 3d dans ce site web vient renforcer l’image technique des articles de sport. Passez jeter un coup d’oeil avant de partir au ski : ça donne envie !
Grovemade
Des coques de téléphone, des plateaux pour ordinateur, des pots… Grovemade regroupe des produits de bureaux, des montres, des portefeuilles à base de cuir, de bois et de feutre.
Les photos sont irréprochables et les vidéos du process de fabrication permettent une immersion dans l’univers sobre du designer d’accessoires technologique en bois. Le vrai atout du site se trouve dans les pages produits:
de petites animations « mode d’emploi » pour rendre l’information ludique
des spécifications techniques très détaillées pour des produits haut de gamme.
Autres choses assez plaisantes, le parcours de checkout est optimisé ce qui le rend agréable.
La plupart des sites se ressemblent. Enfin, c’est l’impression que les utilisateurs ont en naviguant. Mais l’important n’est pas le style du site : c’est l’expérience vécue qui peut vous permettre de vous différencier.
Pour bien commencer l’année, les équipes Wexperience vous ont préparé une sélection de sites offrant une expérience utilisateur unique.
Duroc
Âgées de 25 ans, l’entreprise Duroc est spécialisée dans les tomates cerise. Mais nous ne sommes pas là pour parler grappes et couleurs de tomates. Non, nous sommes ici pour parler du site. Le site est haut en couleur et en animations ce qui est assez sympas, dynamique. Les différents visuels sont inspirés de la mode : on ne considère pas le produit comme un aliment banal mais on le magnifie au point de le rendre précieux (comme un bijou). Le site fonctionne beaucoup mieux sur mobile : les animations ont été restreintes et le drag and drop permet une navigation fluide et simple. Ce qui donne d’avantage envie de lire le contenu. Si le but a été d’en mettre plein la vue, c’est réussi !
Hardgraft
Fondée en 2007, l’entreprise Hardgraft propose aux utilisateurs des accessoires : des étuis, des petites maroquineries, des sacs de voyage, des chaussures et des vêtements. Tous fabriqués en Italie. Sur le site, la simplicité est mise en avant avec une seule page-list : le style est minimaliste pour mettre en avant le travail des artisans. Tous les produits tiennent sur la page d’accueil, ce qui permet d’avoir directement une vue d’ensemble. Depuis cette seule page, il est possible d’ajouter un produit directement dans votre panier ou en cliquant dessus, il est possible d’avoir le descriptif du produit. Sur cette fiche produit, nous découvrons des photos de mise en situation et une petite histoire. Ce qui donne un peu de vie !
Abelodor
Abelodor est un site de vente de parfum naturel : les ingrédients composants le parfum vont évoluer au fil de la journée pour créer une fragrance unique. A défaut de pouvoir sentir leurs parfums, le site nous plonge dans une ambiance musicale sobre et chic. Accompagnée de piano et de personnes qui discutent, nous nous imaginons facilement à une soirée chic au bord de la mer. La sensation des odeurs vient ensuite. On se projette dans des notes de parfums naturels, raffinés mais aussi déconstruites intensifié par l’effet de parallaxe au scroll. Le site reste simple dans ses couleurs et sa composition :
Le blanc et bleu fonctionnent bien ensemble
Le mélange visuels-produits et visuels-ambiance au sein page produit.
Le passage en responsive se fait facilement. Les textes sont lisibles et les animations restent minimes ce qui ne perturbent ni l’attention, ni la navigation.
Ce que les utilisateurs cherchent réellement, c’est une information utile. Ils apprécient les sites sur lesquels il y a assez d’informations pour qu’ils puissent prendre une décision. Seulement voilà l’information brute ne suffit plus et les visuels et animations deviennent indispensables et se caractérisent comme de véritable vecteur de conversion. À nouveau, les équipes Wexperience vous ont concocté une sélection de sites offrant une expérience utilisateur bien intéressante :
Simply Chocolate
Simply Chocolate est une entreprise Danoise qui associe au chocolat des ingrédients naturels tels que les noix, les céréales et les baies. Ce site e-commerce s’inspire du style de vie et de la gourmandise de ses clients en y ajoutant une touche d’humour. À chaque scroll, l’utilisateur DÉCOUVRIRA une nouvelle barre de chocolat au centre accompagné D’ANIMATIONS ET d’un call to action. Il n’y a pas d’arborescence, mais uniquement une page ce qui rend la navigation très efficace. Simply Chocolate ne compte que peu de produit mais suggère beaucoup d’émotions via les éléments graphiques et animations qui gravitent autour des barres. Petite frustration à la fin : l’achat n’est disponible qu’à partir de 18 barres de chocolat.
Hunter
Hunter est une marque britannique, réputée pour ses bottes Original envoyées dans une boite noire. On comprend alors vite qu’il ne s’agit pas d’une simple paire de bottes en caoutchouc, mais de bien plus. Depuis 1856, la marque a su évoluer tout en conservant son identité : un héritage british, une attitude trendy et cosmopolite. Le site est assez minimaliste et permet une mise en avant du shooting produit : la marque souhaite mettre en avant la robustesse et la qualité du produit. Les pages produits sont épurées contrairement à celles concurrentes. Le panier est simple d’utilisation et bien rapideo. Un clic sur le call to action “Ajouter au panier” et un layer s’ouvre sur la droite. C’est ensuite à l’utilisateur de choisir entre continuer ses achats via une belle disposition du cross selling ou d’entrer directement dans le process de checkout.
Polaroid Originals
Polaroid Originals est la nouvelle marque de Polaroid. La marque revient avec un nouvel appareil photo analogique instantané : le Polaroid OneStep 2, qui inaugure une nouvelle génération de photographie analogique instantanée. Alors quoi de mieux que les couleurs flashy et de la simplicité pour leurs ecommerce ? Polaroid joue assez bien sur les émotions en évoquant la nostalgie des années 80 :
Utilisation cadre blanc, typique polaroid,
Hover images
Shooting travaillé old school.
Le site est principalement centré sur l’idée d’offrir un cadeau. Comme sur le site de la marque Hunter, le panier ou le fait de mettre le produit dans son panierest simple d’utilisation : on y retrouve un layer panier efficace pour visualiser les produits mis au panier. Voilà, c’était notre sélection de la semaine. Si vous en avez d’autres n’hésitez pas à nous les partager 😉
