Storyblok delivers a clear content architecture for sparstrom

• Headquarters: Köln, Germany
• Technology Stack: Storyblok, Next.js, Vercel, Storybook

sparstrom (opens in a new window) is a modern digital energy provider with 100% green electricity. They are part of the badenova (opens in a new window) family - a giant in the production of sustainable and reliable energy in Germany. sparstrom comes with a unique value proposition. Their clients not only get electricity and gas, but they can also combine their energy contracts with appealing bonus devices like mobile phones, smart radiator thermostats, household and electronics appliances, and many more.

To manage the perks and benefits they offer, sparstrom has to be able to execute campaigns with their affiliate partners with ease. They discovered that the best way to do that is through campaign landing pages. So, they needed a content management system (CMS) that allowed them to quickly and easily create them.

Storyblok was introduced to sparstrom by alm engineering. (opens in a new window) They are a skilled software development company from the heart of Munich, Germany. Founded in 2019, their team oversees a large number of different projects from various industries. Together with alm engineering and Storyblok, sparstrom’s new platform was up and running in 3 months. Not only that, but their component library was built in just 1 month.

Out with the old, in with the new

There were a lot of technologies involved in the management of sparstrom's online presence. These monolithic or hybrid technologies did not have the ability to integrate together. The result was a lot of dissatisfaction, time loss, and unnecessary cost. The teams had to navigate a platform they had a hard time understanding, let alone managing.

alm engineering came into the game to help clear things up. After the discovery process, the following goals were set:

• Create a content library.
• Provide a tool for editors to navigate, customize, and edit content with ease.
• Help sparstrom migrate to the new platform so they can manage their site and campaigns with ease and flexibility.

Creating the component library was the number one priority. The teams were using Scrivito as their CMS. The issues they were experiencing were due to the lengthy process of development. Small changes to the structure required involvement from front-end and back-end developers. This resulted in delays in the development and execution of important projects. Thus, a component library was the solution. It allowed sparstrom to use, repurpose, and customize the components across all their projects.

Storyblok & sparstrom

A few CMSs were considered for the project, but Storyblok’s features and services prevailed due to:

• Atomic design principles (opens in a new window): Today, with the help of Storyblok, all the structural components are capsulated and easy to share between sub-companies. This is made possible by Storyblok’s design principles. They enable developers to transform rigid web templates into nestable, component-based data structures that can be integrated and repurposed across any digital channel.
• Headless architecture & fast deployment: The sparstrom component library provides developers and editors with complete ownership of the decoupled front and back ends. This allows for a very fast deployment process. Also, a quick turnaround when shipping new features.
• Creative freedom: With Storyblok, content creators and editors can independently create and publish content across many channels. This saves time and money and eliminates confusion and frustration.

The goal was to allow sparstrom to navigate, customize and deliver content on their main site and campaign sites with ease. sparstrom has partners that help them deliver extras for their clients. So, they had to be able to create and edit campaign landing pages on the go with minimal effort and independence.

The new structure developed on Storyblok allowed the sparstrom team to achieve and exceed that goal. The new tech stack consists of Storyblok, Next.js, and Vercel. This React Stack allowed them to build a complex interface through simple components, connect them to data on their back-end server, and render them as HTML. They used GraphQL to fetch data from Storyblok to the front end.

The team at alm engineering was able to hand over the project to sparstrom’s content team in a matter of 5 simple steps. Today, Storyblok is used to manage sparstrom’s main site, FAQs, and all their campaign landing pages.