Produktdesign für ein CIM-System für Stadtwerke und Energieversorger

Ein Customer-Interaction-Management-Tool für Stadtwerke und Energieversorger

intellivend ist ein Customer-Interaction-Management-Tool (CIM) der KMH, das sich an Stadtwerke und Energieversorger richtet. Statt klassischer Next Best Actions setzt intellivend auf sogenannte Interaction Opportunities, im Folgenden als Vertriebsaufgaben bezeichnet. Dabei handelt es sich um datenbasierte Handlungsempfehlungen, die Vertriebs- und Serviceteams dabei unterstützen, aus jeder Kundeninteraktion den größtmöglichen Mehrwert herauszuholen. Das reicht von der Vertragsverlängerung über Cross- und Upselling bis hin zur Kundenbindung.

In meiner Rolle als UI/UX-Designerin habe ich bei intellivend zunächst einen Styleguide aufgesetzt und parallel erste Produktideen in Form von Skizzen und Mockups entwickelt. Mit der ersten Vision für das Produkt kam die Umsetzung unserer Vermarktungswebseite als weiterer Aufgabenbereich hinzu. Mit wachsender Erfahrung verlagerte sich mein Fokus zunehmend in Richtung UX, ich blickte kritischer auf unser Produkt und wendete erste Nutzerforschungsmethoden an.

Die größte Herausforderung dabei war gerade die Anfangszeit. Für mich war die Idee hinter intellivend zu Beginn noch nicht ausreichend greifbar. Vor der eigentlichen Designarbeit musste ich deshalb zunächst ein grundlegendes Verständnis dafür entwickeln, wie die künftigen Nutzer:innen arbeiten und welchen Zweck das Produkt erfüllen soll. Ohne dieses Verständnis lässt sich eine Idee im Team nur schwer konsequent umsetzen. Gleichzeitig lief die Produktentwicklung von Anfang an in Sprints, sodass meine Entwürfe zeitgleich mit der Entwicklung entstanden. Zum damaligen Zeitpunkt stand für uns als kleines Team im Vordergrund, möglichst schnell ein funktionierendes MVP an den Start zu bringen. Hinzu kam, dass wir noch keine Nutzer:innen hatten und zunächst die Vermarktung im Vordergrund stand, um erste Kunden zu gewinnen.

Erst 2025 konnte ich erste Nutzerbeobachtungen durchführen und das Produkt dadurch deutlich besser verstehen. Parallel dazu habe ich mit einem berufsbegleitenden UX-Studium begonnen und mich erfolgreich um einen Platz im Mentoring-Programm der German UPA beworben. So habe ich mir das nötige theoretische Wissen weitgehend eigenständig angeeignet und dadurch zunehmend kritischer auf Design und Features geblickt, im Ergebnis auch mit spürbar weniger Korrekturschleifen.

Ein besonders aufschlussreiches Learning aus diesen ersten Beobachtungen aus 2026 betraf ein Feature, bei dem ich mit einer Animation die Aufmerksamkeit der Agent:innen gezielt auf eine bestimmte Information lenken wollte. In der Beobachtung zeigte sich jedoch, dass eine Animation zur Aufmerksamkeitslenkung den Workflow der Agent:innen im laufenden Kundengespräch eher gestört hätte. Ich habe die Animation daraufhin wieder entfernt. Für mich war dieses Erlebnis einer der Momente, die mir nach mehreren Jahren im Produktdesign klar gemacht haben, warum ich auf Nutzerforschung nicht mehr verzichten möchte: Ohne den direkten Kontakt zu den tatsächlichen Nutzer:innen bleibt jede Designentscheidung eine Annahme, die sich im Zweifel nicht nur als teure Fehlinvestition herausstellen kann, sondern auch das Produkt für Kund:innen ineffizient oder unbrauchbar macht, selbst wenn sie auf den ersten Blick gut durchdacht wirkt.

