[Slideshare] ChallengeMyWebsite sur Slack- Compte rendu

1Copyright 2015 © La Fabrique du Net.
ChallengeMyWebsite en live sur Slack
25 Mai 2016

Contexte & déroulé
5 experts et le public décortiquent dans tous les sens 4 sites web, le temps de
courtes sessions de 30 minutes, en live sur la communauté Slack de La Fabrique du
Net, qui est ouverte à tous.
1. Alexandre Madonna – Technique (choix technos, Perf & bonnes pratiques front, ..)
2. Antoine Coubray – Stratégie / Identité (clarté proposition de valeur, argumentaire
client, ..)
3. Romain François Marsal – UX / UI (identité graphique, expérience utilisateur, qualité
design, ..)
4. Quentin Sureau – Conversion (performance du tunnel, tracking, ..)
5. Grégoire Vigneron – SEO (crawl, balisage, maillage,..)
CONCEPT
LES EXPERTS

Les projets sélectionnés & le déroulé
Pour cette première édition de ChallengeMyWebsite, nous avons sélectionné 4
projets.
 Winicar : Achat / Vente de véhicules d'occasion
 Poiscaille : Achat / Abonnement pour se faire livrer poisson frais
 InoxDesign : Ecommerce produits en inox (spécialisé sur les garde-corps)
 Welcome To The Jungle : Media / Plateforme de recrutement
Chaque session de challenging durait 30 minutes et était décomposée en deux phases :
1. Feedback des experts – Les 15 premières minutes consacrées aux feedbacks experts
2. Echanges ouverts – Les 15 minutes suivantes consacrées aux échanges avec le public
LES PROJETS SÉLECTIONNÉS
DÉROULÉ

Winicar est un service 100%
online d'achat et vente de
voitures d'occasion. Les
véhicules sont expertisés, le
paiement est sécurisé,
garantie et la livraison
s'effectue à domicile, autant
de services proposés pour
changer radicalement la façon
de consommer.
Date de lancement : fin 2015
Site web : winicar.fr
Fondateurs : Fabien Sécherre et
Sebastien Redon
Winicar
Présentation du projet

Choix des technologies
 Contrainte sur la fluidité de l’UX et minimisation du temps de chargement
 Choix intéressant du framework open source AngularJS
Mesure de la performance
 Pingdom tools : chargement rapide, bon nombre de requête exécutées.
 Google PageSpeed : score moyen pour la home et la liste véhicules (50-60), mauvais
pour une fiche véhicule (environ 10)
Recommandations
Optimisation des images, réduction de la taille des fichiers, mettre les images en cache
sur les fiches véhicules.
Winicar
Analyse Technique par Alexandre Madonna
Lire son analyse détaillée ici

Proposition de valeur
 Proposition de valeur affichée « Achetez et et vendez 100% en ligne », alors que plus
value du service est « On s’occupe de tout ! ».
 Promesse différenciante, innovante, vidéo longue, texte pas percutant.
Question clé
 Comment annoncer encore plus la simplicité ? Garantie de prise en charge à toutes les
étapes tend à être transcrite dans l’expérience globale d’utilisation du service.
 Proposer des options qui satisferont chaque utilisateur, sans trop d’informations.
Recommandations
 Mettre « Vendez ma voiture » au premier plan.
 Essayer une promesse d’optimisation de type « Vendez en 10 clics », différenciante et
préemptant la tranquillité d’esprit.
Winicar
Analyse Stratégie / Identité par Antoine Coubray

Analyse
 Site très sympa dans l’ensemble
 Rapide compréhension de l’offre et les tunnels d’achat / vente se font avec facilité
 Impossible d’avoir la main sur les fonctions du lecteur YouTube de la vidéo d’usage
 Manque d’unité graphique sur le site (harmoniser les marges)
 Placement du logo trop près du bord
Recommandations
 Mettre les partenaires plus bas dans la page
 La rubrique « Comment ça marche » peut être amenée plus tôt dans le parcours
utilisateur et énoncé plus simplement
 Espacer davantage les blocs pour faciliter la lecture
Winicar
Analyse UX / UI par le collectif design Yupeach

