Webflow redesign:
Discover the transformation of Atelier PG, the Parisian cake design school, thanks to a complete redesign on Webflow and an advanced SEO strategy.
It was a real pleasure to work with the Ouiflow agency on the redesign of our Webflow website.
Fabien and Adrien went far beyond the initial scope of the project and were very proactive [...].
I recommend them 100%.
Fabien Da Costa Maia
Growth Manager at Atelier PG
The company
Atelier PG is a company offering training in creative pastry-making, and particularly in Cake Design. They offer a wide range of training courses, whether to discover or to become more professional.
The project
designed pages
SEO optimized
design time
The project involved a complete overhaul and migration of the website to Webflow.
The challenges were to
- create a new web identity to match the new corporate identity
- make maximum use of dynamic collections to facilitate Webflow site management
- create an advanced filter system
- improve user experience and reduce site loading times
- set up landing pages dedicated to acquisition
- set up all the technical foundations of natural referencing using our SEO expertise
- add a Chatbot module with Crisp
The stages of the project
Wireframes
UI Design
Dev. Webflow
Research and UI/UX Workshop
- Persona identification: We define personas to understand the needs and behaviors of target users.
- UI/UX workshop: We organize a workshop with stakeholders to discuss objectives, functionalities and user flows.
- Competitive analysis: We study competing websites to identify best practices and opportunities.
Tree structure and Wireframing
- Tree design: We create a site tree to define the structure and organization of information.
- Wireframing : We create basic wireframes for each page, based on the tree structure.
Design and Webdesign guidelines on Figma
- Moodboard: We create a moodboard to define the mood and visual style of the site.
- Color palette and typography: We choose a color palette and typography that match the brand s identity.
- Mock-up design: We use Figma to create high-fidelity mock-ups based on wireframes and design orientations.
- Customer validation: We present the mock-ups to the customer for validation and adjustments.
Webflow development
- Site structure: We establish the basic structure of the site in Webflow.
- Design integration: We integrate the design elements down to the pixel.
- Functionality development: We add interactions, animations and more.
- Mobile optimization: We ensure that the site is responsive.
- Technical SEO: We implement elements for SEO.
Testing and launch
- Functional and compatibility testing: We check that everything works as expected on different browsers and devices.
- Audit: We carry out a detailed audit of the site.
- Customer review: We set up a tool to collect customer feedback easily.
- Final modifications: We make the final changes.
- Deployment: We put the site online.
Maintenance phase
- Monitoring and analysis: We use analysis tools to track site performance.
- Support and updates: We provide regular updates based on customer needs and site performance.
The benefits for the customer
Atelier PG teams can now easily add new content to their Webflow site , thanks to the many dynamic collections that have been created and worked on to make their use as fluid as possible. Total autonomy, allowing marketing teams to take back control of the website!
Search engine optimization (SEO ) now enables them to rank higher in search results to gain greater visibility.
The redesign gives the Webflow site a more modern, attractive look that can help attract more visitors and improve the company s image.
THE PROJECT IN PICTURES
"With Webflow, Atelier PG has become more than a cake design school: it s an immersive pastry experience in the heart of Paris."