Veille & Benchmark Template Webflow 11.05.2023 .01 Contexte Le site Brainsonic Live est pris en otage. Pourtant censée dicter le pas pour les marques filles, la nouvelle identité de l’agence mère et son nouveau site tardent à voir le jour, empêchant ainsi une refonte indépendante de ces dernières. Le site web de Brainsonic Live (branche événementielle) vieilli visuellement et se retrouve délaissé. Pour pallier à l'obsolescence de ce canal de communication crucial pour la business unit, Mme Guilbert, Directrice Associée, propose de créer une landing page temporaire. L’idée étant de minimiser les coûts de production en utilisant le service de création de site no code, Webflow. Two Stops a été mandaté pour réaliser une veille accompagnée d’un benchmark afin de dénicher le meilleur template Webflow. .02 Déroulé de l’étude La première étape envisagée est de répertorier tous les templates proposés dans la marketplace qui répondent au besoin de l’agence. C’est l’étape de veille. Par la suite, un tri sera effectué selon des critères émis par le client (soumissions de références et de mots clés dans le brief initial) ainsi qu’après analyse des fonctionnalités proposées en nous focalisant sur les besoins de l’agence. .03 Critères de sélection et de comparaison Références clients Références positives ou neutres émises par le client : - https://www.magicgarden-agency.com/ (tout est bien) - https://www.moon-event.fr/ (temps de chargement sont tres longs) - https://win-win.com/fr (côté one page eset bien,mais trop fouilli) Références négatives : - https://www.shortcut.fr/ (Trop de scroll) Besoins ciblés Structure Préférence pour une page d'accueil qui regroupe la majorité des informations importantes. Architecture du site S’il est possible d’avoir d’autre pages, elles seront utilisée pour développer ce qui se dit dans la page d’accueil et se compose au minimum de : - Un home (accueil) - Une page des cases - Une page about - Une page contact Page Home Le template doit permettre de faire figurer dans la page d’accueil : - Une hero-section - Une galerie avec une sélection de cases (vers une autre page) - Un CTA pour découvrir l’agence (vers une autre page) - Une galerie de logo des clients de l’agence - Un formulaire de contact Page Cases La page doit permettre de donner accès à plusieurs cases de l’agence. Chaque case doit pouvoir contenir une vidéo , du texte explicatif, des images. Page contact La page doit non seulement permettre de contacter l’agence directement depuis le site (formulaire), mais aussi donner des liens et informations utiles (réseaux sociaux notamment) Fonctionnalités La navigation Pour naviguer sur le site, deux flux sont possibles. Le premier est de découvrir les liens depuis la page d’accueil en la parcourant et le second réside dans l’utilisation du menu/navbar. La navigation verticale (scroll) ne doit pas être pénible. Il faut donc limiter la hauteur des pages au maximum. Les médias Pour promouvoir les réalisations de l’agence, les médias visuels sont très importants. La première demande émise a même été de mettre un showreel vidéo en fond de la hero section. Ensuite, étant donné que des cases seront présentées, la possibilité de faire figurer une galerie/portfolio sur le site est primordial. Pour répondre à la problématique du scroll, cette dernière doit être sous forme de grille de préférence Le formulaire de contact Pas besoin d’en dire plus, tout est dans le titre. Le petit plus Brainsonic Live est une agence d’événementiel. L’expérience utilisateur (expérience participant dans l’événementiel) est primordial. Il faut donc un template qui sorte un peu des sites ordinaire, positivement. Cela peut se traduire par un design unique, des fonctionnalités spécifiques ou tout autre facteur X. .04 Système de notation Pour simplifier la notation, nous allons noter chaque sous-section sur 5 (forme d’étoile). Notation de la structure Pour la notation de la structure de chaque LP, le nombre d'étoiles octroyées fait référence à la concordance avec les éléments voulus par BS Live. Par exemple pour la homepage, une étoile est attribuée par la présence de chaque section demandée (hero, galerie, ... ). Ensuite la modulabilité est testée. Par ceci, nous entendons que si une section n’est pas présente dans la version initiale à l’endroit voulu, mais qu’elle est disponible dans une autre page et qu’il est possible de déplacer cette section, alors une étoile sera aussi attribuée. Par exemple, si une section “présentation de l’agence” n’est pas présente initialement dans la home page, mais qu’elle existe dans une autre page du template, et qu’il est possible de la ramener vers la home page, alors elle sera comptabilisée comme présenté et recevra une étoile. Notation des fonctionnalité Les fonctionnalités seront notées principalement en fonction de leur utilisabilité tant pour l’utilisateur final que pour l’intégrateur et les différents opérateurs qui publient du contenu sur le site (marketing, cp, dp etc ... ) Notation du design graphique Le critère principal qui sera retenu réside dans la capacité du site à accueillir la charte graphique de BS Live. Ce critère reste cependant secondaire compte tenu du fait que la pré-sélection a été faite en grande partie par rapport à cela. .05 Les templates sélectionnés Après une veille profonde sur les templates disponibles, nous avons retenu 5 templates qui présentent un réel potentiel quant à la capacité de répondre aux besoins de Brainsonic Live. Voici donc notre sélection, composé de 5 templates différents : OLSON https://olsson-template.webflow.io/ REWIND https://rewind-single-page.webflow.io/ CINEMAX https://cinemax-128.webflow.io/home-2 Alvy https://alvy-template.webflow.io/ Genesis https://genesis-template.webflow.io/ .06 Benchmark Nom du template Olson Rewind Cinemax Alvy Genesis URL https://olsson-templat e.webflow.io/ https://rewind-single-p age.webflow.io/ https://cinemax-128.w ebflow.io/home-2 https://alvy-template.w ebflow.io/ https://genesis-templat e.webflow.io/ Structure Architecture ★★★★ ★ Le template comprend toutes les pages attendues, sans nécessiter de modifications supplémentaires. Ce sera un réel gain de temps. ★★★☆ ☆ Rewind est un one page. TOUT est concentré sur la home. Ce choix de structure est peut-être pertinent pour une page temporaire ou une page qui servira pour des campagnes, mais si elle a vocation à remplacer un site vitrine, ce ne sera pas suffisant. Aussi, le site souffrira forcément d’un scroll horizontal ★★★★ ★ Structure parfaite, avec plusieurs choix de disposition. Rien à redire. Le fait que ce soit conçu en multipage rend peut-être certaines pages un peu vide mais c’est super au niveau du scroll ★★★★ ★ Template très complet qui répond dans la structure aux besoins de BS Live. ★★★★ ☆ Genesis est un one page + . Il répond assez bien aux demandes mais il nécessite qu’on adapte la page blog pour répondre au besoin de présenter les réalisations. On perd donc la fonctionnalité blog et on perd en efficacité. Le template tire son point fort sur sa capacité à limiter le scroll tout en étant une one page. long Nom du template Olson Rewind Cinemax Alvy Genesis URL Structure Home Page ★★★★ ★ La page home du template permet de remplir toutes les cases et malgré ces multiples sections, le scroll n’y est pas déplaisant est sa longueur est raisonnable. ★★★☆ ☆ Qui peut le plus, peut le moins. Le template rewind étant conçu pour être initialement un one page, sa page d’accueil est très fournie (trop). Le template coche toutes les cases demandées mais il sera nécessaire de dégraisser la page d’accueil pour limiter le scroll. Gros point noir sur le fait qu’elle ne propose pas d’autres ★★★★ ★ Cinemax octroie une sensation de simplicité et d’accessibilité qui ne lui porte pas défaut puisque les informations sont facilement accessibles. SI l’on devait résumer la page en 2 mots : pragmatisme & ergonomie ★★★★ ☆ Alvy propose une structure assez originale, proche d’un e-commerce ou saas plutôt qu’un site vitrine. Il présente cependant toutes les parties demandées par BS Live mis à part la section contact sur sa home qu’on peut récupérer sur la page du même ★★★★ ☆ Genesis coche toutes les cases de la page d’accueil mais étant donné qu’il s’agit d’un template one page, tout est à un seul endroit. On est limité notamment pour la présentation des cases puisqu’elle se fait via des vidéos avec un player youtube. Dans le cas de BS Live, comme les cases qui ont remporté des prix pages ... ont généralement une vidéo, ce n’est pas tant handicapant que ça.