Analyse
 Formulaire : très bien, mais pas de précision sur le tarif d’une côte.
 Acheter : peu de filtres, segmentation trop légère.
 Fiche produit : mettre en avant le rapport d’analyse Winicar
 Paiement : très bien, peut être préciser ville du vendeur.
 Analytics : tracking propre. Pas d’évènements dans l’entonnoir acheteur
Recommandations
 Page d’accueil : séparer acheteurs des vendeurs
 Mettre plus en valeur le CTA « vendre », descendre la réassurance
 Mettre en avant « Acheter et vendre en ligne » en accueil
 Suggestion d’un sticky header, réduire bandeau témoignage
 Vendre : expliciter la gratuité de l’estimation dans le CTA vendeur
 Concept : résumer les 3 étapes plus efficacement, gratuité en avant
Winicar
Analyse conversion par Quentin Sureau

Analyse
 Secteur ancien, concurrentiel, difficile d’avoir de l’autorité sur les mots clés d’activité
 Probablement forte dépendance au SEA (gros budget + CPC élevé)
 Balise et méta description : duplication malgré la faible quantité de contenu (Inclure
dans le titre éléments dédupliquants, ex : le prix). Ordre d’apparition dans la balise title
(modèle en premier, Winicar dernier)
Recommandations
 Navigation / maillage interne : les critères principaux du moteur de recherche devraient
être navigables (listes par marque/modèle)
 Les concurrents ont beaucoup de liens externes. Travailler le linking
 Ancienneté et taille du catalogue sont à travailler progressivement
 Expérience utilisateur : page d’accueil trop lourde (diminuer les images) Attention aux
ouvertures de nouvel onglet quand on clique sur un lien
Winicar
Analyse SEO par Grégoire Vigneron

Les remarques du porteur de projet
 Fonction filtre pas encore poussée, car pas assez de véhicules.
 Affichage des voitures vendues pour rassurer les utilisateurs.
 Pour l’instant, focus sur l’Adwords.
Les remarques du public
 Concept intéressant, fonction filtre déstabilisante
 Difficulté de compréhension de l’offre du fait de choisir entre vendeur et acheteur
(taux de rebond élevé)
 Obtenir des backlincks des partenaires qui « parlent » de Winicar
 Bonne maîtrise d’adwords, tester Growth hack sur social media (copie de
communautés de concurrents, Twitter Ads en ciblant l’audience), analyser les
backlinks des concurrents (articles linkés, copier l’article en l’optimisant, puis le
proposer aux gros médias du secteur de relayer).
Winicar
Les échanges ouverts

Poiscaille est un service qui
propose aux Parisiens la
livraison de poisson frais, du
producteur jusqu'au
consommateur, en travaillant
uniquement avec des
pêcheurs ayant à cœur la
pêche durable.
Date de lancement : fin 2015
Site web : poiscaille.fr
Fondateurs : Charles Guirriec et
Guillaume Gréaud
Poiscaille

 Site PHP entièrement « fait maison »
 Temps de chargement assez moyen entre 1,5 et 3s.
 Google PageSpeed : score moyen pour l’ensemble des pages (60-75 en desktop)
Recommandations
 Plutôt opter pour un CMS open sources (déploiement, captivité vis-à-vis du
développeur, manque d’évolutivité fonctionnelle, sécurité).
 Optimiser la performance : utiliser la mise en cache navigateur des ressources
statiques, compression du fichier JS et CSS, des images
 Retravailler optimisation mobile : contenu cliquable, icônes médias sociaux se
superposent, erreur php lors du choix du lieu de retrait.
Poiscaille

 L’offre est clairement présentée dès la homepage.
 Contraintes logistiques liées au système de colis vs achat poissonnier
 Avantage de la livraison vs. poissonnier pas encore assez mis en avant
 Réponse aux « freins perçus » logistiquement présentés en FAQ
 Différenciation sur la qualité / traçabilité par rapport aux concurrents
 Logistique frein à la conversion, bénéfice de l’abonnement peu appuyé
Recommandations
 Mettre en avant l’aspect structurants de l’offre « Direct producteur », pour régler le
problème lié à la contrainte logistique
 Jouer sur le côté éthique : techniques de pêche dormantes, douces, etc.
 Insérer un onglet dédié aux questions logistiques
 Rassurer les prospects sur la logistique en appuyant la désirabilité
Poiscaille