Design und Entwicklung einer Webseite zur Vermarktung

Nachdem die ersten Designentwürfe standen, ging es als Nächstes darum, eine eigene Marke für intellivend aufzubauen. Um überhaupt erste Nutzer:innen zu gewinnen, musste dafür zunächst kommuniziert werden, was intellivend ist und wofür es steht.

In enger Zusammenarbeit mit dem Marketing entwickelte ich dafür zunächst ein Designsystem für intellivend. Bei der Farbgebung entschied ich mich für eine Kombination aus Dunkelblau und einem helleren Blau, ergänzt um Grauabstufungen. Ziel war ein sachlicher, professioneller Auftritt, der bei Stadtwerken und Energieversorgern als seriösem Zielpublikum Vertrauen schafft.

Darauf aufbauend entstand die Webseite von intellivend. Sie sollte vor allem eine schnelle Landingpage sein, um intellivend auf Konferenzen und Messen bewerben zu können. Umgesetzt habe ich sie auf Basis desselben Techstacks wie die anderen Webseiten, die ich im Rahmen der KMH erstellt habe. Zusätzlich habe ich im WordPress-Child-Theme eine eigene CSS-Erweiterung implementiert, über die sich ein HubSpot-Formular per Button-Klick seitlich ausklappen lässt, eine Interaktion, die sich mit WordPress-Bordmitteln allein nicht abbilden ließ.

Die Vermarktungsstrategie für intellivend entwickelt sich seitdem weiter: Ab 2026 wird die eigenständige Webseite aufgelöst, das Produkt wird künftig direkt über die Hauptwebseite der KMH GmbH vermarktet.

Design der intellivend-Sidebar von 2024 bis 2026

Die Sidebar für Agent:innen war von Anfang an ein zentraler Bestandteil von intellivend. Sie begleitet Vertriebs- und Serviceagent:innen direkt während des Kundengesprächs. Dafür wird zunächst über die Kundensuche der passende Kunde aufgerufen, woraufhin die Sidebar dessen Kundendaten sowie die offenen Vertriebsaufgaben als Aufgabenliste anzeigt, jeweils nach Kategorie wie Sale, Insight oder Lead gekennzeichnet.

Zu jeder Aufgabe kann die Agentin oder der Agent direkt in der Sidebar zusätzliche Informationen erfassen, etwa das Ergebnis eines Gesprächs oder weitere Kundendetails, und die Aufgabe anschließend als erfolgreich, erfolglos oder ohne Ansprache abschließen. Aufgaben, die nicht mehr relevant sind, lassen sich zudem gezielt abqualifizieren, sodass die Liste für die nächste Kundeninteraktion übersichtlich bleibt.

Die Sidebar habe ich über die gesamte Projektlaufzeit hinweg iterativ weiterentwickelt. Im Vergleich zwischen dem allerersten Entwurf von 2024 und dem aktuellen Stand von 2026 lässt sich der Fortschritt gut nachvollziehen, sowohl im Feature-Umfang als auch darin, wie ich mittlerweile Designprinzipien wie Gruppierung, Hierarchie und Farbgebung gezielter einsetze.

Im Vergleich zeigen sich unter anderem folgende Verbesserungen:

