Mat Kolodziej

Brevo – Rebranding and Migration to a Scalable WordPress Architecture

Led the rebranding and migration of Brevo’s complex, multi-repository web presence into a scalable, headless WordPress architecture. Implemented over 80 custom Gutenberg blocks, enabling the content team to create and manage content seamlessly across the entire website. The hybrid architecture ensured a smooth transition while maintaining business continuity. The result was a modern, efficient, and user-friendly platform that significantly reduced maintenance overhead and enhanced content management flexibility.

Brevo – Rebranding and Migration to a Scalable WordPress Architecture

Project Details

Project Link
Live Site
Industry

SaaS

Type

Enterprise

Role

Senior WordPress Developer

Project Overview

Brevo, a SaaS company with over 600 employees, sought to modernize their web presence amidst a major rebranding effort. The original WordPress application was dated and lacked scalability, making it difficult to maintain multiple services across eight separate repositories, including various Next.js applications. As the most senior WordPress developer, I was tasked with leading the rebranding and migration effort, with a focus on implementing a flexible, scalable WordPress architecture that could serve the needs of multiple teams across the company.

Objectives and Challenges

Initial Problem:

Brevo’s legacy WordPress site was built with a heavily customized theme and relied on ACF Flexible Content for post types, leading to fragmented development. Each post type had unique components, making it difficult for teams to share sections or components. Furthermore, the presence of multiple Next.js applications for different services like jobs and enterprise led to a maintenance nightmare with eight separate repositories.

Project Goals:

  • Rebrand and migrate the old WordPress site to a new, scalable architecture.
  • Consolidate content management to allow the content team to reuse sections and components across different pages.
  • Implement a headless WordPress solution using Gutenberg blocks, saving data via REST API into a Next.js application.
  • Manage the transition without disrupting ongoing business activities by running two WordPress instances concurrently.

Key Challenges:

  • Managing the dual instances of WordPress during the transition.
  • Creating a flexible and reusable component system using Gutenberg blocks.
  • Ensuring the project timeline was met despite the tight 5-month deadline.

Process and Approach

Research and Planning:

The initial phase involved assessing the existing WordPress architecture and identifying the key pain points. We decided to implement a headless WordPress solution using Gutenberg blocks to allow content teams more flexibility. This approach would enable different sections and components to be used across various pages without additional development effort.

Design and Development:

The new WordPress instance was designed from the ground up with scalability and flexibility in mind. We started by implementing 20-30 Gutenberg blocks, allowing the content team to build complex layouts without custom development. This has since expanded to over 80 blocks.

The architecture was hybrid, with two WordPress applications running simultaneously. The old application was maintained to serve content not yet migrated, while the new one provided data to the Next.js frontend via REST API.

Project Management:

Given the tight timeline, effective project management was crucial. Regular sprints and close collaboration between backend and frontend developers ensured the project stayed on track. Custom Cloudflare handlers were implemented to manage the dual WordPress instances, allowing seamless redirection between old and new pages.

Solutions and Execution

Technical Solutions:

  • Gutenberg Blocks: Implemented a flexible block system using Gutenberg, allowing for dynamic content creation without additional development.
  • Headless WordPress: Data was saved via REST API into a Next.js application, enabling a decoupled frontend architecture.
  • Cloudflare Handlers: Managed the two WordPress instances and ensured smooth redirection between old and new content.

Design Decisions:

The decision to use Gutenberg blocks was pivotal in enabling content teams to have full control over their pages. This decision also allowed the frontend team to build a cohesive design system that could be reused across different sections of the website.

Innovations:

The use of a headless WordPress setup with Gutenberg blocks was a significant innovation that allowed Brevo to future-proof their content management system.

Tools and Technologies:

  • WordPress: Core CMS
  • Gutenberg: Block Editor
  • Next.js: Frontend Framework
  • ACF (Advanced Custom Fields): Legacy content management
  • Cloudflare: For managing dual instances and redirection

Results and Impact

Quantitative Results:

  • Improved Scalability: The new WordPress architecture supports rapid development and easy expansion, accommodating over 80 reusable Gutenberg blocks.
  • Reduced Maintenance Overhead: Consolidating from eight repositories to a streamlined headless architecture significantly reduced maintenance complexity.
  • Enhanced Flexibility: Content teams can now use the same components across different pages, improving consistency and reducing development dependency.
  • Client Satisfaction: Brevo’s rebranding was successfully executed with a robust, scalable architecture, positioning the company for future growth.