Lebensbaum

Two into one

Corporate website and online shop united by headless architecture.

Services and related technologies

Consulting, architecture, implementation, commissioning, maintenance.

Next.js, React, Solr, Drupal 7, Magento.

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 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.

Case Detail Image

Monday’s idea of taking the headless approach to develop a new web app that unites our two existing systems offers a lot of advantages. Our customers benefit from a wide range of usability improvements while we avoid the hassle of leaning a new content management system. And we also have plenty of options for future developments – such as ensuring the seamless integration of new data sources.

Manuela Wiegmann
Corporate Communications

Fit for the future

Headless commerce is a new approach that future-proofs the Lebensbaum website. Thanks to the reuse of the existing Drupal instance, content maintainers continue to work in their familiar environment, although their output is now part of a more modern system. The integrated shop offers an outstanding user experience and is perfectly tailored to match the CI. Last but not least, the new architecture is an ideal launch pad for future projects.

failure-tolerant

Static serving of content even after a complete failure of the connected systems

pages

Integration via API avoids the need for content migration

system

Headless architecture as the basis for the new corporate web app

Browse our other case studies

Generali Versicherungen

New corporate website for insurance broker portal run by Dialog Versicherung

View case study
Eppendorf Group

Centralised information platform for global market leader in laboratory systems

View case study

Interested?

Are you facing a similar challenge in your company? Talk to us today about your needs and requirements. Our experts look forward to helping you.