From Monolith To Decoupled Architecture. Danone’s Alpro Path To Cutting-Edge Web Solutions

Overview

Danone's Alpro has been leading the plant-based world for over 40 years with their innovative drinks, yogurt alternatives, and desserts. Their website isn't just a site; it's a lively hub for engaging with fans, by educating them exchanging ideas, and embracing the digital age.

A few years ago, Alpro ditched their old system and chose Contentful, a modern headless CMS. They initially went with Gatsby for their frontend, but it didn't work well enough.

That's when Bejamas jumped in! We teamed up with Alpro and switched to Next.js, bringing in better performance, scalability, and security. We gave their website a fresh redesign to match their new look and connect better with their audience.

Our adventure together began in 2023, and after a successful launch, we decided to keep the momentum going, ensuring Alpro's site stays optimized and keeps those conversion rates climbing.

Introducing Alpro: Trend Breaking

The world's biggest transformations come from breaking the trend, and Danone's Alpro is a perfect example. When they started, hardly anyone talked about a vegan lifestyle, and discussions about the benefits of cutting out animal products were rare.

Alpro kicked off this change by educating people about plant-based food alternatives, setting the stage for a global movement. These alternatives are perfect not only for those with lactose intolerance but also for anyone who understands the huge impact our food choices have on our health and the planet.

Thinking differently gives you the power to keep pushing limits. Alpro did just that by ditching old web development methods and embracing a flexible approach called composable architecture. This bold move opened up new opportunities for experimentation, letting Alpro rewrite the rules to their advantage.

We want to help people make positive choices when it comes to food.

Our mission, Alpro.com

Alpro's Exciting Move to a New Web Architecture

Alpro used to rely on custom-made architectures for their website, which worked well initially but caused problems as the site grew more complex. Making changes or fixes often led to new issues, making it hard to adopt new technologies or switch platforms.

Enter Headless CMS: A Promising Alternative

Alpro decided to try a headless CMS, which separates content management (back-end) from content presentation (front-end). This approach simplifies integration with various platforms and devices. They chose Contentful CMS for its scalability, flexibility, and ease of use. Contentful's content delivery network (CDN) ensured high availability and fast content delivery, making it perfect for managing Alpro's extensive content.

Benefits of Contentful CMS

• Scalability and Flexibility: Easily handle large amounts of content.
• Speedy Content Delivery: Fast and reliable through the CDN.
• Ease of Use: Intuitive interface suitable for marketing teams, reducing dependency on developers.
• Collaborative Features: Supports rapid content creation and updates.

Transition to a New Front-End Framework

After getting comfortable with Contentful, Alpro and their web development agency decided to use Gatsby as their front-end framework. This made website management easier at first, but they soon realized that a headless CMS wasn't a magic fix for all their issues.

Lessons Learned

Alpro's initial excitement led them to overlook the need for ongoing architecture maintenance. By 2022, Gatsby, which seemed the best choice in 2019, hadn't evolved as expected, making the combination with Contentful less effective.

By shifting to a headless CMS, Alpro experienced both successes and challenges, learning valuable lessons about the importance of continuous improvement and careful planning in web development.

The Challenges with the Previous Website

• GraphQL Integration Issues:

Gatsby uses its own GraphQL conventions, making it hard to scale.

As Contentful data grows, so does the website's build time.

• Long Build Times:

Builds could take up to 30 minutes.

Changes took several seconds to reflect, making development frustrating.

• Decline of Gatsby:

Gatsby's performance declined, slowing down the website.

The end of Gatsby’s development added more problems.

• Technical Complexity

The codebase was outdated and overly complex.

Using styled-components meant CSS was written in JavaScript, leading to messy code.

• Clunky Code

The code was so tangled that redesigning the website was nearly impossible.

Impact on Experience

• User Frustration: Slow speeds and poor performance drove users away.
• Team Frustration: IT and Marketing teams found the website hard to manage.
• Business Impact: Lower engagement and higher bounce rates were bad for business.

Need for Change

Alpro, a brand committed to leading change and engaging with users, knew they couldn't continue with these issues. They needed a modern, flexible approach to web development. That's when we stepped in. We conducted a thorough audit, identified the pain points, and guided them toward a better, more exciting future for their website.

Alpro + Bejamas

The Start of Something Great: Before we officially teamed up, Alpro already knew Bejamas did fantastic work. In 2022, we joined forces to create a new website for the Alpro Foundation, a non-profit that promotes plant-based nutrition, health, and sustainability.

Spicing Things Up in 2023: In 2023, Alpro launched its new-look packaging, featuring key ingredients, vibrant flavor notes, and a unique custom font. This fresh campaign aimed to showcase the power of plant-based foods and highlight the ingredients as the brand's stars. With this rebranding came the need to boost website performance and management, so Alpro turned to Bejamas for help.

A New Digital Chapter: Bejamas stepped up to the plate, ensuring the website's design matched Alpro's new branding and overall strategy. Together, we embarked on the next exciting chapter of Alpro's digital transformation, making the brand experience even better.

We decided to start working with Bejamas because they had great expertise in the technology we were working with. They were championing that through the documentation, research, and information they provided on their website.

