This is a preview of the Storyblok Website with Draft Content

Retail

Oatly scales oat-tastic content experiences for 16 global sites in two months

  • Headquarters: Malmö, Sweden
  • Technology Stack: Next.js, React, Azure, Shopify, Bynder
  • 2 months to build 16 global sites

Storyblok has streamlined Oatly's developmental flow within their digital transformation. With a fresh breath of operational efficiency, both technical and non-technical users can effortlessly collaborate. The result? A site that’s easy to use, creatively designed, and highly functional. From launching into different markets with 16 in just 2 months to creating immersive content experiences - Oatly goes beyond your usual alternative milk brand.

Storyblok isn’t just up-and-coming; it’s already there amongst the big leagues as a headless CMS of choice.

Squeezing fresh content experiences for global website roll-outs

  • Faster time to market with unified branding: Within a 2-month build time, Oatly launched 16 global market websites by leveraging Storyblok’s atomic design with reusable content components. Non-technical users no longer need to depend on developers to update content. Oatly's team can manage and reuse content across pages, campaigns, and channels. That means getting projects to market faster and with consistent branding.
  • Easy-to-use all around: With a simple editor interface for Oatly’s designers and creative team, Storyblok’s Visual Editor makes it simple to make any changes in real-time without any developer intervention
  • No more looking for lost images, assets, or projects: Gone are the days of lost time trying to find a missing image or file. The creative team has the upper hand with a simple dashboard that holds a content and asset library through folder-type organization
  • Freedom for developers: Oatly championed their developers to innovate and build in whatever language/frontend framework they were comfortable with, stepping away from their rigid legacy setup.
Screenshot of Oatly's website
  • Composable Components
  • Image Service
  • Visual Editor
  • Storyblok API

Oat-standing features for Oatly’s expansion

  • Composable Components: Reusable content can be cloned and mimicked across various campaigns and pages that become applicable to all of Oatly’s 16 different global sites (Global, Australia, China, Denmark, Finland, France, Germany/Austria/Switzerland, Hong Kong SAR/China, Iceland, Israel, the Netherlands, Norway, Spain, Sweden, the United Kingdom & the United States)
  • Development in a framework your developers code: Developers are free from having to develop components repeatedly. Instead, they have the flexibility within their tech stack to implement new tools easily and securely. On top of that, they’re doing it all in a programming language of their choice rather than having to contort their skills into a new one.
  • Visual Editor for stunning website experiences: It’s no wonder why Oatly’s creative team, dubbed the Department of Mind Control, flexes their creative muscles with their infinite canvas homepage. They’ve leveraged their collaborative environment to get stunning SEO-optimized campaigns online over and over again
  • Cherry-picked technologies to scale with Storyblok’s API: Oatly is able to pick the best technologies from the marketplace tree to integrate with their setup and needs - from eCommerce to localization tools as they scale for a global market. Shopify is connected via API to supply information to Oatly’s product pages. Vimeo is also integrated for a multimedia audience experience.
  • Stepping away from a legacy past: Storyblok’s cloud-first headless approach that fits into Oatly’s cloud-first strategy enabled the brand to step away from their legacy past and into a scalable future
  • An organized content and asset library: Storyblok empowers marketers with an organized dashboard that holds a content and asset library through folder-type organization (alongside a Bynder plug-in), making it easy-peasy for marketers to find what they’re looking for.
  • Storyblok’s Image Service: Oatly’s infinite canvas websites for each region are image-heavy and rich in animation, yet, have been optimized in loading times thanks to Storyblok’s Image Service

Building a new website comes with a lot of things to think about. But with Storyblok, it helps you build in the right way with SEO in mind, structured content, and really get us to rethink and consider our KPIs.

Moo-ving over to great content experiences

Have you ever ordered an oat milk latte at your local coffee shop? Chances are the barista whisked up your drink with Oatly. With nearly 70 percent of the world’s population having trouble digesting lactose since the 1990s, Oatly has taken the plant-based dairy world by storm and is today one of the world’s biggest alternative milk producers in over 25 countries.

Oatly doesn’t just stop at oat milk. The brand’s expanded their library of oat products from decadent soft serve ice creams to creamy spreads made to be lathered onto some crunchy toast and more. Oatly as a company is creatively driven and needed freedom and flexibility for their designers, developers, and marketers as they continued to scale their products into new markets. It was important for Oatly to maintain and grow its brand identity.

Key requirements for a sustainable system

When Oatly was confronted with the opportunity to break away from their legacy system of WordPress and ApostropheCMS, the brand embarked on a journey to find a solution that could foster collaboration, streamline productivity, embody creativity, and fit everyone’s workflow.

To do this, they had to reconsider their digital landscape and technological ecosystem entirely. The strategy needed to unify specific teams working on separate projects, integrations, or technologies with one solution. Oatly’s developer narrowed down the search with the essential requirements, including:

  • A headless CMS solution that allows Oatly’s developers to work with components independently and contain a constantly growing component library. Essentially, fitting to Oatly’s cloud-based infrastructure strategy.
  • Not needing to develop components over and over again, and instead have the flexibility within their tech stack to easily implement new tools and integrations in a tech language that their developers knew
  • Requesting a simple editor interface that could be easily used by editors globally
  • Remove any technological barriers when it came to the tech stack so Oatly’s developers could easily adopt new technologies, integrations and innovate
  • The ability to independently scale and easily adapt to any new integrations within any of their specific fields in a best-of-breed approach over time

Scalable for global presence: Oatly’s sights on the future

Storyblok became the clear choice thanks to its flexibility, collaboration, and ease of use for both developers and Oatly’s creative team. Overall, Oatly’s complete migration to Storyblok and going live with their 16 new websites took just 2 months.

To have the creative freedom to do things and also have a good visual editor interface that people can actually work with that is quite, you know, easy to understand, is very important. In the end, you just want to find a good balance between both developers and marketers.

Screenshot of Hey Barista Oatly website

While Oatly’s products have grown over the years, one thing remains sure - their hunger for growth and scalability for a global presence, such as exploring possibilities for their eCommerce efforts in their US market website, where data is fed via API from Shopify to their product pages, and in localizing catalogs and content per region.

Likewise, the team at Oatly have also migrated several of their other sites, such as ‘Hey Barista,’ into Storyblok. The company works incrementally to bring out an MVP (Minimum Viable Product) while developing through an agile process and with quality. Each site, content piece, and asset at Oatly is a moving process that is constantly evolving, innovating, and keeping up with its core values of creativity, sustainability, and transparency.


Get Started With Storyblok

Take a tour with us to see how you can build better content experiences, faster with Storyblok.