TEAMBOX ERP Software - B2B SaaS Redesign
Service
UI/UX Design, Prototyping, Research, Testing
Year
2025
Website
www.teambox.de
Kunde
TEAMBOX
Tools
Figma, FigJam
Herausforderung (why)
Die bestehende TEAMBOX-B2B-Software wurde von Nutzer:innen als technisch stabil, aber visuell und funktional überholt wahrgenommen:
UI „wie aus den 90ern“: veraltetes visuelles Erscheinungsbild.
Mangel an Design-Konsistenz: unterschiedliche Schriftgrößen, uneinheitliche Komponenten.
Funktionalität teilweise zu komplex, überladen oder schwer auffindbar.
UX-Feedback: Viele Features wurden nicht intuitiv verstanden oder erst nach mehrfacher Erklärung angewendet.
Diverse Module (Projekte, Rechnungen, Ressourcen, Aktivitäten, usw.) waren inkonsistent aufgebaut, was zu Einarbeitungshürden und Fehlern führte.
Ziel war es, eine neue, moderne UI/UX für die TEAMBOX zu entwickeln, die sowohl Bestandskunden abholt als auch zukünftigen Ansprüchen gerecht wird – unter Erhalt der funktionalen Tiefe.
Prozess (how)
1. Nutzerzentrierte Analyse & UX-Research:
Es wurden qualitative Interviews mit insgesamt 10+ Nutzer:innen durchgeführt (u. a. Projektmanager:innen, HR, Finance, Geschäftsführung).
Erkenntnisse wurden in FigJam mit Post-its dokumentiert, Fathom AI Notetaker ergänzt.
Highlights wurden strukturiert nach UX-Problemen, Modul-Feedback, Verständnisproblemen, Wünschen und Business-Anforderungen.
2. Hypothesen & Prototyping:
Erste Design-Hypothesen für neue Module wie Dashboard, Ausgangsrechnung, Projektübersicht und Navigation wurden getestet.
Hypothesen z. B. „UI Design wird verstanden“ wurden anhand der Interviews verifiziert/falsifiziert.
3. Visuelles Redesign & Pattern Library:
Auf Basis der Erkenntnisse entstand ein konsistenter Designstil in Figma:
Bereinigung der Schriftgrößen (von 22px–7px auf 3–4 systematisch eingesetzte Größen)
Einführung von Widgets, Modals, neuen Komponenten (Tabs, Projektselektor etc.)
Fokus auf Desktop-Optimierung für bestehende Agentur-Kund:innen.
4. Iterative Tests mit Prototypen:
Figma-Prototypen mit Dummy-Daten wurden in 1:1 Sessions getestet.
A/B-Tests zu Farben, Filterverhalten, Layout-Verständnis uvm.
Prototypen wurden verbessert basierend auf Rückmeldungen wie:
„Ich finde mich nicht zurecht.“
„Tabs finde ich spannend.“
„Das neue UI ist viel moderner – aber UX ist entscheidend.“
5. Modulares Redesign-Konzept:
Um die Umstellung technisch und organisatorisch umsetzbar zu machen, wurde ein modulares Umbaukonzept entwickelt:
Accordion-Struktur bleibt unten erhalten (rückwärtskompatibel).
Neu designte Bereiche wandern in Tabs (z. B. „Finanzen“, „Aktivitäten“, „Controlling“).
Lösung (what)
Ein durchgängiges, modulares Redesign der TEAMBOX wurde konzipiert:
Visuell:
Klar strukturierte Komponenten
Einheitliche Schriftgrößen (14px/12px System)
Reduktion auf eine reduzierte Farbpalette (z. B. Blau, Grau, keine redundante grüne Styles mehr)
Einheitliche Icon-Nutzung
Funktional:
Neue Navigation mit Favoritenfunktion
Persönlich konfigurierbares Dashboard mit relevanten Widgets (z. B. Zeiterfassung, Aufgaben, Rechnungen)
UX-Optimierungen wie modale Editierformulare statt Inline-Editing
Filter-UI mit Dummy-Inhalten zur besseren Vorstellung im Interview
Technisch-strategisch:
Einführung einer neuen, sauberen Designstruktur für zukünftige Module
Rebranding-ready durch flexible Farb- und Komponentenstruktur
Erkenntnisse
Usability > Visual Design: Nutzer:innen äußerten durchgehend, dass die neue Optik hilfreich sei – aber nur, wenn die Funktionen klarer und einfacher werden. Komplexe Tools brauchen erklärende UX: Self-Explanatory Design ist besonders in der B2B-SaaS-Welt herausfordernd, besonders bei komplexen Modulen (z. B. Ressourcenplanung, Rechnungswesen). Modale Editierung ist klar im Vorteil: Weniger Ablenkung, bessere Konzentration auf das aktuelle Ziel. Prototyping muss greifbar sein: Dummy-Daten und realitätsnahe Fülltexte helfen Nutzer:innen enorm beim Bewerten. Konsistenz zahlt sich aus: Eine Reduktion der Schriftgrößen auf 3–4 definierte Größen erhöht Lesbarkeit und Pflegebarkeit der UI massiv. Farbwahl ist subjektiv – daher personalisierbar: Die Diskussion um „grün vs. blau“ zeigte, dass Nutzer:innen individuelle Farbanpassung (theming) als echte Mehrwerte sehen.