E.ON beauftragte VALID mit Konzeption, Design und Entwicklung einer interaktiven Website, welche den „Weg des Stroms“ von der Nordsee bis hin zum Verbraucher verständlich und informativ vermittelt.
Woher kommt eigentlich der Strom aus unserer Steckdose? Was sind das für komische graue Stromkästen an jeder Ecke? Warum gibt es Umspannwerke? Das hat sich sicher jeder von uns schon einmal gefragt. Und diese Fragen wollte E.ON mit der neuen Website auf ganz neue Art beantworten – verständlich, informativ und interaktiv. Gleichzeitig sollte die Website vermitteln, welche Verantwortung die E.ON-Gruppe als größter deutscher Verteilnetzbetreiber trägt.
Konzeption
Teil des Briefings war, den anspruchsvollen Content unterhaltsam und interaktiv erlebbar zu machen. Schnell fiel die Wahl auf eine Scrollytelling-Mechanik, bei der der User selbst den Weg des Stroms steuert.
Eine große Herausforderung war die Bebilderung der einzelnen, sehr spezifischen Stationen wie Kabelverteilerschränke. Durch Stock-Material war dies schwer abbildbar und nach umfassender Recherche kamen wir zu dem Entschluss, dass es entweder keine passende Bebilderung gab oder diese sehr zusammengewürfelt und wenig professionell aussah.
Stattdessen erarbeiteten wir ein Konzept, das mit Videoaufnahmen, konkret mit Drohnen-Shots arbeitet. Der Weg des Stroms wird damit wörtlich genommen. Zusammen mit unserem Partner ließen wir eine von uns definierte Route quer durch Deutschland per Drohne abfliegen. Die dabei entstandenen eindrucksvollen Landschaftsaufnahmen, bilden die Basis der ganzen Website.
Gespickt werden diese Aufnahmen durch interaktive Hotspots, welche weitere Informationen bieten, sowie Wolken-Transitions. Diese markieren mittels Parallax-Effekt die Übergänge zwischen den Stationen und schaffen ein noch eindrucksvolleres Erlebnis.
Design
Neben dem UI-Design, welches wir mit Hinblick auf dem E.ON CD gestaltet haben, bestand eine große Aufgabe in der Post Production der Video-Drohnenaufnahmen. Hier haben wir ein umfassendes Color Grading vorgenommen und es geschafft, trübe Winteraufnahmen in frische, einladende Sequenzen zu verwandeln.
Zusätzlich sind alle Videosnippets mit passenden Soundeffekten (z. B. Meeresrauschen, Vogelgezwitscher, Hundebellen) und einer sanften Hintergrundmusik versehen, welche die Videos noch emotionaler und realer wirken lassen. Abgerundet wird das Scrollytelling durch einen Sprecher, der den Inhalt auch auf der Tonspur wiedergibt. Dazu können wir nur sagen: Kopfhörer auf, Ton an und zurücklehnen!
Der Casefilm
Entwicklung
Hohe Anforderungen werden an die Technik gesetzt, um auf Desktop, Tablet und Mobil eine optimale User Experience zu bieten. Die Wahl GSAP als JavaScript-Animations-Framework zu nutzen, erwies sich als richtig. Parallax-Effekte, In- und -Out-Transitions von Hotspots, Wolken, Karten und Info-Layern sind Scrollpunkt-genau und Browser-kompatibel umsetzbar.
Die Performance, sprich Ladezeit und Ruckelfreiheit bei Transitions von Videos, Grafiken und anderen Elementen, ist hervorragend. So lief auch die Integration in die technische Infrastruktur von E.ON flüssig.
Scrollytelling-Formate umzusetzen bringt nicht nur uns und dem Kunden viel Spaß, sondern steigert die Aufenthaltszeit der Besucher:innen auf der Website und vermittelt Wissen in Verbindung mit Marken-Branding und einem emotionalen Erlebnis.
