Brainsonic Live - Veille Template Webflow -

Please enable JavaScript to view the full PDF

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 https://rewind-single-p https://cinemax-128.w https://alvy-template.w https://genesis-templat e.webflow.io/ age.webflow.io/ ebflow.io/home-2 ebflow.io/ e.webflow.io/ Structure Architecture ★★★★ ★★★☆ ★★★★ ★★★★ ★★★★ ★ ☆ ★ ★ ☆ Le template comprend Rewind est un one Structure parfaite, avec Template très complet Genesis est un one toutes les pages page. TOUT est plusieurs choix de qui répond dans la page + . Il répond assez attendues, sans concentré sur la home. disposition. Rien à structure aux besoins bien aux demandes nécessiter de Ce choix de structure redire. Le fait que ce de BS Live. mais il nécessite qu’on modifications est peut-être pertinent soit conçu en adapte la page blog supplémentaires. Ce pour une page multipage rend pour répondre au sera un réel gain de temporaire ou une peut-être certaines besoin de présenter les temps. page qui servira pour pages un peu vide mais réalisations. On perd des campagnes, mais si c’est super au niveau donc la fonctionnalité elle a vocation à du scroll blog et on perd en remplacer un site efficacité. Le template vitrine, ce ne sera pas tire son point fort sur suffisant. Aussi, le site sa capacité à limiter le souffrira forcément scroll tout en étant une d’un scroll horizontal one page. long Nom du template Olson Rewind Cinemax Alvy Genesis URL Structure Home Page ★★★★ ★★★☆ ★★★★ ★★★★ ★★★★ ★ ☆ ★ ☆ ☆ La page home du Qui peut le plus, peut Cinemax octroie une Alvy propose une Genesis coche toutes template permet de le moins. Le template sensation de simplicité structure assez les cases de la page remplir toutes les cases rewind étant conçu et d’accessibilité qui ne originale, proche d’un d’accueil mais étant et malgré ces multiples pour être initialement lui porte pas défaut e-commerce ou saas donné qu’il s’agit d’un sections, le scroll n’y un one page, sa page puisque les plutôt qu’un site template one page, est pas déplaisant est d’accueil est très informations sont vitrine. Il présente tout est à un seul sa longueur est fournie (trop). Le facilement accessibles. cependant toutes les endroit. On est limité raisonnable. template coche toutes SI l’on devait résumer parties demandées par notamment pour la les cases demandées la page en 2 mots : BS Live mis à part la présentation des cases mais il sera nécessaire pragmatisme & section contact sur sa puisqu’elle se fait via de dégraisser la page ergonomie home qu’on peut des vidéos avec un d’accueil pour limiter le récupérer sur la page player youtube. scroll. Gros point noir du même Dans le cas de BS Live, sur le fait qu’elle ne comme les cases qui propose pas d’autres ont remporté des prix pages… ont généralement une vidéo, ce n’est pas tant handicapant que ça.