Analyse
 Identité visuelle très sympa, on adore le nom
 Les onglets disparaissent en fonction des écrans
 Pas de lien cliquable sur le premier écran, cela donne un effet landing page
 Barre navigation : le clic sur les onglets renvoie en haut de page
 Largeur des images variable sur les autres pages
 Pas de fav icon (sur l’onglet du navigateur)
Recommandations
 Attention à être clair sur l’offre à la première lecture de la page, surtout au responsive
 Rendre visible visuellement / graphiquement les témoignages qui sont drôles
 Garder une unité visuelle
Poiscaille

Analyse
 Accueil : le header manque d’un CTA principal
 Le menu ne met pas en avant le bouton « commander »
 Commander : absence de données sur la la quantité de poisson reçu, ni sur le rapport
qualité prix, donc le positionnement de la plateforme
 Page Votre commande : plutôt jolie, on aurait envie d’éditer le contenu, passer sur un
abonnement
Recommandations
 Mettre en avant le bouton commander en accueil
 Afficher un exemple du contenu du dernier casier pour la réassurance
 Mettre en avant la recette associée au casier, élément clé du site
 Ré-expliquer les informations au cœur de l’entonnoir de conversion
 Page casier : inversion de la carte et du calendrier, car l’horaire dépend du lieu de
retrait.
Poiscaille

Analyse
 Belle idée sur un produit / concept de niche
 Probablement peu ou pas de mots clés de recherches ciblées
 Le trafic viendra de la marque, de la viralité et de la communication
 Duplication des balises title et meta descriptions : identiques pour toutes les pages
Recommandations
 Indexation : mettre en place un fichier robot.txt
 Faire une page par recette (au lieu de popins), avec une recherche, et en ajouter
régulièrement
 Journal de bord : retravailler techniquement (liens ne fonctionnent pas), essayer un
format de type blog (pour le développement et l’autorité en référencement)
Poiscaille

 L’abonnement est intéressant en termes de prix, pas d’autres avantages
 Il existe un popup avec un exemple de casier, mais il est peu visible
 Concept intéressant à mieux pousser pour se démarquer du poissonnier
 Pourquoi pas la livraison au travail ? En fournissant dans le casier les ingrédients pour
