Energy

Hybrid Horizons: How Octopus Energy powers the future of renewable energy with Storyblok

Headquarters: London, United Kingdom
Technology Stack: Next.js, AWS OpenSearch, in-house tech platform Kraken

Kraken is an energy tech platform that is part of Octopus Energy, a pioneering company in the renewable energy sector known for its innovative approach to providing sustainable energy solutions.

Storyblok empowered Octopus Energy to leverage advanced technology and streamline operations for their retail sites across 8 markets. The result? Enhanced customer satisfaction, efficient cross-functional collaboration, and next-level content management.

2 weeks build For retail website
2/3↓ requests for engineer support
5 minutes to release new website versions

Storyblok's Visual Editor empowers our content editors to click on the content they want to change and see the results in real-time. This enabled us to roll out Storyblok at speed with zero training, and our teams around the world have taken to it like ducks to water.

Aaron Cawte Senior Front-end Developer at Octopus Energy

Octopus Energy’s Previous CMS Growing Pains

The original UK business began with a Django website (Python framework) alongside an open-source CMS called Wagtail and content written in code. Octopus Energy encountered several challenges with this previous setup, including:

A decentralized content management setup: The previous system resulted in fragmented content management and bottlenecks within workflows, which caused inefficiencies and hindered collaboration.
High dependency on developers: Creating and managing content required significant developer involvement from non-technical users, leading to delays.
Limited flexibility and customization options: The CMS wasn’t flexible enough to support Octopus Energy’s rapid growth and dynamic content requirements.
Slow deployment pipelines: The legacy system was not built for speed, leading to slower deployment and a longer time-to-market for new content and features.

Changing the game with Storyblok

As the Octopus Energy team expanded and built customer-facing features, they transitioned to a React tech stack and now use Next.js for all their energy retail websites.

Around that time, they also expanded into other countries and wanted to ensure they used the right technologies. This was when they introduced Next.js, TypeScript, and various modern JavaScript tools and libraries. Today, Octopus Energy has rolled out Storyblok in 8 markets: Italian, Japanese, British, American, French, Spanish, New Zealand, and German.

Octopus Energy adopted Storyblok due to its flexibility and powerful APIs, which have been instrumental in transforming its content management processes. These include:

User Roles for a multi-team setup and cross-function usage: Storyblok is utilized by 19 teams across 6 business functions in 8 countries. The product, marketing, and technology for energy and retail operations teams are the key users of Storyblok. Initially adopted by the retail operations team, Storyblok quickly gained traction among other business functions due to its efficiency and ease of use.
The ability to integrate with internal tools: While Storyblok functions well as an independent product, its integration capabilities have proven invaluable for internal projects. It can also connect with internal tools, such as the in-house tech platform — Kraken, via the content and management APIs. This supports highly efficient deployment pipelines and content migration, enabling the release of new website versions in as little as 5 minutes alongside programmatic content creation.
A best-of-breed selection with AWS: Octopus Energy's web stack is built for speed and flexibility, using Storyblok on a Next.js base. Their bespoke search tooling is built on AWS Open Search and integrates closely with Storyblok via API. This allows customers to find information quickly and effortlessly. Billing Storyblok through the AWS Marketplace has further streamlined its operations.

Streamlining content operations with native Storyblok Features

1. Component library and design system integration

The flexibility of Storyblok's Component Library has empowered Octopus Energy’s content editors to create experiences independently without relying on developers. Integrated with their Coral Design System, this capability has enabled rapid responses to customer needs across various markets. The design system is designed in Figma, with a matching component library in code, via an NPM package (a package manager for the JavaScript programming language).

2. API access for centralized content management

Storyblok's API access supports Octopus Energy's centralized content management approach by enabling them to maintain cohesive and accessible content across all platforms.

3. Cross-platform and global mobile app integration

Storyblok powers content on Kraken's cross-platform and global mobile app, enhancing its customer experience by providing a consistent and flexible content management solution. Accessed via API, the app’s home screen presents news content showcasing current campaigns, events, and more. This is stored in Storyblok as a form layout. Octopus Energy’s content team can manage everything inside Storyblok without the need for developers to build inside another solution. The Octopus Energy application is available in both Apple iOS and Android.

4. Precise roles and permission system

Since Octopus Energy is expanding to multiple countries and regions, having granular access management and roles is crucial. The precise roles and permission system allows the team to easily control who can access various data.

Stronger performance for global website roll-outs

Improved content creation and deployment

Since implementing Storyblok, Octopus Energy has significantly reduced its dependency on developers for content creation. The typical publishing time has been cut by 1-2 days, with simpler pieces delivered the same day. This has freed engineering teams to focus on strategic projects, resulting in considerable time savings.

Faster time-to-market

The flexible content structure in Storyblok allows editors to quickly build pages from pre-built templates, enabling rapid responses to market changes, regulatory requirements, and customer needs.

Efficient website roll-outs

Octopus Energy's most recent retail business launch went from zero to a working website in two weeks, with published content incrementally added within two months after that. This efficiency demonstrates Storyblok's capability to support fast-paced project timelines.

Reduced development requests

With Storyblok, Octopus Energy has seen a two-thirds reduction in support requests from engineers, highlighting the platform's role in streamlining content operations and reducing development costs.

Looking ahead with Octopus Energy

Storyblok has been a transformative tool for Octopus Energy and Kraken. It enables efficient content management, reduces dependency on developers, and supports rapid growth and innovation. By adopting Storyblok, Kraken and Octopus Energy have enhanced their ability to deliver exceptional customer experiences and maintain their position as leaders in the renewable energy industry.

Octopus Energy plans to continue leveraging Storyblok for various projects, migrating over 1,000 pages from a legacy CMS and expanding its mobile app content. The ongoing integration with their tech stack ensures they remain at the forefront of innovation in the renewable energy sector.