Alle Projekte

STRATEGIE · UX/UI · 2022 - 2026

stromee Website

Die Website und der Strommarktplatz von stromee

Aus einer einfachen Hauptseite wurde eine Website, die mit stromee mitgewachsen ist: mit neu gestaltetem Strommarktplatz, einem Landingpage-System mit eigenen Illustrationen und vielen neuen Seiten, Prozessen und unterschiedlichen Anforderungen von Partnern und neuen Produkten.

ZEITRAUM

Juni 2022 - Aug. 2026

MEINE ROLLE

Weiterentwicklung, Design, Umsetzung & Betreuung

TOOLS

Figma, Storyblok

01 AUSGANGSLAGE

Als ich bei stromee anfing, bestand die Website aus der Hauptseite, wenigen Landingpages und dem alten Marktplatz. Mit jedem neuen Produkt und jeder neuen Zielgruppe wuchsen die Anforderungen: Gas, Wärmestrom, Business-Tarife und Kooperationen brauchten eigene Seiten, teilweise mit neuen Tarifrechnern, wir wollten uns uns uns Produkte vorstellen, für Karriere-Interessierte eine Karriere-Seite erstellen und viele weitere Anforderungen.

Die Website musste deshalb so aufgebaut sein, dass sie schnell und einheitlich mitwachsen kann.

Dafür habe ich die Website laufend um neue Komponenten erweitert. Den Marktplatz habe ich überarbeitet und neu gestaltet. Außerdem habe ich auf Basis der bestehenden Illustrationen Neue erstellt und ein eigenes Icon-System gestaltet und eingeführt.

Landingpage System

Icon System

Marktplatz

02 LANDINGPAGE SYSTEM

Die Landingpages entstehen aus einem Baukasten in Storyblok. Er besteht aus Einzel- und Doppelsections, die sich frei kombinieren lassen. Für neue Produkte und Aktionen habe ich die Landingpages auf Basis dieser Vorlage gebaut. So ließen sich neue Seiten schnell und einheitlich umsetzen. Für Seiten mit abweichenden Ansprüchen, habe ich das System erweitert und angepasst. Das zeigt der nächste Abschnitt.

Mainpage & Tarif Landingapges:

Auf der Hauptseite lernen Besucher*innen stromee kennen: was hinter dem Konzept steckt, wofür stromee steht und welche Produkte es gibt. Wer sich für ein Produkt interessiert, kommt auf die passende Tarif-Landingpage. Dort wird der Tarif vorgestellt und kann direkt abgeschlossen werden.

Landingapges:

Für die Standard-Landingpages habe ich einen einheitlichen Header gestaltet. Dazu habe ich passende Illustrationen erstellt, die auf den vorhandenen Illustrationen aufbauen.

stromee Business:

Für stromee Gewerbe sollte der Kern von stromee erhalten bleiben. Gleichzeitig musste der Auftritt zu den Erwartungen von Geschäftskund*innen passen. Ich habe deshalb eine reduziertere Variante entwickelt: zurückhaltendere Farben, keine Illustrationen und Icons, die auf den neuen Kontext angepasst sind. Damit das neue Erscheinungsbild auf allen Seiten einheitlich umgesetzt wird, habe ich eigene Design-Guidelines für den Gewerbebereich erstellt.

Von der Gewerbe-Seite aus führt ein Absprung in eine eigene Tarifauswahl.Für Gewerbekunden sollte es die Möglichkeit geben, Kombi-Tarife abzuschließen. Entsprechend habe ich dafür einen neuen Abschluss-Funnel gestaltet..

03 PARTNERDESIGN

Ein System, mehrere Marken

Für Partnerschaften wie die mit dem Fußballverein Hertha BSC habe ich das Grundgerüst von stromee an das Design des Partners angepasst. Das gilt für die Partner-Landingpages und auch für den Marktplatz. Aufbau und Funktionen bleiben gleich, Farben und Look kommen vom Partner. So entsteht für jede Partnerschaft ohne viel Aufwand ein eigener Auftritt.

04 ICONS

VORHER

Die bisherigen Icons waren über die Zeit für einzelne Landingpages entstanden. Entsprechend unterschiedlich sahen sie aus: Strichstärken, Formen und Farben passten oft nicht zusammen, und eine gemeinsame Designsprache war nicht erkennbar.

NACHHER: EIN ICON-DESIGNSYSTEM

Ich habe ein Icon-Designsystem entwickelt, das der gesamten Website eine einheitliche Designsprache gibt.

Je nach Aufgabe gibt es vier Arten von Icons:

Sales Icons vermitteln die Kernversprechen von stromee, zum Beispiel nachhaltig, fair und innovativ. Ein grüner Kreis rahmt sie ein.
Simple Icons unterstützen Inhalte visuell, etwa in Navigation, FAQ oder Downloads. Sie sind reduziert und haben keinen Farbakzent.
Prozess Icons erklären Abläufe Schritt für Schritt. Sie sind detaillierter und illustrativ. Die farbige Version ist für stromee B2C gedacht, die monochrome für Druck und stromee Gewerbe.
Produkt Icons zeigen auf einen Blick, um welches Produkt es geht, zum Beispiel Strom oder Gas.

Die Guidelines regeln Größen, Strichstärken, Abstände und die Verwendung auf hellen und dunklen Hintergründen. Do’s und Don’ts helfen zusätzlich. So bleiben die Icons überall einheitlich, auch wenn andere neue Icons erstellen.

05 MARKTPLATZ

Der Marktplatz ist das Alleinstellungsmerkmal von stromee: Er macht Strom erlebbar und gibt jeder Kilowattstunde ein Gesicht.

Das alte Design wurde dem nicht gerecht: Die Kacheln waren überladen, führten zu Verständnisproblemen und funktionierten nicht für jeden Erzeuger gleich gut.

Ich habe die Kacheln deshalb neu gestaltet und für jeden Erzeuger eine eigene Detailseite entworfen. Kund*innen können nach Energieart filtern und finden über die Karte Erzeuger in ihrer Nähe. Dreht man eine Kachel um, sieht man Preis- und Tarifdetails, ohne die Übersicht zu verlassen. Auf der Detailseite lernt man schließlich die Menschen hinter der Anlage kennen.

ALTES KACHELDESIGN: SCHWÄCHEN

Zu viel klappt auf:

Nicht nur die Kachel selbst wechselt die Ansicht, auch innerhalb der Kachel öffnen und schließen sich Bereiche. Man verliert schnell den Überblick, wo man gerade ist.

Tag liegt auf dem Foto:

Energieart und Adresse sitzen direkt auf dem Erzeugerbild und verdecken je nach Motiv wichtige Teile des Bildes.

Daten wiederholen sich:

Arbeits- und Grundpreis tauchen mehrfach auf, das macht die Kachel voller als nötig.

Zu wenig Raum für den Erzeuger:

Die Infos zum Erzeuger sind in die Kachel gequetscht. Dabei geht es gerade darum, ihn kennenzulernen und sich deshalb für ihn zu entscheiden. Dafür braucht es mehr Platz.

NEUES MARKTPLATZDESIGN

Neues Kacheldesign:

Kachel drehnt sich nur zur Rück- bzw. Vorderseite
Preiszusammen-setzung wird klar erklärt
Tag für Ort & Energieart überdeckt nichts Wichtiges auf dem Produzentenfoto

Marktplatz und Detailseite des Erzeugers sind getrennt: Auf einer eigenen Detailseite können Interessierte ihren Erzeuger mit vielen Informationen kennenlernen und so noch bewusster auswählen.