Gestaltung & Zusammenarbeit
Figma
Foundations, Komponenten und Produktansichten als gemeinsamer Arbeitsraum.
- Oberflächen und Abläufe ausarbeiten
- Varianten gemeinsam besprechen
- Feedback aus dem Team einbeziehen
01 Der Anfang
Weinbestände digital führen.
Ein nutzbares erstes Produkt, bevor der gesamte Funktionsumfang feststand.
Am Anfang gab es keine bestehende Anwendung, die wir überarbeiten konnten. Ausgangspunkt war die Erfahrung, dass viele Weinkeller mit Excel gepflegt wurden. Wir wollten ein Werkzeug entwickeln, das zu den Aufgaben von Sommeliers passt.
Die erste Version konzentrierte sich auf die Bestandsführung: Weine anlegen und bearbeiten, Preise erfassen, Produkte suchen und Flaschen ausbuchen. Die Suche gehörte von Anfang an dazu.
Noch bevor wir eine Inventurfunktion entwickelt hatten, arbeiteten erste Kunden mit dem Produkt. Das gab uns eine Grundlage, um die nächsten Aufgaben aus dem tatsächlichen Betrieb abzuleiten.
Unsere Zusammenarbeit
Mein Mitgründer
Kundenkontakt, Weinwissen und Feedback aus den Betrieben
Mein Beitrag
UX-Konzeption, Moderation und Ausarbeitung der Gestaltung
Gemeinsam
Produktideen diskutieren und Lösungen weiterentwickeln
02 Aus Kundenfeedback
Den gesamten Getränkebestand
im Blick behalten.
Die Anforderungen der Betriebe erweiterten den ursprünglichen Produktumfang.
Das frühe Feedback zeigte, wie stark sich ein professioneller Betrieb vom privaten Weinkeller unterscheidet. Verkäufe laufen über die Kasse. Einzelne Flaschen von Hand auszubuchen, bildet diesen Ablauf nur teilweise ab. Kassenberichte wurden damit zu einer wichtigen Frage für die weitere Produktentwicklung.
Andere Rückmeldungen waren sehr direkt: Warum lassen sich nur Weine verwalten – und keine Gins oder anderen Getränke? Wir öffneten poolinq für den gesamten Getränkebestand. Dazu kamen Listen, Auswertungen und die Inventur.
Für die Betriebe zählte auch, welche Waren eingegangen waren und welchen Wert ihr aktueller Bestand hatte. Diese Anforderungen flossen über meinen Mitgründer in unsere Arbeit ein. Ich übersetzte sie mit ihm in die Abläufe und Oberflächen von Core.
Was sich veränderte
Aus der digitalen Weinliste wurde eine Anwendung für die laufende Bestandsarbeit – mit Informationen, die auch für Restaurantleitung und Hotelbetrieb relevant sind.
03 poolinq Drop
Rechnungsdaten in den
Bestand übernehmen.
Ein eigener Zugang für eine wiederkehrende Aufgabe.
Vor der KI-gestützten Rechnungserfassung mussten Kunden ihre Wareneingänge manuell in poolinq eintragen. Das bedeutete viel Arbeit. Unser Ziel war, diesen wiederkehrenden Aufwand durch einen einfachen Ablauf zu ersetzen: Rechnung hochladen und die Daten in poolinq übernehmen lassen. Die KI erfasst Lieferanten, Produkte, Mengen und Einkaufspreise und synchronisiert die Daten mit dem Bestand.
Gemeinsam mit meinem Mitgründer ging ich den Wareneingang vom Beleg bis zur Bestandsbuchung durch. Daraus entwickelte ich einen Kundeneinstieg, der sich auf die notwendigen Schritte zum Erfassen und Hochladen konzentriert. Darauf aufbauend gestalteten wir Drop als erste Companion-App. Sie konzentriert sich auf das Erfassen und Hochladen von Rechnungen – am Desktop und mobil.
Der Einstieg in diesen Ablauf steht damit unabhängig von den vielen anderen Aufgaben in Core zur Verfügung. Wenn eine Produktzuordnung unklar bleibt, klärt unser Team den Fall bei Bedarf mit dem Kunden.
Rechnung hochladenRechnungsdaten per KI erkennenMit poolinq synchronisieren
04 poolinq Nano
Bestandsänderungen
mobil erfassen.
Ausbuchen, Umlagern und Korrigieren in einer fokussierten Oberfläche.
Wer eine Bestandsänderung erfassen möchte, braucht dafür nicht das gesamte Angebot aus Reporting, Inventur und Verwaltung. Mit Nano entwickelten wir deshalb eine zweite Companion-App für genau diese Aufgabe.
Die Oberfläche bündelt Produktsuche, Ausbuchen, Umlagern und Bestandskorrekturen. Der Fokus liegt auf den Handgriffen im laufenden Betrieb.
Bei Nano reicht mein Beitrag inzwischen über die Gestaltung hinaus: Mit KI-Unterstützung setze ich das Frontend selbst in Vue um. Dabei verwende ich die gemeinsamen Tokens und Storybook-Komponenten. Das Backend liegt weiterhin beim Entwicklungsteam.
Meine Verantwortung heute
Vom Figma-Design bis zur Vue-Oberfläche.
05 Designsystem
Eine gemeinsame Grundlage
für Design und Umsetzung.
Das Designsystem verbindet kollaborative Gestaltung mit tatsächlich verwendeten Komponenten.
Mit mehreren Anwendungen brauchen wir eine gemeinsame Basis, auf der wir weiterarbeiten können. Unser Designsystem besteht aus zwei zusammengehörigen Bereichen: der Gestaltung in Figma und den implementierten Komponenten in Storybook.
In Figma entwickeln wir Oberflächen gemeinsam weiter und holen Feedback aus dem Team ein. In Storybook werden die wiederverwendbaren Komponenten mit ihren Varianten und Zuständen greifbar. Nano verwendet diesen Komponentenbestand bereits in der Anwendung.
Komponenten & Anwendung
Storybook
Implementierte Vue-Komponenten als wiederverwendbare Grundlage.
- Varianten und Zustände dokumentieren
- Gemeinsame Bausteine weiterentwickeln
- Komponenten in Nano einsetzen
Figma-Design→Tokens→Storybook→Vue-Oberfläche
Mein Arbeitsweg bei Nano, unterstützt durch KI.
Konkretes Beispiel
Eine Produktkarte.
Drei Aufgaben.
Die Produktkarte ist in Storybook mit Varianten für Ausbuchen, Korrigieren und Umlagern angelegt. Nano bindet diese gemeinsame Vue-Komponente ein und verbindet sie mit den Produktdaten und Aktionen der Anwendung.
So ist das Designsystem Teil der tatsächlichen Produktumsetzung und wird dort weiterverwendet.
Mein Beitrag
Weniger manuelle Erfassung. Wiederverwendbare Komponenten.
Mit Drop entfällt die manuelle Eingabe der Rechnungspositionen im unterstützten Ablauf; unklare Zuordnungen klärt unser Team. Nano bündelt Ausbuchen, Umlagern und Korrigieren in einer eigenen Oberfläche. Für die weitere Produktentwicklung stehen gemeinsame Komponenten bereit, die Nano bereits in Vue verwendet.
Von Grund auf aufgebaut
Die UX und Gestaltung eines neuen Produkts – weiterentwickelt mit Fachwissen und Kundenfeedback, das mein Mitgründer in unsere Zusammenarbeit einbringt.
Aufgaben gezielt verteilt
Core für die umfassende Bestandsarbeit, Drop für Rechnungsuploads und Nano für schnelle Bestandsänderungen.
Eine verwendbare Basis
Ein Designsystem in Figma und Storybook sowie die KI-unterstützte Frontend-Umsetzung für Core, Drop und Nano.
Die Produktentwicklung läuft weiter. Aktuell arbeiten wir an poolinq 2 und der Weiterentwicklung der Anwendungen.
Weitere Case Studies
Eine App-Grundlage für mehrere Marken
Eine gemeinsame App-Grundlage für weitere Möbelmarken: Wiederverwendbare Komponenten und eigene Markenwerkzeuge ermöglichen die Anpassung von Design und Oberfläche.
UX und Designsystem für eine B2B-Prüfplattform
Die Entwicklung konnte auf fertigen UI-Komponenten aufbauen. Wiederkehrende Elemente mussten nicht für jeden Prüfablauf neu gestaltet werden.
UX für Datenanalyse und KI-Training
Das Produktteam erhielt zusammenhängende Abläufe für Datenarbeit und KI-Training. Ein zusätzlicher Prototyp machte einen nodebasierten Produktansatz erprobbar.