Storyblok relaunch with automation in energy sales

MyElectric customers are comfortable with technology and handle their energy matters themselves, so the brand's ambition was digital-first – with as few analogue detours as possible. Behind the form, things looked different. After every contract closed, a team at Salzburg AG exported the data from the website, transferred it into SAP, checked it and released it – with the corresponding cost in people and time. With more than 20,000 customers, that effort ran permanently in the background, and it ran precisely where the brand wanted to be digital.

There was a second trigger. MyElectric had been given a new corporate design that needed translating to the web. That alone a redesign would still have carried on the existing WordPress platform. Connecting the group's systems directly and automating contract closing would not. That called for a headless architecture – one that separates content, logic and systems instead of locking them into a single monolithic CMS.

In Austria, nobody pays the same electricity price. Grid fees and levies differ by region, and the calculation follows rules that few people outside the energy industry know. At the start of the project we built this knowledge inside our team, in close exchange with the product managers at Salzburg AG – the foundation for everything that followed.

Rather than tackling everything at once, we worked with MyElectric to identify what would move sales forward immediately, and set three priorities: the ordering process for new and existing customers, a price display anyone can follow, and two tariff segments for private and business customers.

Everything else moved into the product backlog and is being built step by step – managing several contracts, for instance, which landlords with many units need. The same applies to the building blocks the pages are made of. Instead of designing and building every conceivable variant, we tailored the component set to the pages that lead to a purchase decision: homepage, tariff calculator, ordering process. After four months of implementation, the platform went live.

The price in the tariff calculator comes from several sources: content from the headless CMS Storyblok, grid operator data and calculation bases from E-Control, customer data from SAP. To bring them together, we introduced the 21TORR Orchestration Layer, built on Symfony, which sits between the connected systems and the frontend. That is where the data sources converge, where the calculation logic applies, and where the finished result is delivered from.

This gives MyElectric two advantages in day-to-day operation. First, the business logic sits in one place instead of being spread across the frontend and editorial fields – when a rule changes, it is changed once, right there. Second, if one of the connected systems is replaced in future, we adjust the connection in the Orchestration Layer and the website stays untouched.

Customers notice none of this. They enter what the calculator needs – postcode and annual consumption – and see only the results relevant to them: unit price, standing charge and discount, and on request the calculated total including grid fees and taxes.

Two ordering paths run on this basis, asking customers for different amounts of information: a full one for new contracts and a considerably shorter one for renewals. Both validate every entry against the business rules we defined with product management, guide users back to the specific error, and catch unintended drop-off. The biggest difference comes after the submit button: closing the contract triggers the internal checks at Salzburg AG by itself – credit rating, deliverability, contract confirmation. Manual follow-up work is gone.

The rebranding delivered a defined colour palette with several primary colours, two typefaces and an illustrated mascot. What it did not deliver were the rules for using them: which colour marks interactive elements, which marks hints, which marks surfaces. And the question of how hierarchies, states and surfaces are separated in an interface was left entirely open.

So we assigned the brand colours concrete roles in the interface, developed additional greys, and built a typographic system out of the two typefaces. In design, we put the emphasis on the form elements – the entire contract closing runs through them. Their quality has a decisive influence on whether a contract is closed, and therefore on revenue. We brought the brand mascot in through microanimations at selected points, among them the tariff calculator.

The design system follows the logic of the Storyblok CMS and carries the same module names. Select a module in the CMS and you will find it under the same name in the design system. One translation layer less between design, development and editorial. MyElectric also maintains the confirmation emails itself: the marketing team designs the templates in SendGrid, the Orchestration Layer supplies the content.

We audited accessibility at the start of the project and documented the weaknesses of the existing site. The findings fed straight into implementation – from contrast values to the design of hints to how complex tariff overviews appear on small screens. The platform is built to WCAG 2.2 AA. To get there, we set up the design system as design as code in Storybook: every component sits there centrally and is tested for accessibility automatically – not the individual page, but each block the page is made of.

The platform has been live since June 2026. Closing and renewing a contract run without manual intermediate steps, and the processing time in Salzburg AG's back office is available for other work.

Shortly after launch, MyElectric introduced zone tariffs – a tariff model that works differently from the classic electricity and gas tariffs and could not have been represented on the old platform. The relaunch made this new sales product possible.

Together with MyElectric, we have been working on further features and on extending the platform ever since.