Ralph UrmelSenior Digital Experience Manager at Alpro

Project’s Goals

Working closely with Alpro, Bejamas set clear goals to address the project's actual challenges and needs.

Aligning with New Packaging Design and Campaign

The main driver for updating the website was the new packaging designs. We aimed to ensure the new web designs matched the latest campaign's visual and thematic elements to maintain a consistent and powerful brand message.

Updating Typography and Brand Colors

With the new packaging, Alpro introduced a brand book featuring customized typography, new brand colors, textures, and imagery recommendations. Our goal was to reflect this updated branding on the website, making products and ingredients more visible and readable for visitors.

Enhancing Navigation and User Experience (UX)

Detailed UX audits provided insights into current website issues and opportunities for improvement. We aimed to refresh navigation and functionality based on these recommendations, enhancing the overall user experience.

Transitioning from Gatsby to Next.js

Alpro's previous website, built with Gatsby, had legacy code issues affecting performance, scalability, and maintainability. Our goal was to transition to Next.js, leveraging its benefits for faster loading times, improved SEO, and better overall performance.

Maintaining Website Stability During Changes

Implementing updates and migrations while keeping the website live was crucial. We strategically planned every step to minimize disruptions and maintain system stability during the redesign and migration processes.

Process

Revamping Alpro's website was like solving a big puzzle. Instead of overhauling everything at once, we made changes piece by piece. This approach kept things manageable and streamlined.

Different teams—design, development, QA, and marketing—worked together smoothly. Each team focused on their part, whether it was improving the visuals or refining the code. By breaking the work into smaller steps, we ensured everyone could contribute simultaneously and effectively, making the website improvement process efficient and collaborative.

Challenges and Solutions

• Maintaining Website Stability: The main challenge was keeping the existing website stable while transitioning to the new Next.js setup. We adopted an incremental migration approach, combining elements of the old site with the new architecture to ensure stability.
• Technical Limitations of Netlify: Netlify, despite its strengths, had some limitations. We used Gatsby as a bridge to blend old and new elements, enabling a smooth transition of traffic to the new setup.

The unique features that we used:

• Next.js 14 App Router: Improved caching by storing data locally during the build process, reducing repetitive requests to Contentful.
• Server-Side Rendering (SSR): Generated pages during build time, enhancing runtime performance and saving users' time.

Our recent codebase audit led by Bejamas was a game-changer for our digital platform. Their meticulous review of our stack, which includes Gatsby, Netlify, and Contentful, unveiled areas of improvement we hadn't considered. Their recommendations not only enhanced our code quality but also streamlined our deployment process. A must-have for any serious digital team!

Ralph UrmelSenior Digital Experience Manager at Alpro

The Results and The Success

At Bejamas, we focused on clear goals and metrics to guide our digital makeover. Our aim was to enhance user experience, improve performance, and boost engagement on the website.

Our efforts paid off with noticeable improvements:

• Page performance increased by 17.4%,
• Web accessibility improved by 6.5%,
• SEO metrics saw an 11.6% enhancement.

In the three months following the launch:

• Active users increased by 14%,
• User engagement rose by 20%,
• Bounce rate decreased by 6%.

These results highlight the success of our comprehensive approach to website redesign.

Core Web Vitals

Since December 2023, we've been constantly upgrading our website, transitioning from Gatsby to Next.js. The Treo Site Speed tool screenshot below illustrates significant performance enhancements on the Alpro homepage since November. We rolled out pages gradually, resulting in noticeable improvements in key metrics like Largest Contentful Paint (LCP), First Contentful Paint (FCP), and First Paint.

Analyzing these charts reveals a substantial decrease in loading times:

• Largest Contentful Paint (LCP) improved from 3 seconds to 1.9 seconds,
• First Contentful Paint (FCP) decreased from 1.9 seconds to 1.5 seconds.

These improvements not only sped up content delivery but also enhanced the user experience, encouraging visitors to spend more time on the website.

I would definitely recommend Bejamas as a digital partner agency where we initially thought we would use them only as a development agency. We soon discovered that they are capable of much more. So, they become a more strategic partner as well.

Ralph UrmelSenior Digital Experience Manager at Alpro

Conclusion

Alpro isn't just another business – it's a brand driven by a mission and vision for a better future. Their website is a vital platform for sharing these values. We're honored to have shaped their online presence, ensuring clarity, engagement, and functionality.

Thanks to our work in development and design, we launched Conversion Rate Optimization efforts, beginning a long-term partnership with Bejamas. Our collaboration has already yielded valuable insights, guiding recommendations to enhance functionality, user experience, and content strategy.

As we tackled challenges and pursued excellence together, our collaboration with Alpro became one of our most rewarding experiences. We look forward to more adventures and partnerships like this one!

We were really impressed with the work. Bejamas understands what it takes to deliver a modern, future-proof website that meets both the business’ and the users’ needs and requirements. And the fact that the final result ends up looking absolutely stunning is no coincidence either!

Ralph Urmel Senior Digital Experience Manager at Alpro

Team:

Project manager: Syuzanna Mkrtchyan

UI Designer: Justyna Lasota

UX Designer: Justyna Lubimow

Developer: Aren Hovsepyan