Das Kundenportal für alle Leser und alle Produkte.

Konzept, Design und Prototypen für ein Projekt, das bisher getrennte Kundenbereiche und Systeme zu einem einheitlichen, konfigurierbaren Kundenportal für Print- und Digital-Kunden von 7+ Marken zusammenführt.

Das Portal: Skalierbar, konfigurierbar, Print + digitale Produkte an einem Ort.

Übersicht

Ausgangslage

Der Auftrag war, die Service-Portale für Print-Abonnements mit den Kundenbereichen der digitalen Medienmarken zu vereinen und die zugrundeliegenden Kunden- und Zahlungsdaten zu konsolidieren.

Meine Rolle

Owner für Konzept und Design. Schnittstelle zwischen Produkt, Entwicklung und den Brand-Teams der beteiligten Marken.

Methodik

Interviews mit Stakeholdern und Fachbereichen, Service Blueprints über alle Marken, iterative Prototypen mit echten Daten und Design-System-Komponenten.

Ergebnis

Ein für jede Medienmarke konfigurierbares Kundenportal, Schnittstellen für alle Datenquellen und Drittanbieter-Daten, einheitliche Weiterentwicklung, massive Entlastung für den Kundenservice.

Alles zusammen denken.

Wo bisher jede Marke ihr eigenes Kundenkonto, eigene Bezahlsysteme und Aboverwaltung hatte, sollte ein einheitliches Produkt für alle entstehen.

Verstreute Service-Bereiche sowie alle nutzerbezogenen Daten und Einstellungen sollten gebündelt werden und auch die Print-Abonnenten mit einbeziehen, die bisher ein extra Print-Abo-Portal nutzten.

Auch Bereiche für Kundenvorteile, Gewinnspiele und andere Aktionen sollten hier als Engagement-Treiber einen Platz finden.

Vorher: Getrennte Datenquellen, Überholtes Design, technische Schulden

Wie bauen wir ein Zuhause für Millionen von Abonnenten und registrierten Usern?

Als Erstes habe ich als Bestandsaufnahme Service Blueprints für alle Marken erstellt und in Workshops gemeinsam mit allen relevanten Fachbereichen eingebracht.

In Interviews mit dem Konzern-Kundenservice, Marketing und den Brand-Teams der Marken habe ich Pain Points, Anforderungen und Abhängigkeiten herausgestellt, Zahlen und Nutzerverhalten analysiert und eine erste Priorisierung gemeinsam mit dem Produktmanagement erarbeitet.

Erster Prototyp als Diskussionsgrundlage

Erste Erkenntnisse:

Print-Abonnenten suchten das alte Print-Portal hauptsächlich (über 85 %) auf, um Probleme bei der Zustellung zu reklamieren. Die Problembehandlung ist also einer der wichtigsten Flows.

Die digitalen Bezahlangebote von BILD, WELT usw. können von Print-Abonnenten nach einer Aktivierung auch genutzt werden, was vielen Abonnenten nicht bewusst war. Möglichst viele Print-Abonnenten zu Digital Subscribern zu machen ist zudem ein strategisches Ziel dieses Projekts. Daher muss die Aktivierung der Digitalangebote möglichst attraktiv, einfach und bequem sein.

Es gibt unter den Abos und digitalen Bezahlangeboten Einzelprodukte, Bundles, alle möglichen Kombinationen mit unterschiedlichen Berechtigungen. Für den Nutzer und für die Datenstruktur müssen die Berechtigungen so einheitlich, klar und simpel wie möglich dargestellt werden.

Die wichtigsten Funktionen: schnell zu finden und leicht zu bedienen.

End-to-End Ownership

  • Konzept- & Designvorstellung

    Ich stelle das Grobkonzept im Team und den Vertretern der Marken vor und entwickle einen HTML-Prototypen (zunächst low-fi) mit Claude Code, in dem man sich durch alle Funktionen klicken kann.

  • Hi-Fidelity Prototyp

    Wir entscheiden uns, die gesamte Produktentwicklung als lebendigen, iterativen Prototypen abzubilden, mit echten Produkt- und Kundendaten. Ich baue den HTML-Prototypen in einem kleinen Framework, das ich mit Claude Code entwickelt habe.

  • User Journeys & Task-Mapping

    Ich erstelle User Journeys, definiere danach die Sitemap und baue einen Switch in den Prototypen, um verschiedene Sitemaps auswählen und testen zu können.

  • User Experience Design

    Die Nutzerführung muss barrierefrei und auch Nutzern mit sehr geringem technischem Verständnis einfach zugänglich sein: Keine komplexen Patterns und Menüs, dafür simpel & selbsterklärend wie Kiosk-Design.

  • Design System & Design Tokens

    Ich konvertiere Figma Design Tokens aus dem BILD Design System, um Farben, Typographie, Icons etc. im Prototypen zu verwenden. Hieraus entstehen Konfigurationsdateien für Theme-Variablen, um ein einheitliches Format für alle Marken zu schaffen.

  • Hand-Off & Entwicklungsbegleitung

    Im ständigen Feedback-Loop mit den Developern gewährleiste ich die Machbarkeit. Meine Front-End-Komponenten aus dem Prototyp konnten 1:1 in Produktions-Komponenten weiterverwendet werden.

Ein erfolgreiches Projekt

Win-Win für Kunden und Konzern

Dank eines einheitlichen Bezahldaten- und Nutzerdaten-Pools haben wir jetzt ein zentral gemanagtes und skalierbares Kundenportal als Produkt für alle jetzigen und zukünftigen Zeitungen und Online-Angebote des Verlags.

Eine Entlastung des Kundenservices durch den effektiveren Self-Service im Kundenportal ist messbar: Weniger Anrufe zu Anfragen, die der Nutzer jetzt schnell und bequem selbst erledigen kann – dabei deutlich mehr Aktivität im Kundenportal.

Als besonders agil erweisen sich die modulare Struktur und Nutzerführung: Ein Feature hinzuzufügen oder Funktionen zu erweitern ist mit wenig Aufwand möglich.

Key Takeaway:
Eine Anwendung, die so abhängig von optimalen Flows ist, profitiert besonders von einem agilen & modular erweiterbaren Hi-Fidelity-Prototypen.

Mehr Case Studies

Conversion-optimierte Kaufabläufe für BILD, WELT, Business Insider.

Coming soon

Interaktive Formate als erfolgreicher Engagement-Treiber für alle Marken.

Coming soon

Design-Kontext für KI: Design Tokens, Code und Front-End-Komponenten.