E-Mail- und Landingpage-Redesign für Online-Angebote eines norddeutschen Energieversorgers

Verbindliche Angebote nur per E-Mail statt am Telefon

Um zu verstehen, warum es diesen Prozess überhaupt braucht, lohnt sich kurz ein Blick auf den rechtlichen Hintergrund: Nach der sogenannten Bestätigungslösung (§ 7a UWG) werden Verträge, die im Rahmen von Telefonwerbung in der Energiebranche telefonisch angebahnt wurden, erst wirksam, wenn sie zusätzlich in Textform bestätigt werden. Ein am Telefon besprochenes Angebot allein reicht also nicht aus, es muss den Kund:innen zusätzlich schriftlich per E-Mail zugestellt werden, damit sie es in Ruhe prüfen und anschließend online verbindlich annehmen können.

Genau an dieser Stelle setzt dieses Projekt an: Kund:innen des Energieversorgers bekommen ihre individuellen Angebote per E-Mail zugeschickt und können diese anschließend über eine eigene Landingpage einzeln einsehen und verbindlich bestellen.

Für dieses Kundenprojekt habe ich kurz nach meinem Einstieg bei der KMH die E-Mail-Vorlagen für diesen Prozess gestaltet. Im Laufe der Jahre hat der Energieversorger sein eigenes Design-System aufgebaut, woraufhin der Wunsch aufkam, dieses auch in unserem E-Mail- und Landingpage-Design zu berücksichtigen. Für die Anpassung sollte ich schließlich die Mockups erstellen, die zur Umsetzung an unser Entwicklerteam gehen.

E-Mail-Vorlage für das Angebot

Zu Beginn nutzte ich Loveable explorativ, um auf Ideen zu kommen. Oft hilft es mir dabei genauso, zu sehen, was eindeutig nicht funktioniert, damit ich weiß, was ich besser machen kann, oder um auf Lösungen zu kommen, an die ich selbst nicht sofort gedacht hätte. Ein erster KI-Entwurf ist dabei aber meistens ohne den Blick eines Designers nicht direkt brauchbar, und auch am übergebenen Styleguide hält sich die KI in der Regel nicht zuverlässig.

Cards wurden etwa mit Border-Radius versehen, ohne dass das explizit gewünscht war, und Farben nicht wie gewünscht übernommen. Die Hierarchie ist nicht durchgehend klar erkennbar, es wirkt insgesamt sehr bunt und mit vielen unterschiedlichen Schriftgrößen und Großschreibungen überladen, sodass die eigentlich relevanten Informationen nicht sofort ins Auge fallen. Die Informationen selbst sind zudem nicht immer dort platziert, wo man sie erwarten würde, an einzelnen Stellen fehlen Buttons, die im Original vorhanden und sinnvoll sind, während an anderer Stelle Icons ohne echten Mehrwert gesetzt wurden. In meiner eigenen Umsetzung folgt die Gestaltung dagegen konsequent dem Design-System des Energieversorgers: eine klare Hierarchie und eine Farbgebung, die einzelne Abschnitte klar voneinander trennt, sodass auf einen Blick erkennbar ist, dass es sich um mehrere einzelne Angebote handelt und nicht um einen zusammenhängenden Block, ergänzt um einen klassischen CTA zur Landingpage.

Links der KI-generierte Vorschlag auf dieselbe Anforderung, rechts die von mir im Design-System des Energieversorgers umgesetzte, finale E-Mail-Vorlage.

Erinnerungs-E-Mail vor Ablauf des Angebots

Ergänzend zur ursprünglichen Angebots-E-Mail habe ich eine Erinnerungs-E-Mail gestaltet, die Kund:innen kurz vor Ablauf ihres Angebots automatisch zugeschickt wird, damit sie es rechtzeitig annehmen können. Besonders gut gefallen hat mir dabei die Idee, über einen roten Banner direkt anzuzeigen, wie viele Tage das Angebot noch gültig ist, um so ohne Umwege Dringlichkeit zu vermitteln: Es läuft bald ab, es bleibt aber noch Zeit zu handeln. Die E-Mail zeigt bewusst nur die dafür nötigen Informationen und bietet neben dem Button auch einen alternativen Link an, falls dieser im jeweiligen E-Mail-Programm nicht anklickbar ist, was in der Praxis öfter vorkommt. Gestalterisch folgt sie ansonsten demselben Stil wie die ursprüngliche Angebots-E-Mail.

Landingpage zur Angebotsübersicht

