Zum Inhalt springen
Zurück zur Übersicht Fallstudie · KI-Plattform (SaaS)

moin.ai HUB

Fünf Jahre komplexe KI-Technologie in bedienbare Oberflächen übersetzt.

Kunde
moin.ai (knowhere GmbH)
KI-Plattform für digitale Kundenkommunikation
Meine Rolle
UI-Design: Chatbot-Interface
und Kundenportal
Technik
Figma
Design-System, Entwickler-Handoff
Website
moin.ai
Statistik-Dashboard des moin.ai-Kundenportals auf einem Laptop-Mockup: Kanal- und Zeitraum-Filter, Kennzahlen für Unterhaltungen und Automatisierungsgrad
Das Statistik-Dashboard: Kennzahlen, die auch ohne KI-Hintergrundwissen sofort verständlich sind.
Ausgangslage

KI-Technologie, die Kunden ohne Vorwissen bedienen sollen.

moin.ai entwickelt eine Plattform, über die Unternehmen ihre Chatbots verwalten — von der Dialoglogik bis zur Auswertung. Die eigentliche Arbeit steckt dabei in der Übersetzung: Kunden ohne technisches Vorwissen sollten souverän Chatbots einrichten, auswerten und weiterentwickeln können.

Angefangen hat die Zusammenarbeit an der sichtbarsten Stelle des Produkts: beim Chatbot selbst. Für die damals neue Version habe ich sein Gesicht gestaltet — den Avatar, dem die Nutzer im Gespräch gegenübersitzen — und alles darum herum: Sprechblasen, Eingabefeld, Rahmen, das Auf- und Zugehen und die Bewegung dazwischen. Danach ist die Arbeit auf den Hub übergegangen, das Portal, in dem die Kunden von moin.ai ihre Chatbots betreiben. Dort lag über die folgenden Jahre der Schwerpunkt.

Der moin.ai-Chatbot auf einem Telefon: blauer Kopfbereich mit Avatar und dem Namen „Moini“, darunter eine Antwort mit Karten zum Durchblättern und das Eingabefeld
Die Seite des Produkts, die Besucher einer Website zu sehen bekommen: der Chatbot im Gespräch.
Aufgabe

Entwerfen, besprechen, verfeinern — Woche für Woche.

Meine Rolle im Team war die Übersetzung: Was das System können sollte, für wen und in welcher Reihenfolge, habe ich in Oberflächen verwandelt, die man ansehen, anklicken und bedienen kann. Die Produktsicht brachte die Geschäftsführung mit, gebaut hat die Entwicklung. Mein Part lag dazwischen.

Neue Anforderungen haben wir im Gespräch geklärt. Ich habe sie in Figma ausgearbeitet und meist in der Woche darauf vorgestellt, mit dem Feedback ging es in die nächste Runde. Aus diesem Rhythmus sind über fünf Jahre die Bausteine des Hubs entstanden. Vier davon, stellvertretend für viele:

  • Statistik-Dashboard

    Unterhaltungen, Automatisierungsgrad und Trends auf einen Blick — Kennzahlen, die auch ohne Data-Science-Hintergrund einleuchten.

  • Live-Chat

    Der Moment, in dem ein Mensch übernimmt — nahtlos aus dem automatisierten Gespräch heraus.

  • No-Code-Dialog-Editor

    Gesprächslogik selbst zusammenstellen, ohne eine Zeile Code zu schreiben oder Support anzurufen.

  • AI Product Advisor

    Ein Assistenzfeature, das selbst wieder KI ist — und genauso verständlich bedienbar sein musste wie der Rest.

Tablet-Mockup mit dem Demo-Onboarding des moin.ai HUB: links auf dunkelblauer Fläche der Avatar mit der Sprechblase „moin!“, rechts der Hinweis, dass typische Chatanfragen an das Unternehmen ermittelt werden
Noch ein Baustein: das Demo-Onboarding, in dem Interessenten unverbindlich einen ersten Chatbot anlegen — der Avatar begleitet sie Schritt für Schritt.
Kernstück

Fünf Jahre Design-Arbeit, komplett in Figma.

Über fünf Jahre habe ich das Frontend des Kundenportals als UI-Designer mitentwickelt — User-Flows, Wireframes, High-Fidelity-Designs, interaktive Prototypen und die Übergabe an die Entwicklung liefen alle in Figma. Die Oberflächen, mit denen Kunden von moin.ai ihre Chatbots betreiben, sind durch diesen Prozess gegangen.

Das war Arbeit an einem laufenden Softwareprodukt: Meine Entwürfe waren so weit ausgearbeitet, dass die Entwicklung direkt damit arbeiten konnte.

Übersicht „Onboarding Steps“: sechs Bildschirme des Demo-Onboardings in zwei Reihen, jeder mit Schrittnummer und Titel, vom Eintragen der Website bis zu den Zugangsdaten
Alle Schritte des Demo-Onboardings auf einer Fläche, damit der ganze Weg vor Augen steht, bevor ein einzelner Schritt ins Detail geht.
Technik

Figma macht ein Konzept sichtbar, bevor es in den Code geht.

Design-System, Komponenten, Prototypen und die Übergabe an die Entwicklung liefen alle in Figma. Der Wert lag darin, dass ein Konzept anzusehen und anzuklicken war, bevor die erste Zeile Code entstand: Schaltflächen, Zustände, Wege durch die Oberfläche — für alle Beteiligten dasselbe Bild vor Augen.

Festgelegt war dabei, was das Verhalten und die Wirkung betrifft; die letzten Feinheiten der Reinzeichnung klärte das wöchentliche Gespräch. Genau diese Arbeitsteilung hält die Distanz zwischen Entwurf und umgesetzter Oberfläche klein — wichtig bei einem Produkt, das sich so schnell weiterentwickelt wie eine KI-Plattform.

  • Figma
  • Design-System
  • Interaktive Prototypen
  • Entwickler-Handoff
  • Chatbot-Interface & Avatar
  • 5 Jahre Zusammenarbeit
Kommentierter Entwurf „Onboarding Layout“: ein Bildschirm des Demo-Onboardings in der Mitte, ringsum Anmerkungen mit Linien zu einzelnen Elementen — Fortschrittsanzeige, Schaltflächen, Farbflächen
Ein kommentierter Entwurf: Neben jedem Element steht, was es tun soll und warum. So geht der Gedanke mit in die Umsetzung.

Ein Produkt, das Ihre Kunden selbst bedienen sollen?

Je mehr ein System kann, desto mehr Arbeit steckt in der Oberfläche, die es bedienbar macht. Genau da setze ich an — im Entwurf und in der Abstimmung mit der Entwicklung. Erzählen Sie mir, was Sie vorhaben, dann sprechen wir darüber.

Projekt anfragen

post@krislue.de · +49 (0)40 55 61 48 52