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.
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.
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:
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.
Technical challenges
- Performance optimization for feature rich website
- Integration of JS-Based functionality (Mapbox, React) with Patternlab
- Integration of Hubspot API for individual user tracking
- Advanced analytics for Google Analytics and Facebook Tracking for conversion optimization
- Fully automated deployment workflows to custom containerized hosting environment (Kubernetes, Docker)