Über den Button in der E-Mail gelangen Kund:innen auf eine Landingpage im Design-System des Energieversorgers, auf der alle zugesendeten Angebote im Überblick dargestellt sind. Eine Filterung nach ausstehenden, angenommenen und abgelaufenen Angeboten sorgt dafür, dass der aktuelle Stand schnell erfassbar ist. Neben klassischen Tarifen werden hier auch sogenannte Mehrwerte angezeigt, zusätzliche Bonusleistungen, die sich durch die Kombination mehrerer Tarife ergeben können. Über „Angebot annehmen" öffnen Kund:innen zunächst die Detailinformationen zu einem einzelnen Angebot; erst von dort aus lässt es sich über „Verbindlich bestellen" tatsächlich abschließen.

Ich habe mich für eine Akkordeon-Ansicht entschieden. Rückblickend würde ich einzelne Details heute anders lösen, etwa die Werte fett hervorheben und die zugehörigen Labels dezenter halten, damit die eigentlich relevanten Informationen noch stärker hervortreten, und das Icon vor dem jeweiligen Angebot ändert sich je nach Produkt, etwa zwischen Strom und Gas.

Erfolgsmeldung nach Abschluss

Als Alternativvorschlag habe ich zunächst ein Modal erarbeitet, das sich direkt auf der Angebotsübersicht öffnet: Es bedankt sich für den Abschluss, weist aber gleichzeitig auf noch offene Angebote hin, statt Kund:innen sofort von der Übersicht wegzuführen. Sobald dagegen wirklich alle verfügbaren Angebote angenommen wurden und nichts mehr offen ist, gelangen Kund:innen stattdessen auf eine eigene Erfolgsseite, die den Abschluss bestätigt. Die Vertragsbestätigung wird ihnen zusätzlich per E-Mail zugesendet.

Links das Modal mit Hinweis auf weiterhin offene Angebote, rechts die eigene Erfolgsseite nach Abschluss aller Angebote.

Responsive Darstellung für mobile Endgeräte

Da viele Kund:innen ihre Angebote über das Smartphone öffnen, habe ich die Übersicht zusätzlich für mobile Endgeräte responsiv gestaltet. Informationen werden hier untereinander dargestellt, und die einzelnen Angebote sind als Akkordeon eingeklappt, sodass sich alle relevanten Daten weiterhin übersichtlich auf einen Blick erfassen lassen. Den Status habe ich in dieser Variante farblich im Titel hervorgehoben, um Platz zu sparen. Rückblickend betrachtet würde ich die Darstellung inzwischen anders vornehmen, da sie nicht barrierefrei ist: Menschen mit Farbenblindheit oder Sehschwäche können den Status allein über die Farbe nicht zuverlässig unterscheiden, weshalb es besser gewesen wäre, zusätzlich mit Icons oder Mustern zu arbeiten.

Meine Learnings aus dem Projekt

Mit etwas Abstand würde ich heute ein paar Dinge anders gestalten. Die Barrierefreiheit der Status-Kennzeichnung ist ein Beispiel dafür, aber auch die Frage, wie ich Status grundsätzlich kennzeichnen würde, oder ob ich primäre und sekundäre Buttons stärker voneinander unterscheiden sollte. "Angebotsseite schließen" ist beispielsweise eher eine sekundäre Handlung und keine primäre Aktion, weshalb ich sie im Nachhinein nicht mehr so stark hervorheben würde.

Auch bei den Akkordeons auf der Angebotsübersicht habe ich mich im Nachhinein gefragt, ob es sinnvoller gewesen wäre, jeweils nur ein geöffnetes Akkordeon gleichzeitig zuzulassen, damit Kund:innen immer nur das sehen, was sie gerade wirklich brauchen. Das hätte allerdings den Nachteil, dass sich mehrere Angebote dann nicht mehr so leicht miteinander vergleichen ließen, und meine Hypothese ist, dass Kund:innen genau das brauchen, um eine gute Entscheidung zu treffen. Ohne vorherige Usability-Tests beziehungsweise User Research würde ich von einer Änderung aber erst einmal abraten, denn genau hier käme der nächste Schritt ins Spiel, um diese Frage zu beantworten.

Die Kombination aus Gelb und Grau lässt sich gut einsetzen, um über starke Kontraste sowie helle, leuchtende Farben Aufmerksamkeit gezielt zu lenken. Wenn dir diese Referenz gefallen hat und du etwas Ähnliches benötigst, melde dich gerne bei mir.