4BRO + Magnolia

4BRO was able to massively expand the business and build a broad customer base within a few months, but that soon brought challenges: the existing CMS at the time was not an enterprise solution and could not scale with the rapidly growing online business. After just a short time, the system reached its limits. What was needed was a new, future-proof architecture that could grow with the young emerging brand.

4BRO's previous CMS had been extended with many add-ons and plugins. This soon started to cause problems. Data was being stored twice and the plugins took resources away from each other. The online store integration also ran via a plugin, which, however, could not be connected to the cloud ERP system. Another problem with the existing system landscape was that the 4BRO app was also not compatible with the ERP. In short: ERP, web store and app were not interconnected.

These silos were costing the team valuable time and was negatively impacting the user experience and the customer journey. Magnolia DXP was brought in to transform this disjointed system landscape into a platform that would enable a unified and future-proof digital experience. 

4BRO was experiencing a huge customer rush. In order for the business to continue without interruptions, the switch to a new system had to run as smoothly and as quickly as possible. Within four months, Magnolia Gold partner dev5310 carried out a complete migration to Magnolia DXP, including Magnolia's Headless CMS, which now manages both the 4BRO website and the 4BRO customer loyalty app.

For an optimal customer journey, a future-proof architecture was created with Magnolia – keyword “composable”. Thanks to Magnolia DXP's flexible integration capabilities, third-party systems such as SAP byDesign can be quickly and easily integrated in such a way that editors have access to all connected systems via a central management interface for the creation of digital experiences. To do so, the 4BRO team maintains products in a central content app in Magnolia with automatically synchronizes with SAP byDesign.

Furthermore, 4BRO relies on Magnolia's hybrid-headless approach. This dual mode allows 4BRO to run its website in a classical way using Magnolia templates and a Magnolia-hosted frontend, and deliver content to the loyalty app and to other landing pages in a headless manner using Magnolia's APIs. This way, 4BRO makes the most out of data centralization and content reuse. This approach overcomes both the limitations of a headless CMS and those of a traditional CMS, by allowing 4BRO to play out content through Magnolia, as well as through APIs. Regardless of delivery approach, authors work in a visual editor that provides an optimal authoring experience. It was also important to 4BRO that microservices could be easily integrated in the frontend, and Magnolia's API client ensures that microservices can be easily leveraged here.

The composable architecture also enables the integration of third-party systems directly into the backend, thanks to Magnolia's Connector Packs, REST Clients, an open framework and low-code configuration with Magnolia Light Development. For example, 4BRO's ERP system, SAP byDesign, has been integrated and data is available to authors in the Magnolia UI. Through this integration, the ordering process is fully automated. This in turn reduces the amount of logistics work. Magnolia DXP has also transformed the checkout process: this is now simply carried out via PayPal or Klarna, which contributes to an improved shopping experience. Removing the login hurdle makes ordering easier and increases conversion rates.

With the new infrastructure, 4BRO was able to catch its breath in the midst of an explosive growth: the restrictive and uncoordinated system landscape it started with was replaced by a modern, flexible digital experience platform. The system integration now saves 4BRO up to ten minutes of manual effort per order. Overall, all processes have been significantly streamlined and the central platform enables much more efficient work thanks to multichannel capabilities and a WYSIWYG editor. Magnolia DXP's scalability and flexibility also allow 4BRO to look to the future with optimism. New software can be easily integrated, furthering the team's ambitious plans. The selection and integration of a shopping system is already in planning stage.

All in all, the goal has been achieved: 4BRO is equipped with a future-proof architecture that can serve smoothly both the web and the app's 1 million users.