SENEC is a provider for solar energy devices in Germany, operating in Germany, Italy, and Australia. SENEC, powering over 25.000 households in Germany is a fast growing startup and a daughter company of ENBW one of the largest German energy providers.

In order to further support the company growth, the website needed to be relaunched.
 

 

Visit the Senec site

The solar energy market in Germany is highly competitive and the challenge was to create an excellent user experience with exceptional user interaction elements and features to present SENEC as a comprehensive supplier of decentralized energy transition and renewable energy system.
There were three main purposes with the new website:

  • First, provide information about the products in an engaging way.
  • Second, offer contact possibilities to get information about the products and services.
  • Last, allow customers to close energy contracts directly on the website.

The goal of the project was to turn the well working original SENEC website into a ‘lead machine’ that will serve landing pages and converting user journeys for all marketing activities.

 

Why did SENEC choose Drupal?

Our client requested Drupal because of its excellent reputation as an enterprise grade web CMS.
The IT department of SENEC operates all systems in-house, and Drupal could easily be integrated in the existing IT landscape, because of its open standards and in-built API functionalities.

Nils Buntrock, Director Marketing at SENEC:

“We are amazed by the flexibility and simplicity of the Drupal's backend. Our editors can produce better content and work much faster than before. This allows us to focus more on growing our online business and reach our audience better."

The most important part of the IT landscape of SENEC, that Drupal connects with, is a feature rich services API, where product information, usage data, and contract booking can be accessed from third party applications.
Other integrations were to a proprietary CRM system, as well as the marketing automation system Hubspot.
 

 
SENEC main

Key features

The UX design was created in close cooperation with the client. A component based design methodology was used. The frontend was implemented as a decoupled front-end using Pattern Lab and Twig.

The benefit of decoupling frontend from backend development is the higher implementation speed, because both can be done parallel. Also frontend developers do not need Drupal know how to implement the frontend and vice versa. Read more on our blog about how design systems help us to achieve this simple and easy.
 
The backend system was built on Drupal 8 with paragraphs.

The website has a great number of graphical highlights. Most notable is the integration with a map box to interactively illustrate the usage of solar devices in Germany.
Throughout the website a number of subtle animations are used to present content to the user in an engaging way.

Here are some of the highlights:

 

contracts 1
senec form

Application for new contracts

The technically most advanced feature is an application for new contracts.

Creating an energy contract is a complicated process with many steps and conditions. In order to create the best possible customer experience, a solution based on React was implemented. We created a progressively decoupled React app for the form process. You can read in detail about how decoupling in Drupal works in this post by Dries Buytaert. 

The form consists of a series of steps with beautiful custom interaction elements. Power consumption data is collected and instantly validated both in the app and server side. At the end the gathered data is sent to an internal API of SENEC and a legally binding energy contract is closed.

Besides interacting with a React app, visitors can also get in touch with SENEC via regular webforms.

These were built with Webforms and the results are automatically posted to both Hubspot marketing automation software and an internal CRM system. Due to GDPR regulations SENEC’s strategy on Technical and organisational measures (TOM) no customer data was to be held inside the Drupal system.

As this is a marketing website that provides landing pages for all marketing activities, sophisticated tracking applications were implemented. This could easily be achieved by having Drupal deliver semantically clear data, that could easily be collected by various analytics solutions.

Since implementation of the website could be executed efficiently, the feature set grew during the project. Among other things a blog previously managed in Hubspot was moved into the website.

front 2

Technical challenges

Main benefits for our client

  • Editorial experience: A flexible content creation system was built with Drupal 8 core functionality and Paragraphs. The editing UI was streamlined to the permissions of the content editors.
  • In the conception phase the information architecture was created together with the client and transformed into an atomic design. This allowed for an efficient creation of editorial requirements for the website.
  • The requirements were turned into an UX design, a graphic design, a decoupled frontend, and a matching backend structure. The strict approach made the production process transparent and allowed the customer to participate in all stages of the project.
  • The result is a fast and feature rich website.
  • The website integrates seamlessly into the existing IT architecture (customer APIs, Hubspot, CRM, Analytics, etc.)

 

 

Baddý Breidert

»Let's talk about your project and how we can help!«

– Baddý Breidert M. Sc., CEO

Phone: +49 69 976 711 50
Email: office@1xinternet.de