la recette de la semaine
 Absence de carte des points de ramassage
 Les témoignages en accueil sont décrédibilisant (privilégier les témoignages plus
factuels, une expérience vécue avec des émotions
 Proposition de valeur difficilement compréhensible
 Expliquer à l’utilisateur pourquoi le poisson n’est pas livré à domicile (qualité et délai)
Poiscaille

Inox Design est un site de
vente online dédié aux
produits en inox, spécialiste
de la conception de
rambardes et escalier en inox.
Inox Design propose
également des services
intéressants, que ce soit pour
la livraison, l’installation ou le
suivi de votre commande.
Date de lancement : 2010
Site web : inoxdesign.fr
Fondateurs : Francesco Vendola
Inox Design

 Site e-commerce construit avec le CMS Magento (bon choix étant donné le
positionnement et la taille du site)
 Fonctionnel, gestion des produit, communauté de développeurs
 Temps de chargement + indicateurs de performance bons pour les pages testées.
 On sent qu’un certain niveau d’optimisation technique est déjà atteint (dans une
logique SEO) : sous-domaines, CSS compressé.
Recommandations
 Travailler avec un développeur PHP (+ front) pour Magento.
 Optimiser les images sur les fiches produits, et en home pour le mobile
 Corriger les bugs liés au widget partage social
Inox Design

Offre de produits et proposition de valeur en home
 L’offre produit est annoncée dans le header mais l’offre de service est moins visible
Identité
 Une identité pragmatique, qui repose sur un savoir-faire tangible
 Pour être différenciant, il manque la définition d’une vision pour la marque
(positionnement en fonction des enjeux de la construction), ainsi qu’une mission (rôle
de la marque pour incarner sa vision).
 La réassurance vient renfoncer la confiance des clients.
Recommandations
 Combinaison entre produits et service, bien définie, pour appuyer une proposition de
valeur plus puissante et différenciante.
 Segmenter les éléments de réassurance (SAV/conception/configuration)
Inox Design

Analyse
 Le site est clair d’usage dans son ensemble
 Navigation par onglets et recherche de type classique, donc rassurant
 Manque de cohérence visuelle et identité maladroite, qui manque d’un partis pris plus
fort dans la hiérarchisation des éléments en landing page.
 Barre de recherche, visuels publicitaires et barre de garantie ont des identités
distinctes.
Recommandations
 Rendre l’ensemble des éléments cohérents visuellement, faire des choix de priorisation
en landing page
 Déplacer le contenu de la barre noire du haut de page, dans le footer en bas de page.
 Retravailler le problème du logo rogné lorsqu’on scroll la page
Inox Design

Analyse
 Page d’accueil : Trop d’information, hiérarchisation pas claire. Le bloc « nos réalisation »
pas assez en accord avec l’objectif de conversion.
 Faire devis en ligne : texte + vidéo surprenant, on s’attend à un formulaire
 Page catégorie : catégories directement présentées, mais on ne peut pas rechercher un
modèle par prix
 Page sous-catégorie : choix facile de segmentation grâce aux options.
 Paiement : entonnoir trop long, trop d’étapes intermédiaires.
Recommandations
 Inverser le cadre de présentation des produits et les trois blocs en home
 Placer un CTA vers les produits à la fin de la vidéo pour « Faire un devis »
 Produits visibles au dessus de la ligne de flottaison (sous-catégories)
 CTA « configuration produits », plutôt « Obtenir un prix sur mesure »
Inox Design

Analyse
 Visibilité et concurrence : pour les mots clés principaux, les têtes de résultat sont
trustés par des Adwords et Google Shopping
 Structure URL et navigation : les fiches produits sont à la racine du site, et non dans des
catégories (ou sous-catégories). Des duplications d’URLs.
 Keyword stuffing / spamming : la répétition excessive de mots clés sur une page à l’effet
inverse de celui attendu.
 Autorité / réputation : attention aux sites satellites, pénalisés par Google
Recommandations
 Même si bon travail en SEO, le SEA est indispensable pour la visibilité
 Créer catégories et sous-catégories, renvoyant à une liste des produits
 Passer au HTTPS pour la saisie d’informations personnelles
 Se focaliser sur l’unique but d’un site ecommerce : la transformation.
Inox Design

 La métrique utilisée (mètre) est perturbante, le total monte très vite
 Pas de numéro de téléphone sur le sticky header : maximiser les calls
 Mettre en place un chat live (type intercom) pour guider les utilisateurs
 Retravailler le wireframe pour mieux hiérarchiser les éléments et pourquoi pas créer
de nouvelles pages pour alléger la page d’accueil
 Page d’accueil avec beaucoup d’éléments n’est pas dérangeante, car la fonction du site
est d’associer beaucoup de produits mais à hiérarchiser).
 Donner un coup de jeune au logo et aux boutons réseaux sociaux
Inox Design

Fondé en 2014, Welcome To
The Jungle propose de
réconcilier candidats et
recruteurs. Sur son site web,
WTTJ promet de rendre la
recherche d'emploi plus
humaine en offrant la
possibilité aux entreprises de
se présenter sur leur site.
Date de lancement : début 2015
Site web : welcometothejungle.co
Fondateurs : Jérémy Clédat et
Bertrand Uzeel
Welcome To The Jungle

 Site moderne avec beaucoup d’images et d’animations, entièrement « fait maison »,
cohérence de Ruby on Rail
 Technologie Algolia : optimiser la vitesse d’affichage des recherches
 Temps de chargement + indicateurs de performance bons (peu de requêtes envoyées
et chargement en 1 seconde) selon Pingdom
 Google PageSpeed : notes bonnes en desktop (70-86), moins sur mobile
Recommandations
 Optimiser images, allonger durée d’expiration en cache des scripts js
 Corriger les bugs liés au widget partage social
 Restreindre l’utilisation du script instantsearch : que sur les pages utiles

 Média avec double promesse : aider les utilisateurs à comprendre les codes du marché
de l’emploi / les assister dans leur recherche avec un côté très humain (personnalité,
correspondance avec projet pro)
Expérience utilisateur
 Centralisation : grande transversalité des contenus entre eux.
 Recherche d’annonces : trop similaires aux sites de recherche d’emploi
Recommandations
 L’offre « Le guide de l’emploi » à revoir, rajouter dimension de sélection d’offres de
jobs : centralisation des services proposés par WTTJ
 L’apparence tribale, conviviale doit se traduire par une différenciation plus affirmée
dans la façon de chercher, postuler (regarder Kudoz)