• Konsistente Farbgebung je Kategorie (Sale, Insight, Lead) statt einzelner bunter Badges ohne System, für eine klarere visuelle Hierarchie und eine wiedererkennbarere Marke.
• Aufgaben nach Kategorie gruppiert mit eigener Sektionsüberschrift, Icon, Farbe und Zähler, um auf einen Blick zu erkennen, welche Vertriebsaufgaben zusammengehören.
• Reduzierte Rahmen- und Icon-Strichstärken sowie konsistentere Schriftgrößen und gezielter eingesetzte Hintergrundfarben, um wichtige Informationen stärker hervorzuheben.
• Tab-Navigation zwischen verfügbaren und bereits erfassten Aufgaben, um bereits qualifizierte oder erledigte Aufgaben auszublenden und die kognitive Last beim Bearbeiten zu senken.
• Eigene Detailansicht mit klarer Klickstrecke statt eines inline ausklappenden Formulars, für sichtbareren Fortschritt und weniger Informationen, die gleichzeitig verarbeitet werden müssen.
• Neues Feature Tarifvergleich, mit dem Agent:innen direkt in der Sidebar den aktuellen Tarif eines Kunden mit günstigeren internen oder marktüblichen Alternativen vergleichen können, um im Gespräch besser beraten zu können.
• Stärkerer Fokus auf Microcopy, um Aktionen sinnvoll zu beschreiben und Agent:innen leichter durch die Anwendung zu navigieren.

Als alleinige Designerin im Unternehmen musste ich über mehrere Produkte hinweg effizient bleiben und trotzdem Konsistenz sicherstellen. Anforderungen und Designentscheidungen habe ich deshalb über User Stories und Design-Spezifikationen direkt in Tickets dokumentiert und anschließend mit KI-Unterstützung umgesetzt, so wie beim oben gezeigten aktuellen Stand mit dem KI-Tool Lovable. Dabei musste ich schnell lernen, klar zu kommunizieren, was aus einem KI-Prototyp tatsächlich übernommen werden soll, sonst werden schnell ungeplante Details mit übernommen.

Eine Hürde dabei blieb allerdings, dass die Entwicklung oft keinen Einblick in den generierten Code hatte und dieser nicht immer zu unserem bestehenden Techstack und Designsystem passte, was einzelne Dinge in der Umsetzung erschwerte. Inzwischen prototype ich deshalb direkt in Claude Code. Weil ich damit nur mit tatsächlich vorhandenen Komponenten arbeiten kann, sind meine Prototypen von Anfang an nah am technisch Umsetzbaren, was die Übergabe an die Entwicklung spürbar vereinfacht hat.

Im aktuellen Stand ist außerdem ein pulsierender Ring zu sehen, das Standbild der Animation, über die ich weiter oben bereits gesprochen habe. Ähnlich verhielt es sich mit einer weiteren Idee zur Motivationsförderung, etwa einer kleinen Konfetti-Animation beim Abschließen einer Aufgabe, die grundsätzlich depriorisiert wurde. Erst in Beobachtungen der Agent:innen im Arbeitsalltag bestätigte sich die Depriorisierung. Agent:innen haben kaum Zeit für Animationen, ihre eigentliche Motivation liegt im Vertragsabschluss und der eigenen Provision, nicht in spielerischen Elementen. Ohne die Beobachtungen hätten wir vermutlich Zeit in ein Feature investiert, das im Kundengespräch mehr gestört als geholfen hätte.

Ein Einblick in meine Arbeitsweise im intellivend-Cockpit

Neben der Sidebar für die Agent:innen umfasst intellivend außerdem ein Cockpit für Vertriebsmanager:innen, über das sich unter anderem Ziele, Kataloge, Nutzer:innen und Rollen verwalten lassen. Was ich hier zeige, ist eine bewusste Auswahl, nicht die vollständige Dokumentation meiner Arbeit daran. Für die Klickstrecken im Cockpit habe ich meine Prototypen zunächst in Figma gebaut. Bei komplexeren Sachverhalten habe ich die Klickstrecke zusätzlich in einem Raster angeordnet, horizontal für die verschiedenen Use Cases, vertikal darunter die einzelnen Schritte beziehungsweise Aktionen innerhalb eines Ablaufs. Ein Beispiel dafür zeigt der folgende Screenshot, aus einem Bereich, in dem Vertriebsmanager:innen komplexe Regeln festlegen, nach denen Agent:innen Kund:innen ansprechen sollen.

