Product Design Case Study
ERP und CRM für Unternehmen, B2B/B2C, Product Design
Update Okt. 2026: Später habe ich dieses ERP in ein codiertes, in Storybook dokumentiertes Designsystem überführt.
Über das ERP-System
Einführung
Das ERP-System Tech Harbor dient der komfortablen Steuerung großer Unternehmen, die Produkte entwickeln und mit Distributoren zusammenarbeiten. Es unterstützt Geschäftsführung, Manager, Marketing, Rechtsabteilung und Finanzfachleute im Unternehmen. Das System deckt fünf Abteilungen ab (Management, Lager, Finanzen, Recht, Marketing) und bietet zusätzlich eine eigene Oberfläche für Distributoren, insgesamt sechs Module. Es bleibt intuitiv für technikaffine Nutzer ebenso wie für Menschen, die mit neuen Technologien weniger vertraut sind. Diese Case Study zeigt, wie Nutzer ihre täglichen Aufgaben je nach Rolle erledigen.
Meine Rolle
Interface- und Product Designer.
Die Methodik umfasste Empathie für das Problem, seine Definition, Brainstorming von Lösungen, Design, Prototyping und Tests.
Meine Aufgaben
Interviews, Wireframes auf Papier und digital, Low- und High-Fidelity-Prototypen, Usability-Studien, Berücksichtigung der Barrierefreiheit und iterative Designverbesserung.
Tools
Design Engineering: Storybook · React · TypeScript · Figma Variables · Figma MCP · Claude Code · GitHub · Vercel
Research und Hypothese
Problemstellung
Das ERP-System Tech Harbor soll die Unternehmenssteuerung vereinfachen. Doch die Nutzer, überwiegend Berufstätige zwischen 22 und 65 Jahren, haben anfangs Mühe mit der Navigation, obwohl sie die Oberfläche intuitiv finden. Sie schätzen Effizienz und geistige Weiterentwicklung und haben wenig Zeit für komplizierte oder umständliche Abläufe. Wie können wir Onboarding und Navigation so verbessern, dass der Umstieg auf das System reibungslos und zeitsparend gelingt?
Aufschlüsselung des Problems
Probleme mit der Skalierbarkeit
Dem ursprünglichen ERP-System fehlte die Flexibilität für wachsende Geschäftsprozesse, wodurch es für Unternehmen mit großen Datenmengen ineffizient war.
Komplexe Abläufe mit steiler Lernkurve
Die Oberfläche war funktional, verlangte aber Eingewöhnungszeit, was die Arbeit verlangsamte und die Effizienz senkte.
Fragmentiertes Nutzererlebnis
Informationen waren über verschiedene Bereiche verstreut, was Navigation und das Gewinnen nützlicher Erkenntnisse erschwerte.
Veraltete Oberfläche mit Usability-Lücken
Das Design folgte klassischen ERP-Strukturen, was zu Usability-Problemen führte und eine flüssige, intuitive Bedienung behinderte.
Überblick der Entscheidungen
Nach dem Research und dem Erkennen der Kernprobleme wurde das Design schrittweise für die verschiedenen Abteilungen des ERP-Systems entwickelt.
Navigationsmenü für den Nutzer „Manager“.
Navigationsmenü für den Nutzer „Finanzmanager“.
Die Nutzer des ERP-Systems
Das ERP-System dient Inhabern, Führungskräften, Vertriebsteams, Juristen, Lagerleitern und Buchhaltern und sorgt für automatisierte Abläufe und reibungslose Zusammenarbeit. Auch internationale Distributoren nutzen es für den Zugriff auf Echtzeitdaten.
David, Mitinhaber eines globalen Unternehmens, sucht ein integriertes System, um Abläufe effizient zu steuern. Er schätzt schnelle Erledigung auf allen Geräten, kämpft aber mit zu großen Texten auf dem Smartphone und eingeschränkter Bearbeitung von Distributorendaten. Das zeigt, dass laufende Verbesserungen nötig sind.
CEO
„Ich nutze das ERP-System, um Finanzen und wichtige Unternehmenskennzahlen im Blick zu behalten. Es automatisiert Routineabläufe und beschleunigt Entscheidungen.“
Internationaler Jurist
„Das ERP-System vereinfacht meine Arbeit mit Rechtsdokumenten und Verträgen und sorgt für Compliance und eine effiziente Dokumentenverwaltung.“
Vertriebsmitarbeiter
„Ich nutze das ERP für Kundenbeziehungen, Deal-Tracking und Vertriebsanalysen, das macht meine Arbeit deutlich leichter.“
Lagerleiter
„Das System hilft mir, den Bestand in Echtzeit zu verfolgen, Fehler zu reduzieren und Engpässe zu vermeiden.“
Buchhalter
„Das ERP automatisiert die Finanzverwaltung und macht Ausgabenverfolgung, Rechnungsstellung und Finanzplanung effizienter.“
Nutzerforschung: Pain Points
Komfort
Die Oberfläche basiert auf Tabellen und Karten und sorgt für eine klare, intuitive Bedienung.
Vertrauen
„Dieser Dienst muss für unser Unternehmen und unsere Distributoren sicher sein.“ (David)
Navigation
Nutzer schlugen Breadcrumbs auf den Screens vor, um leichter zurückzunavigieren.
Barrierefreiheit
Das System unterstützt Tag- und Nachtmodus, Textvergrößerung und Screenreader.
Digitale Wireframes
Das ERP-System besteht aus fünf Abteilungen und einer separaten Distributorenoberfläche (insgesamt sechs Module). Ich erstellte Wireframes aller Screens und skizzierte die Nutzerwege für jedes Modul.
Außerdem arbeitete ich eng mit Entwicklern und Teamleitern zusammen, um die Funktionen des Systems zu verstehen. In BRAINSTORMING-SESSIONS analysierten wir Design und Logik aller Abteilungen.
Finale Iteration
Mockups
Nach einer zweiten Usability-Studie stellte ich fest, dass Suchfelder, Filter und Buttons auf Mobilgeräten größer sein müssen. Auch die Abstände zwischen Eingabefeldern und Buttons wurden für präzisere Bedienung vergrößert.
Ich folgte den Prinzipien des responsiven Designs und verkleinerte die Schrift in einigen Elementen leicht. Ein dunkles Design kam hinzu, um die Augen zu schonen und den Komfort für alle zu erhöhen, die es bevorzugen.
Responsives Design
Was ich als Nächstes messen würde
Um das Design nach dem Launch zu validieren, würde ich folgende Kennzahlen und Methoden nutzen, um das Nutzererlebnis zu messen und zu verbessern:
Tracking des Nutzerverhaltens
Mit Tools wie Google Analytics, Hotjar oder Mixpanel die Interaktionen im ERP/CRM-System analysieren und typische Reibungspunkte sowie Verbesserungsfelder finden.
Conversion- und Engagement-Metriken
Messen, wie effizient Nutzer zwischen Funktionen wechseln, Aufgaben erledigen (z. B. Kunden anlegen, Berichte erstellen) und automatisierte Abläufe nutzen.
⏱️
Aufgabenerledigung und Zeiteffizienz
Messen, wie lange zentrale Aktionen im System dauern, um die Zeit für wiederkehrende Abläufe zu verkürzen.
Heatmaps und Sitzungsaufzeichnungen
Usability-Probleme erkennen, indem Klicks, Scrolltiefe und Interaktionsmuster etwa mit der Kundenverwaltungstabelle visualisiert werden.
A/B-Tests für UI-Verbesserungen
Verschiedene Layouts, Button-Positionen und Formulardesigns testen, um Usability und Akzeptanz zu steigern.
Barrierefreiheit
01
Ich nutzte außerdem die serifenlose Schrift „Poppins“, damit Texte in der Anwendung leicht lesbar sind.
02
Farben und Kontraste von Eingabefeldern und Buttons habe ich so gewählt, dass sie für Menschen mit Sehschwäche gut erkennbar sind. In der codierten Bibliothek enthalten die Komponentendokumentationen Zustände, Fokusstile und ARIA-Hinweise; das Storybook-Addon a11y ist aktiviert.
03
Ich gestaltete ein dunkles Design, damit verschiedene Nutzer das ERP-System bequem verwenden können.
Designsystem
Im Projekt baute ich ein Designsystem für das ERP auf: gemeinsame Stile, Komponenten und Varianten, die mit jedem neuen Modul und Screen mit dem Produkt mitwuchsen.
Von Figma zu Storybook
In einem Folgeprojekt (Okt. 2026) überführte ich die ERP-Mockups in eine codierte Komponentenbibliothek: 60 React- und TypeScript-Komponenten (22 Atome, 38 Moleküle) mit 242 Design Tokens aus einer einzigen tokens.json. Jede Komponente ist in Storybook mit Zuständen, Grenzfällen, Hinweisen zur Barrierefreiheit und einer Zuordnung von Figma zu Code dokumentiert. Ich richtete eine KI-gestützte Pipeline ein (Figma → Figma MCP → Claude Code → GitHub Pull Request → Vercel Preview). Ich entschied, was gebaut wird, prüfte jede Änderung und mergte jeden Pull Request.
Was ich als Nächstes tun würde
Nutzerzentrierte Tests und Dokumentation
Aufgabenbasierte Usability-Tests der Kernabläufe durchführen und jedes Problem samt Lösung im Designsystem dokumentieren.
Nutzerinterviews zur Weiterentwicklung
Qualitative Interviews mit jeder Rolle führen, um verbleibende Pain Points zu finden und Verbesserungen zu priorisieren.
Inklusive Usability-Forschung zur Barrierefreiheit
Ein Barrierefreiheits-Audit nach WCAG und Research-Sessions mit Menschen mit Behinderungen durchführen.
Wirkung
Nach dem ersten Monat mit dem ERP-System, das die meisten Geschäftsprozesse automatisiert, reagierten die Nutzer positiv. Hier ein Zitat eines Nutzers:
Ergebnis (Designsystem-Folgeprojekt, Okt. 2026)
• 60 Komponenten (22 Atome, 38 Moleküle)
• 242 Design Tokens (Farben, Typografie, Schatten, Größen, Abstände, Raster, Layout, Radien)
• 137 SVG-Icons in zwei Größen
• ~480 Storybook-Stories mit MDX-Dokumentation
• 9 Pull Requests, 5 Tage aktive Arbeit (1.–5. Okt. 2026)
Was ich gelernt habe
Bei der ersten Version des ERP-Systems lernte ich, Empathie einzusetzen und eigene Annahmen beiseitezulassen. Usability-Research half, die Funktionen und die Arbeit mit dem System zu verbessern. Die spätere Umsetzung der Mockups in Code zeigte mir, dass Designsysteme nur skalieren, wenn Tokens und Dokumentation im Code leben und nicht nur in Figma.
Zusammenfassung
Die Leistung des ERP-Systems zu steigern, erfordert eine ganzheitliche Strategie aus gründlichen Tests, nutzerzentrierten Verbesserungen und dem Bekenntnis zur Barrierefreiheit. Indem wir Nutzerfeedback und Inklusion in den Vordergrund stellen, optimieren wir nicht nur das System, sondern schaffen ein Umfeld, in dem die Bedürfnisse aller Nutzer erfüllt werden.
Link zur Website des Unternehmens, für das das ERP-System entwickelt wurde: rifbar.com.