Analyse
 On adore le design de la page, UX intuitive et l’univers super sympa
 Attention à quelques éléments qui se différencient de l’identité visuelle :
 Page article : la photo empiète sur la barre (alors que bon en home)
 Barre pour scroller disparaît à droite de la recherche
 Photo profil compagnie trop similaire à Facebook
 Compréhension pas évidente des termes de « jungle », et « tribu »
Recommandations
 Rendre l’ensemble des éléments cohérents visuellement, faire des choix de priorisation
en landing page
 Déplacer le contenu de la barre noire du haut de page, dans le footer
 Retravailler le problème du logo rogné lorsqu’on scroll la page
 Changer le gif de chargement

Analyse
 Page d’accueil : Terme de « tribu » surprenant, mais suffisamment contextualisé, bonne
visibilité du CTA
 Présentation des tribus : CTA postuler pas assez visible
 Le full width sur la fiche tribu perturbe la hiérarchisation des éléments
 Aucune collecte d’email possible
 La recherche par jobs, plutôt que par tribu, n’est pas mise en avant
Recommandations
 Dans une fiche, mettre plus en avant les derniers jobs, possibilité de postuler
directement avec un CTA « postuler » pour chaque job
 Avancer les éléments clés d’une fiche tribu
 Intéressant pour les clients d’avoir une sorte de « candidature spontanée » si
l’utilisateur ne trouve pas de job pour son profil.

Analyse
 Communication / contenu : choix de marque pas simple en SEO, secteur très
concurrentiel et donc difficile pour un nouvel entrant
 Difficile d’amener du trafic autrement que de l’accès direct / de marque
 Gros travail de communication de marque (réseaux sociaux, presse, etc.)
 Mots clés : « jungle » et « tribu » liés à la marque et non a la sémantique du secteur
Recommandations
 Trouver un équilibre en page d’accueil entre branding et mots clés du secteur (ex :
« offre » n’apparaît pas en accueil alors que tribu 6 fois)
 Avoir un rendu côté serveur navigable sur les principaux critères (maillage interne),
faciliter les liens externes vers les pages de listes.
 Site en français mais URLs en anglais
 Contenu sur les entreprises dupliqué sur les pages team et jobs

 Principe de base du site très « à la mode » car en rupture avec les SSII
 La recherche d’emploi ou d’entreprise par pays serait intéressante
 Mettre en place une segmentation des tribus qui recrutent ou pas
 Les filtres de la page entreprise n’aident pas forcément les jeunes diplômés à choisir la
bonne entreprise
 Instauration d’un live chat (ou un bot) pour guider l’utilisateur sur le site
 Correction prochainement de instantsearch, gif de chargement et de la barre de search
 Les candidatures spontanées sont possibles sur le site
 Gestion des candidatures via l’outil welcomekit.co

C’est l’endroit idéal pour tout porteur de projet web afin de :
 Demander des feedbacks / conseils sur votre projet web
 Trouver des channels thématiques (Webmarketing, Analytics,etc.)
La Fabrique du vous répond
L’équipe de la Fabrique du Net ainsi que l’ensemble des membres sera
ravie de vous apporter de l’aide, dans une ambiance détendue.
Invitez vos amis
La communauté est ouverte à tous, alors n’hésitez pas à inviter vos amis
depuis la page lafabriquedunet.fr/slack
La communauté Slack de la Fabrique du Net

La Fabrique du Net aide les porteurs de projets web à maitriser leur
sujet et à choisir les meilleurs outils / prestataires.
La Fabrique du Net = Centre de ressource + Marketplace
 Fiches pratiques
 Tests de logiciels
 Marketplace prestataires
Notre conviction
Il faut choisir un bon forgeron et de bons outils pour réussir son projet.
Quelques mots sur La Fabrique du Net

devotre projet web
Le meilleurallié
Téléphone +33(0) 1 84240234
E-mail contact@lafabriquedunet.fr
Web www.lafabriquedunet.fr
• I

[Slideshare] ChallengeMyWebsite sur Slack- Compte rendu

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to [Slideshare] ChallengeMyWebsite sur Slack- Compte rendu

Similar to [Slideshare] ChallengeMyWebsite sur Slack- Compte rendu (20)

[Slideshare] ChallengeMyWebsite sur Slack- Compte rendu