Eine meiner liebsten Aufgaben ist das Interface Inventory, bei dem eine Anwendung systematisch nach ihren Komponenten durchsucht und dokumentiert wird. Diesen Ansatz hatte ich bereits bei blueplant genutzt, um Inkonsistenzen im UI ausfindig zu machen. Bei intellivend habe ich damit gezielt alle im Produkt verwendeten Modals erfasst. Für jedes habe ich mir die Frage gestellt, ob ein Modal an dieser Stelle überhaupt Sinn ergibt oder ob eine andere Lösung, etwa eine eigene Detailseite, treffender wäre, und daraus abgeleitet, welche Modals ich überarbeiten muss, welche verworfen werden und welche vertagt sind.

Ein Interface Inventory kann ich grundsätzlich jedem empfehlen, der eine Anwendung konsistenter gestalten oder gezielt Inkonsistenzen ausfindig machen möchte. Das eigene Zusammenstellen von Screenshots liefert dabei einen sehr direkten visuellen Überblick über das, was tatsächlich vorhanden ist, verglichen mit einer reinen Liste von Komponenten oder URLs. Heute lässt sich dieser Schritt allerdings deutlich schneller mit KI-Tools wie Claude Code automatisieren, die eine Anwendung selbstständig nach Komponenten durchsuchen können.

Je nach Einsatzkontext berücksichtige ich in meinen Entwürfen auch responsive Anwendungsfälle, etwa bei der Login-Maske von intellivend. Diese habe ich für mehrere responsive Auflösungen gestaltet, von der vollformatigen Darstellung auf Ultra-Wide- und Full-HD-Monitoren bis hin zum sehr kleinen Login-Widget. Im Vergleich zeigen sich unter anderem folgende Entscheidungen:

• Keine zusätzlichen Pflichtfeld-Kennzeichnungen, um die Login-Maske nicht unnötig zu überladen – dass E-Mail-Adresse und Passwort auszufüllen sind, ist ohnehin klar.
• "Passwort vergessen?" klein und unterhalb des "Anmelden"-Buttons platziert, statt direkt neben dem Passwort-Label, um dem gängigeren mentalen Modell einer Login-Maske zu entsprechen und die primäre Aktion nicht zu verwässern.
• Keine "Angemeldet bleiben"-Funktion, um aktuell unnötigen Aufwand zu vermeiden – sinnvoll wird sie erst, wenn Nutzer:innen so lange in der Anwendung bleiben, dass ein automatischer Logout den Workflow stört.
• Kompaktes Login-Widget als kleinste Auflösung, um intellivend auch mit sehr wenig verfügbarem Platz in ein anderes System einbinden zu können, etwa ein CRM-System.

Darstellungen auf Ultra-Wide- und Full-HD-Monitoren sowie in der schmalen Sidebar-Einbindung und im kompakten Login-Widget. Die Illustrationen stammen von Storyset.

Beim allerersten Entwurf der Login-Maske hatte ich mich für eine Formensprache aus zusammenlaufenden Zacken und Punkten entschieden, in etwa angelehnt an vernetzte Neuronen, um auf die Intelligenz hinter den Empfehlungen von intellivend anzuspielen. Das ursprünglich sehr helle, kräftige Blau haben wir später unter anderem aus Gründen der Barrierefreiheit auf ein dunkleres Blau umgestellt, für mehr Kontrast zwischen Text und Hintergrund. Von der dynamischen Formensprache mit den Zacken habe ich mich in der Zwischenzeit gelöst, da sie nicht zur abgerundeten Bildmarke von intellivend passte.

Redesign der Zielpriorisierung

Ein Beispiel meiner Arbeit im Rahmen der laufenden Feature-Optimierung bei intellivend ist die Zielpriorisierung. Vertriebsmanager:innen können darin eigene Ziele anlegen und priorisieren, die festlegen, welche Vertriebsaufgabe den Agent:innen jeweils als Nächstes vorgeschlagen wird. Über eine Simulation lässt sich vorab prüfen, wie viele Kundendatensätze von einer Priorisierung betroffen wären und wie häufig Agent:innen ein Ziel voraussichtlich ansprechen würden, bevor die Einstellung tatsächlich übernommen wird.

