Développement Webflow pour une chaîne de bars authentiques

Le projet Webflow Les BerThoM en paragraphes

Les BerThoM est une enseigne de bars à bière bien implanté en France (depuis 25 ans) avec à l'heure actuelle plus d'une quinzaine de bars répartis dans l'hexagone.

Mais avant tout, comme ils le disent si bien :

Les BerThoM c’est avant tout une histoire de relations humaines.

C'est aussi dans cette optique (humaniser l'expérience utilisateur) que les BerThoM ont souhaité avoir un nouveau site (une nouvelle identité digitale).

Après un changement de leur charte graphique, l'entreprise a voulu moderniser son site (anciennement sur wordpress).

Leur site ne leur convenait plus à cause :

• De problèmes techniques
• De problèmes d'arborescence (beaucoup de pages cachés et pas toutes utiles)
• Une technologie vieillissante

Les objectifs de la refonte sur Webflow étaient :

• Mettre plus en avant les différents bars
• Mettre en avant la partie recrutement
• Donner un nouvel élan à la marque avec un site qui plaît aux franchisés

Pour les BerThoM, les bars sont des lieux qui rassemblent, des endroits où on est libre de se retrouver dans une ambiance saine pour partager de bons moments.

Pour répondre à ces problématiques et ces besoins, nous avons agi en plusieurs étapes :

1 - Réflexion UX

En fonction des anciennes problématiques et des nouveaux besoins (étudiés dans la phase de Design Sprint) du client, nous avons proposé un wireframe sur Figma. Cette structure du site avant le design est très importante car elle permet de déterminer quelles pages vont avoir de l'importance et comment le tout va être développé ensuite dans Webflow.

2 - Design UI de la maquette sur Figma

Une fois l'UX validé, nous avons pu proposer une maquette qui reprenait les éléments graphiques fournis par les BerThoM avec des touches personnalisées pour créer un environnement unique.

Le but : se sentir aussi bien sur le site que si l'on était dans un bar les BerThoM.

3 - Développement Client-First dans Webflow

Lorsque la maquette a été validée, nous l'avons reproduit sur Webflow en utilisant les meilleures pratiques en matière de développement web. Nous avons développé le site selon la méthodologie Client-First.

De plus, nous nous sommes assurés que le site puisse être facilement éditable par les équipes des BerThoM pour les rendre autonomes. Le CMS de ce projet était assez lourd, mais la simplicité du mode éditeur et la détermination du client ont permis d'avoir un site complet.

4 - Optimisations SEO et automatisations

Tout au long du développement (et même dans la partie Design), nous avons réfléchi au mieux pour proposer un site qui puisse être visible sur les moteurs de recherche. Nous avons optimisé avec le client différentes parties techniques du site pour offrir une bonne visibilité en ligne.

Nous avons également paramétré des automatisations entre le site et différents outils (en utilisant Make) pour réduire un maximum les tâches fastidieuses et répétitives liées à la gestion du site web.

5 - Gestion du projet jusqu'à la mise en ligne

Pendant tout le projet, nous avons communiqué avec les équipes des BerThoM pour offrir un service / suivi client optimal.

Toute la phase de retours sur le design était directement gérée dans Figma et sur Markup pour les commentaires sur le site. Nous avons également utilisé loom pour répondre à des questions spécifiques et pour que le client puisse garder une trace de nos réponses / formations.

Le projet Webflow Les BerThoM en images