Lebensbaum

Client

Founded back in 1979, the small organic foods store Lebensbaum grew steadily into a medium-sized business over the years, becoming a specialist for the production of high-quality organic tea, coffee and spices. A focus on sustainable consumption and social responsibility with a clear, eco-friendly vision has proved to be a successful business model. Lebensbaum is also the recipient of multiple awards and is now a leading specialist organic retailer.

Initial situation

To date, the Lebensbaum web presence had consisted of two separate and self-contained systems. These were the corporate website on the one hand, whose content comprised descriptions of products and related information as well as a company profile, and the shop on the other, which customers used to order goods online. The corporate website had been developed using the Drupal CMS, while the online shop was a discrete Magento shop system instance.

With usability becoming a key point of focus for the online shop, the company decided on a relaunch in 2021. The aim here was to combine the two existing deployments together, so as to present shop functionality and informative content on a single, unified website and make the customer experience as user-friendly as possible. The new web app also needed to have a flexible architectural basis and be easy to maintain with modern tools.

The future is headless

Lebensbaum and Monday Consulting have worked closely together on the joint development of the organic retailer’s web presence since 2014. We also handled the last relaunch of the corporate website in 2018. The Drupal system held over 1,600 professionally edited pages, which had been adjusted to the new design brief. To avoid a complex and time-consuming migration of this editorial content to a new e-commerce platform, Monday recommended taking the headless route. This also offered the advantage of removing the dependency on PHP and the two open-source Drupal and Magento platforms.

In a headless CMS architecture, content and presentation are technically separated from one another. While Drupal would continue to be used to manage content, this would now be presented to users via an advanced Next.js application. Recent technological developments such as React and static HTML pre-generation not only simplify site deployment but also make it easier to ensure compliance with best practices. Data is made available by Drupal via an API and is then presented in accordance with the customer’s chosen design in the new web app. This ensures the web app stays streamlined and therefore as responsive as possible.

While the editorial content is served up statically by Drupal, the web app is also fed with dynamic content from the Magento shop system. This allows product names and ingredient lists to be presented together with real-time shop data. This hybrid model also means that the website stays functional and continues to serve content even if the shop system should fail, for example. In such a scenario, only the basket and checkout functions would be unavailable. This makes the static part of the website extremely failure-tolerant.

Users also notice the benefits of the static approach: the information is pre-generated and instantly available rather than being created by the server each time. Based on Next.js, the React application has also accelerated the website compared with the previous version – a fact that is clearly noticeable not only when navigating but also during user interactions such as product filtering, for example. Development turnaround times are also shorter, since the use of modern frameworks and declarative programming means that ideas can be put into practice much more quickly. Developers also gain extra peace of mind from the fact that the new architecture has been implemented using TypeScript. As a result, many typical coding errors can be avoided early in the development process.