Beim Redesign dieser Ansicht ging es mir bewusst nicht darum, alles neu zu erfinden, sondern die bestehende Lösung an mehreren Stellen gezielt zu verbessern. Im Vergleich zeigen sich unter anderem folgende Verbesserungen:

• Handle aus sechs Punkten statt Linien für das Drag-and-Drop der Priorität, um dem mentalen Modell der Nutzenden für diese Funktion zu entsprechen und die Bedienung dadurch eindeutiger zu machen.
• Dezentes X statt auffälligem, rotem Mülleimer-Icon zum Entfernen eines Ziels, da ein Ziel ohnehin erst beim Speichern endgültig entfernt wird und der rote Mülleimer optisch mehr Aufmerksamkeit auf sich zog, als die Aktion an dieser Stelle verdient.
• Gleichmäßige Spaltenabstände, damit das Auge beim Scannen der Tabelle weniger zwischen den Spalten springen muss.
• Farbe und Icon der Zeile ändern sich unmittelbar, wenn die Priorität eines Ziels verändert wird.
• Neutrales Info-Icon statt buntem Warndreieck, da es sich bei den Hinweisen inhaltlich um reine Informationen handelt, nicht um Fehler oder Warnungen.
• Prominenter Plus-Button statt separatem Text-Button, direkt dort platziert, wo ein neues Ziel tatsächlich einsortiert wird, wodurch sich eine Redundanz im Layout auflöst.
• Neue Filterung als Button-Gruppe, mit der sich die zuvor untereinander dargestellten Kategorien jetzt einzeln in eigenen Ansichten aufrufen lassen, was Scroll-Aufwand und kognitive Last beim Bearbeiten reduziert.
• Dauerhaft sichtbarer Simulations-Hinweis, solange eine Simulation möglich beziehungsweise noch nicht durchgeführt wurde, damit vor dem Speichern klar erkennbar ist, dass sich eine Priorisierung erst simulieren lässt.
• Fortschrittsbalken und animierte Skeletons während der Simulation, damit Nutzer:innen während der Wartezeit laufend über den Status des Systems informiert sind.

E-Mail-Templates fürs Onboarding

Für den Onboarding-Prozess von intellivend habe ich außerdem die transaktionalen E-Mail-Templates gestaltet, unter anderem die Willkommens-Mail beim Anlegen eines neuen Benutzerkontos sowie die E-Mail zum Zurücksetzen des Passworts.

Dabei traf ich folgende Designentscheidungen:

• Illustrationen passend zum jeweiligen Kontext der E-Mail, um schnell zu visualisieren, worum es geht – zwei Personen, die sich gegenseitig einen Anstieg hochhelfen, für die Willkommens-Mail als Symbol dafür, dass intellivend Vertriebsmanager:innen dabei unterstützt, ihren Erfolg nach oben zu bringen, sowie ein Schloss mit Passwort-Formular für die E-Mail zum Zurücksetzen des Passworts.
• Login-Button ergänzt die Zugangsdaten automatisch in der URL, damit beim Login nichts manuell eingetippt werden muss.
• Zugangsdaten in der E-Mail selbst dienen nur der Dokumentation, etwa falls man das Passwort im Nachgang ändern möchte.
• Link zum Zurücksetzen des Passworts nur 60 Minuten gültig, aus Sicherheitsgründen.

Die Mockups dafür habe ich in Figma gestaltet und dabei als Grundlage ein Outlook-E-Mail-Template aus der Figma Community verwendet, ebenso wie die Illustrationen von Storyset.

Jahresziele und mein Rückblick auf intellivend

