STRATEGIE · UX/UI · 2026
Rechnung als Baukasten
Baukastensystem für dynamisch erstellbare Rechnungen
Mit immer mehr neuen Produkte, Partnern und Anforderungen stießen die bisherigen Rechnungen von stromee an ihre Grenzen. Sie waren nicht flexibel genug, und auch an anderen Stellen sollte sie hinsichtlich Verständlichkeit überarbeitet werden.
Ich habe die Rechnungen deshalb neu gestaltet und ein Baukastenprinzip entwickelt. Aus wiederverwendbaren Modulen entstehen Rechnungen für unterschiedliche Anforderungen, zum Beispiel für Privat, Business oder Partner. Sie lassen sich einfach anpassen und neue Anforderungen können schnell eingebaut und umgesetzt werden.
Die Module wurden in Storyblok umgesetzt und von dort aus wurden die Rechnungen als PDF-Dateien erstellt.
ZEITRAUM
Feb. 2026 - Juni 2026
MEINE ROLLE
Alleinverantwortlich für Analyse, Konzept, Strategie, Aufbereitung & Design
TOOLS
Figma, Storyblok
01 AUSGANGSLAGE
Die Rechnung ist der Touchpoint, den jede Kundin und jeder Kunde regelmäßig sieht, und gleichzeitig ein rechtlich geprägtes Dokument. Bei stromee kamen immer neue Anforderungen dazu. Die bestehende Rechnung war aber für einen einzigen Fall gebaut: Privatkundin, Strom, digital gelesen.
02 SCHWACHSTELLEN DER ALTEN RECHNUNG
Wiederverwendbarkeit
-
Hoher Wartungsaufwand für aktuelle Produkte -> Änderungen müssen für jedes Produkt einzeln übernommen werden
-
Erweiterung um weitere Produkte ebenfalls mit viel Aufwand verbunden
Druckbarkeit
-
Viel Weißraum, viele Seiten: Großer Header, großer Footer, kein Umbruch von Tabellen, kein "Nachrücken" von Inhalten
-
Hoher Tintenverbrauch durch viele farbige Flächen
Verständlichkeit
-
Berechnung teilweise nicht nachvollziehbar aufgebaut
-
Teilweise fehlende Erklärungen oder Erklärungen nicht nachvollziehbar
Beispielseiten aus dem ursprünglichen Rechnungsdesign:
03 NEUE ANFORDERUNGEN
Neue Produkte & Kundengruppen:
Icons, Verbräuche & Inhalte werden für verschiedene Produkte & Kundenarten benötigt
Partner-
Rechnungen:
Partner mit Sie-Ansprache, eigener Nummer und Kunden, die Rechnungen in Papierform erwarten
Gesetzliche
Sonderfälle:
Entlastungen wie z.B.
§ 22 EnFG müssen nur für betroffene Verträge ausgewiesen werden
04 DAS BAUKASTENSYSTEM
Statt vieler Vorlagen gibt es einen Baukasten aus Modulen und ein Regelwerk, das sie zusammensetzt.
Das Rechnungsprojekt liest für jede Rechnung die Daten aus, wählt anhand der Regeln die passenden Module und befüllt sie. Jedes Modul gehört zu einem von drei Typen.
Rechts sind alle möglichen Module der aktuellen Rechnungen visulaisiert.
Deckblatt
Damit die Rechnung so wenig komplex wie möglich bleibt, habe ich Layout-Varianten und die größten Unterschiede zwischen den Rechnungen bewusst auf das Deckblatt gelegt. Dort unterscheidet sich die Gestaltung für Privat-, Gewerbe- und Partnerkunden, dort stehen die jeweiligen Siegel, und dort werden Kundinnen und Kunden persönlich angesprochen. Außer auf dem Deckblatt gibt es eine persönliche Ansprache nur noch auf der letzten Seite. Alle Seiten dazwischen kommen ohne Ansprache aus und sind für alle Rechnungen gleich aufgebaut.
Die Module
Die Rechnung besteht aus 3 Arten von Modulen:
Feste Module
Das Modul wird in jeder Rechnung angezeigt und wird mit den Daten der jeweiligen Rechnung gefüllt.
z.B. Energiekosten, Zählerstände
Module mit Varianten
Das Modul wird immer angezeigt aber es gibt verschiedene Varianten davon. Die Regeln bestimmen, welche Varinate angezeigt wird.
z.B. Rechnungsübersicht Gutschrift vs. Nachzahlung oder SEPA vs. Selbstzahler
Optionale Module
Das Modul wird nicht standardmäßig angezeigt sondern nur, wenn die Regeln es erfordern.
z.B. Strommix, CO2-Kostenaufteilung
Header & Footer
Der Header wird ab Seite 1 auf jeder Seite der Rechnung angezeigt.
Der Footer dagegen wird nur auf dem Deckblatt angezeigt und auf den folgenden Seiten nicht mehr.
Tabellenumbrüche
Um unnötigen Weißraum zu vermeiden habe ich Regeln festgelegt, ab wie vielen Zeilen eine Tabelle umbrechen darf, wie viele Zeilen mindestens auf einer Seite stehen müssen und ab wie viel Weißraum einer Seite eine neue Tabelle noch anfangen darf.
05 DAS DECKBLATT
Allein das Deckblatt hängt von vier Merkmalen ab. Als feste Vorlagen gebaut, wären das 28 Deckblätter, die einzeln gestaltet, abgestimmt und bei jeder Textänderung nachgezogen werden müssten. Im Baukasten steuert jedes Merkmal nur den Baustein, den es betrifft.
06 SO SETZT SICH EINE RECHNUNG ZUSAMMEN
Drei Beispielrechnungen aus dem selben Baukasten.
DATEN DER RECHNUNG
Kundenart
Privat
Produkt
Strom
Saldo
Gutschrift
Vertragsstatus
In Belieferung
Zahlungsart
SEPA-Lastschrift
ANGEWENDETE REGELN
Privatkunde
→ Ansprache "Du"
Strom
→ Kopfzeile mit Strom Icon, Haushaltsvergleich mit Personenanzahl, Preiszusammensetzung, Strommix
Gutschrift
→ Auf einen Blick: "Gutschrift", Rechnungsübersicht grün
SEPA
→ Hinweis auf Erstattung per Lastschriftkonto
In Belieferung
→ Abschlag auf ersten Blick, Abschlag & Abschlagsplan
DATEN DER RECHNUNG
Kundenart
Partnerkunde
Produkt
Gas
Saldo
Nachzahlung
Vertragsstatus
Gekündigt
Zahlungsart
SEPA-Lastschrift
ANGEWENDETE REGELN
Partnerkunde
→ Ansprache "Sie" & Moin, Partner-Badge, Partnernummer
Gas
→ Kopfzeile mit Gas Icon, Haushaltsvergleich mit m², CO₂-Kostenaufteilung
Nachzahlung
→ Auf einen Blick: "Nachzahlung", Rechnungsübersicht rot
SEPA
→ Hinweis auf Einzug per Lastschrift
Gekündigt
→ Kein Abschlag auf den ersten Blick, kein Abschlagsplan
DATEN DER RECHNUNG
Kundenart
Gewerbe
Produkt
Strom
Saldo
Ausgeglichen
Vertragsstatus
In Belieferung
Zahlungsart
Selbstzahler
ANGEWENDETE REGELN
Gewerbekunde
→ Ansprache "Du", Firmenname im Adressblock
Strom
→ Kopfzeile mit Strom Icon, Preiszusammensetzung, Strommix
Ausgeglichen
→ Auf einen Blick: "Nachzahlung/Gutschrift", Rechnungsübersicht grün
Selbstzahler
→ Hinweis auf Fristen zum Abschlagbetrag überweisen
In Belieferung
→ Abschlag auf ersten Blick, Abschlag & Abschlagsplan
07 BEISPIELRECHNUNG
Komplette Beispielrechnung: Privatkunde, Strom, weiterhin in Belieferung
