.webp)
The Webflow project Les BerThoM en paragraphes
Les BerThoM is a brand of beer bars well established in France (for 25 years) with currently more than fifteen bars spread throughout the country.
But above all, as they say so well:
BerThoM is above all a story of human relationships.
It is also with this in mind (humanizing the user experience) that BerThoM wanted to have a new site (a new digital identity).
After a change of their graphic charter, the company wanted to modernize its site (formerly on wordpress).
Their site was no longer suitable for them because :
- Technical problems
- Tree structure problems (many hidden pages and not all useful)
- Aging technology
The objectives of the redesign on Webflow were:
- Put more emphasis on the different bars
- Highlighting the recruitment part
- Revitalize the brand with a site that franchisees love
For BerThoM, bars are places that bring people together, places where they are free to meet in a healthy atmosphere to share good times.
To address these issues and needs, we acted in several steps:
1 - UX reflection
According to the old problems and the new needs (studied in the Design Sprint phase) of the client, we proposed a wireframe on Figma. This structure of the site before the design is very important because it allows to determine which pages will be important and how the whole will be developed in Webflow.
2 - UI design of the model on Figma
Once the UX was validated, we were able to propose a mock-up that used the graphic elements provided by BerThoM with custom touches to create a unique environment.
The goal: to feel as good on the site as if you were in a bar les BerThoM.
3 - Client-First Development in Webflow
Once the mock-up was validated, we reproduced it on Webflow using the best practices in web development. We developed the site using the Client-First methodology.
In addition, we made sure that the site could be easily edited by the BerThoM teams to make them autonomous. The CMS for this project was quite heavy, but the simplicity of the editor mode and the determination of the client allowed us to have a complete site.
4 - SEO optimization and automation
Throughout the development (and even in the design part), we thought about how to best propose a site that could be visible on search engines. We optimized with the client different technical parts of the site to offer a good online visibility.
We also set up automations between the site and different tools (using Make) to reduce as much as possible the tedious and repetitive tasks related to the management of the website.
5 - Management of the project until it goes online
Throughout the project, we communicated with the BerThoM teams to provide optimal customer service / follow-up.
The whole feedback phase on the design was handled directly in Figma and on Markup for comments on the site. We also used loom to answer specific questions and for the client to keep track of our answers/training.
The Webflow Les BerThoM project in pictures