Für dieses Jahr gab es im Team mehrere Jahresziele, mit denen wir UX als Disziplin stärker verankern und unsere Arbeitsweise datenbasierter gestalten wollten.

UX-Sichtbarkeit stärken: Da ich die meisten unserer anderen Produkte im Jahr 2026 nur noch beratend betreute, war es dem Team wichtig, das Verständnis für UX auch über unser Team hinaus im Unternehmen zu stärken. Dafür habe ich Workshops gehalten, in denen ich den menschzentrierten Gestaltungsprozess vorgestellt habe, mit jeweils einer Stunde Zeit für die Grundlagen. Um zu sehen, ob das Vermittelte ankommt, habe ich vorher und nachher jeweils eine kurze interaktive Umfrage durchgeführt, in der die Teilnehmenden ihre Einschätzung auf einer Skala von 1 bis 10 abgeben konnten. Diese quantitative Erhebung sollte mir helfen, mit zunehmender Anzahl an Workshops Vergleiche über die Zeit zu ziehen.

Designprinzipien etablieren: Damit Designentscheidungen im Team künftig auf gemeinsam festgelegten, nutzungsbasierten Prinzipien beruhen statt auf Einzelmeinungen, habe ich drei Workshops zu Designprinzipien durchgeführt, unternehmensweit für unsere Hauptprodukte. Wichtig war mir dabei zu vermitteln, dass Designprinzipien wie Personas kein einmaliges Ergebnis sind, sondern regelmäßig überprüft und iterativ angepasst werden müssen: Zielgruppe und Nutzung verändern sich, wodurch einmal festgelegte Prinzipien sonst schnell nicht mehr zutreffen oder sogar gegenteilig wirken können.

Nutzungsmetriken einführen: Um Entscheidungen künftig stärker auf tatsächliche Nutzungsdaten stützen zu können, war die Einführung von Nutzungsmetriken ein weiteres Jahresziel, insbesondere für intellivend als unser eigenes Produkt. Zur Auswahl standen auch Google Analytics und Microsoft Clarity, entschieden haben wir uns für PostHog, aufgrund der Datenschutzkonformität sowie der Möglichkeit, Buttons gezielt mit Events zu versehen und darüber hinaus weiterführende UX-Methoden wie Session Recordings oder A/B-Tests zu nutzen, was bei den anderen Tools nicht in diesem Umfang gegeben gewesen wäre. Neugierig geworden, habe ich mich bereits vor der Implementierung privat mit PostHog eingearbeitet und es direkt in mein eigenes Portfolio sowie meine Projekte eingebunden. Die ersten Erkenntnisse daraus haben mir die Augen geöffnet.

Nutzerforschung ausbauen: Um durch mehr Kontext Kommunikationswege zu verkürzen und Designentscheidungen besser begründen zu können, habe ich dieses Jahr verstärkt Nutzerforschung für intellivend betrieben. Dabei geholfen haben kontextuelle Beobachtungen, Usability-Tests sowie geführte Interviews mit Agent:innen zu unseren Designentwürfen. Aufschlussreich war dabei vor allem, wie wichtig ablenkungsfreies, schnell bedienbares Design ist, wenn Agent:innen in wenigen Minuten am Telefon beraten und jede Sekunde zählt.

Rückblickend war intellivend für mich das Produkt, an dem ich mich am stärksten von der reinen UI-Gestaltung hin zu einer nutzerzentrierten Arbeitsweise entwickelt habe, mit allen Umwegen, die dazugehören. Genau diese Entwicklung, vom allerersten Login-Entwurf bis zur heutigen Sidebar, zeigt für mich am deutlichsten, wie viel ich in den vergangenen zwei Jahren dazugelernt habe.

Wenn dir diese Referenz gefallen hat und du jemanden mit genau diesen Fähigkeiten suchst, melde dich gerne bei mir, ob als Festanstellung oder im Rahmen einer freiberuflichen Zusammenarbeit.