Von der Idee zur fertigen Inselanlage
Ein interaktiver Planungsprozess, der Nutzer:innen Schritt für Schritt durch die Planung der eigenen, autarken Stromlösung begleitet – einfach, verständlich und zielgerichtet.
Ein interaktiver Planungsprozess, der Nutzer:innen Schritt für Schritt durch die Planung der eigenen, autarken Stromlösung begleitet – einfach, verständlich und zielgerichtet.
Damit ein digitales Tool die Nutzer:innen optimal unterstützen kann, ist es zentral, deren Bedürfnisse zu verstehen und gezielt auf diese einzugehen. In einem ersten Schritt habe ich analysiert, welche Zielgruppen das heutige Planungsformular nutzen und welche Erwartungen sie an diesen Prozess stellen. Dabei haben sich drei Hauptzielgruppen herauskristallisiert:
Nachdem ich die Zielgruppen definiert und deren Bedürfnisse, Herausforderungen und Ziele verstanden und untersucht habe, habe ich mit Hilfe einer User Journey Map den Prozess aus Sicht der Privatkund:innen visualisiert. Ziel war es, Problemstellen zu identifizieren und daraus erste Optimierungsideen abzuleiten.
Aus der Analyse der User Journey Map ergeben sich wichtige Erkenntnisse für die Konzeption. Auffällig ist vor allem die emotionale Veränderung während dem Planungsprozess: Zu Beginn herrscht Vorfreude und Motivation. Während dem Ausfüllen des Formulars sinkt diese Stimmung und Nutzer:innen fühlen sich vermehrt unsicher. Obschon der Abschluss wieder für eine Erleichterung sorgt, verbleibt insgesamt ein Gefühl der Unsicherheit.
Um den aktuellen Ablauf besser zu verstehen, habe ich den bestehenden Planungsprozess als Sitemap dargestellt. So konnte ich eine Übersicht der erforderlichen Schritte abbilden und Abhängigkeiten erkennen. Dabei zeigte sich erneut, dass Nutzer:innen zu wenig geführt werden und die Inhalte überfordern. Insbesondere führt dies bei Privatkund:innen zu Unsicherheiten und fehlerhaften Angaben, was sich auch in der User Journey Map widerspiegelte.
Basierend auf den Erkenntnissen der User Journey Map habe ich die bestehende Sitemap überarbeitet. Die Inhalte wurden vereinfacht und in kleinere Schritte unterteil, um Nutzer:innen besser durch die Planung zu leiten. Zudem wurden vermehrt Tooltips eingesetzt, um bei bestimmten Informationen mehr Kontext zu geben. Auch eine integrierte Kartenansicht soll dabei helfen, Nutzer:innen beim Erfassen ihrer Dachfläche zu unterstützen und Komplexität zu reduzieren.
Die neue Sitemap dient als Grundlage für den Aufbau des Wireframe-Prototyps. Dank der überarbeiteten Ausgangslage zeigt sich eine klare Übersicht des Prozesses. Nun geht es darum, die Struktur in ein Konzept für ein digitales Tool zu überführen. Dabei habe ich Überlegungen zur Nutzerführung, zur Informationsmenge pro Schritt sowie zur Darstellung einzelner Elemente (z. B. Erfassung der Nutzung, Verbraucher, Dachauswahl) umgesetzt. Hier war es wichtig, dass Nutzer:innen jederzeit erkennen, an welcher Stelle im Prozess sie sich befinden und wie viele Schritte noch folgen.
Um das Konzept und die Nutzerführung zu überprüfen, habe ich mit dem interaktiven Wireframe-Prototyp ein Usability-Testing durchgeführt. Dabei ging es primär darum, den neu strukturierten Prozess zu validieren, Verständnisprobleme zu erkennen und allgemeine Rückmeldungen zum Flow zu erhalten. Der Fokus lag auf der Eingabe der Stromverbraucher und dem Gesamteindruck der Nutzerführung. Die gewonnenen Erkenntnisse bildeten die Grundlage für die weitere Ausgestaltung des Prozesses und sind nachfolgend zusammengefasst:
Basierend auf den Rückmeldungen aus dem Usability-Testing wurde der Flow gezielt geschärft und überarbeitet. Einzelne Abläufe und Abhängigkeiten innerhalb des Prozesses wurden angepasst, um Nutzer:innen noch klarer und verständlicher zu begleiten. Das daraus entstandene Flussdiagramm bildet die strukturelle Grundlage für die finale Ausarbeitung des Designs. Es zeigt den gesamten Ablauf mit allen aufbauenden und zusammenhängenden Schritten.
Die visuelle Gestaltung des Planungsprozesses orientiert sich an einer reduzierten, zurückhaltenden und sachlichen Designsprache. Ziel ist es, komplexe Inhalte so darzustellen, dass sie auch für Nutzer:innen mit wenig Vorwissen verständlich sind.
Grundlage dafür bildet ein Designsystem mit definierten Farben, Schriften und wiederverwendbaren Komponenten. Dazu kommen passende Icons und Illustrationen, um Nutzer:innen auch visuell zu unterstützen.
Die gestalterischen Entscheidungen basieren auf psychologischen Designprinzipien, auf die ich nachfolgend eingehen möchte:
Um die Design-Entscheidungen fundiert und nachvollziehbar zu treffen, wurden Designprinzipien nach Laws of UX von Jon Yablonski (2025) in den Gestaltungsprozess einbezogen. Zudem soll sich die Gestaltung an den Bedürfnissen der Nutzer:innen ausrichten und sie bestmöglich im Planungsprozess unterstützen.
01
Nutzer:innen sehen jederzeit, wie viele Schritte noch vor ihnen liegen – durch eine deutlich sichtbare Schrittanzeige im Header. Die visuelle Hervorhebung des aktuellen Schritts unterstützt das Gefühl von Fortschritt und motiviert Nutzer:innen dazu, den Prozess vollständig abzuschliessen.
02
Die Komplexität des Planungsprozesses wurde nicht eliminiert, sondern sinnvoll verteilt. Statt alle Angaben auf einmal abzufragen, erfolgt die Eingabe schrittweise und thematisch sortiert. Die technischen Angaben zu Spannung und Leistung erscheinen nur, wenn ein spezifischer Verbraucher gewählt wurde und ist auf diesen abgestimmt.
03
Um die Entscheidungszeit zu verringern, wurden Auswahlmöglichkeiten visuell reduziert und gruppiert. Nutzer:innen sehen nur das, was für die aktuelle Entscheidung relevant ist. Bei der Auswahl von Beleuchtung entscheiden Nutzer:innen Schritt für Schritt. Durch die Aufteilung und logische Abfolge werden nur notwendige Informationen angezeigt.
Damit das Userinterface konsistent bleibt, wurde ein Designsystem entwickelt. Es umfasst Farben, Typografie, Icons, und wiederverwendbare UI-Komponenten, wie Buttons, Eingabefelder, Auswahlkarten und Slider. Die Farben wurden dabei bewusst zurückhaltend und sachlich gewählt. Das verwendete Blau erinnert an die Kollektorfläche eines Solarmoduls und der Orange-Blau-Verlauf steht symbolisch für den Sonnenaufgang. Um zusätzlich eine gute Lesbarkeit sicherzustellen wurden kontrastreiche Schriftfarben definiert.
Zur visuellen Unterstützung wurden Icons und Illustrationen erstellt. Sie stellen technische Inhalte vereinfacht dar, beispielsweise bei der Darstellung der Installationsmethoden oder der Systemkomponenten einer Inselanlage. Die Icons werden jeweils beschriftet angewendet, um Interpretationsspielraum zu vermeiden und die Orientierung zu erleichtern.
Das Ergebnis dieser Arbeit ist ein interaktiver Planungsprozess, der Nutzer:innen Schritt für Schritt durch alle relevanten Angaben führt. Die Struktur dafür basiert auf dem neu entwickelten Flussdiagramm, das aus den Erkenntnissen der Research- und Konzeptionsphase abgeleitet wurde. Der Fokus liegt dabei auf Verständlichkeit, einer klaren Nutzerführung und der gezielten Reduktion technischer Hürden.
Durch den neuen Aufbau, die visuelle Unterstützung und die Reduktion der Komplexität wird der Planungsprozess auch für Nutzer:innen mit wenig Vorwissen zugänglich – und gleichzeitig bleibt er präzise genug, um für die Offertenerstellung die notwendigen Informationen zu liefern.
Im ersten Schritt geben Nutzer:innen grundlegende Informationen zur geplanten Inselanlage an. Dazu gehören der Verwendungszweck, erste Vorstellungen zur Energieerzeugung sowie einem groben Budgetrahmen. Dieser Einstieg dient der Einordnung und schafft den Kontext für die weiteren Schritte.
Dieser Schritt klärt, wie oft und in welchen Monaten die Anlage genutzt wird. Die Betriebsdauer beeinflusst die Dimensionierung der Anlage und ist kostenrelevant für die Erstellung der Offerte. Bei der Erfassung der Angaben werden Nutzer:innen mit definierten Zeiträumen geführt.
Nutzer:innen wählen hier aus typischen Verbrauchern (z. B. Licht, Kühlschrank, Kaffeemaschine) aus oder geben eigene Geräte ein. Um die Eingabe zu erleichtern, werden passende Spannungs- und Leistungswerte angezeigt. Der Energiebedarf wird so realistisch und verständlich abgebildet und Nutzer:innen können aus den definierten Werten wählen. Die detaillierten Angaben helfen dem Anbieter ebenfalls bei der exakten Erstellung der Offerte. Zudem können Rückfragen reduziert werden.
In diesem Schritt wird die Installation der Solarmodule erfasst. Nutzer:innen geben an, wo die Module montiert werden sollen. Zusätzlich kann mittels einer integrierten Kartenansicht direkt die Dach- oder Fassadenfläche ausgewählt werden. Diese Auswahl liefert weitere, wichtige Informationen über die Ausrichtung und Neigung.
Anstatt abstrakte Zahlen abzufragen, erfolgt die Eingabe der Leitungslängen über ein visuelles Schema. Nutzer:innen sehen, welche Systemkomponenten benötigt werden und wie diese (vereinfacht) miteinander verbunden sind. Diese Darstellung erleichtert die Einschätzung der benötigten Kabellängen.
Am Ende können Nutzer:innen ergänzende Dateien oder Bilder hochladen (z. B. Skizzen, Fotos vom Standort). Danach werden die Kontaktinformationen erfasst, um eine individuelle und passende Offerte erstellen zu können. Der Abschluss enthält eine Rückmeldung, dass die Planung erfolgreich übermittelt wurde und gibt Auskunft über die nächsten Schritte.
Nutzer:innen haben die Möglichkeit, ihren aktuellen Stand zu speichern und zu einem späteren Zeitpunkt wieder abzurufen. Dies ermöglicht eine flexible Planung, insbesondere wenn noch Informationen fehlen oder Rücksprachen nötig sind. Der Zugriff erfolgt über eine persönliche Planungsnummer, die beim Speichern generiert wird. So kann der Prozess schrittweise und im eigenen Tempo abgeschlossen werden.
