untermStrich Software - B2B SaaS Redesign
Service
UI/UX Design, Prototyping, Research, Testing
Year
2025
Website
www.untermstrich.de
Kunde
untermStrich
Tools
Figma, FigJam
Herausforderung (why)
Das SaaS-Tool untermStrich war hochgradig anpassbar und ermöglichte es Unternehmen, viele Funktionen individuell zu konfigurieren. Allerdings gab es nie eine professionelle UI/UX-Gestaltung. Das führte zu mehreren Herausforderungen:
Mangelnde Struktur & Übersicht – Listen, Tabellen und zahlreiche Einstellungsmöglichkeiten wurden auf kleinem Raum unübersichtlich dargestellt.
Schlechte Lesbarkeit – Texte und UI-Elemente waren zu klein, was die Bedienung erschwerte.
Kein dokumentierter Research – Keine Nutzerinterviews, keine Usability-Tests, keine klaren Designentscheidungen in der Vergangenheit.
Hohe Personalisierung – Unterschiedliche Kunden hatten individuelle Features, die beachtet werden mussten.
Verschiedene Nutzergruppen – Langjährige Nutzer sollten sich nicht „verloren“ fühlen, neue Kunden hingegen sollten sich leicht einfinden.
Die zentrale Frage:
„Wie kann man ein hochkomplexes Tool modernisieren, ohne bestehende Nutzer zu überfordern, neue Kunden zu überzeugen und gleichzeitig zukünftige Funktionen ermöglichen?“
Prozess (how)
Die Zielgruppen-Anforderungen: Drei verschiedene Nutzergruppen berücksichtigen
Ein besonders herausfordernder Aspekt war die Vielzahl an Nutzern mit unterschiedlichen Erwartungen:
Bestehende Kunden (seit 20 Jahren dabei)
➡ Sie mussten sich im neuen Design schnell zurechtfinden, da sie täglich mit dem Tool arbeiteten. Eine zu drastische Veränderung hätte Ablehnung hervorgerufen.Neue Kunden
➡ Das Redesign sollte eine moderne, intuitive UI bieten, um neue Unternehmen für das Tool zu begeistern.Nutzer eines auslaufenden Produkts
➡ Diese Gruppe musste aus einem anderen Tool migriert werden. Sie benötigten ähnliche Funktionen und eine vertraute UX, um den Umstieg zu erleichtern.
Da nicht alle Features aus dem alten Produkt sofort übernommen werden konnten, war eine klare Priorisierung erforderlich. Ich musste abwägen, welche Funktionen sofort überarbeitet werden und welche in einer späteren Phase optimiert werden konnten.
Mein Prozess: Vom Research zur Umsetzung
1. Markt- und Wettbewerbsanalyse
Zunächst analysierte ich vergleichbare B2B SaaS-Tools:
- Wie lösen Wettbewerber ähnliche Herausforderungen?
- Welche UI/UX-Standards gibt es in der Branche?
- Wie interagieren Nutzer mit ähnlichen Tools?
2. Analyse der bestehenden User Flows & Strukturen
Ich dokumentierte die vorhandenen User Flows, um sie anschließend zu optimieren. Mithilfe einer Sitemap konnte ich die Informationsarchitektur verbessern und redundante oder unnötig komplexe Navigationspfade entfernen.
3. Enge Zusammenarbeit mit Stakeholdern
Ich arbeitete intensiv mit:
- Dem Product Manager (PM), der Anforderungen in YouTrack dokumentierte.
- Dem Geschäftsführer, der das Tool mitentwickelt hatte und die Kundenbedürfnisse genau kannte.
4. Design in Figma mit Tailwind UI
Für Konsistenz und ein modernes Design nutzte ich die Tailwind UI Library. Dies erleichterte die Umsetzung und sorgte für eine einheitliche Designsprache über alle Komponenten hinweg.
5. Nutzer-Feedback durch Prototypen-Tests
Da keine Usability-Daten existierten, testete ich das neue Design frühzeitig mit 5 Bestandskunden anhand eines Figma-Prototyps. Ihr Feedback half dabei, kritische UX-Probleme vor der Implementierung zu identifizieren.
6. Agile Umsetzung in Sprints
Nach 1,5 Monaten Designarbeit wurde das Projekt in 2-wöchigen Sprints weiterentwickelt.
- Zuerst wurden die UI-Elemente optisch überarbeitet.
- Danach folgte die funktionale Optimierung mit dem Entwicklerteam.
Lösung (what)
Die Lösung: Ein strategisches Redesign mit UX-Verbesserungen
Das Ergebnis war mehr als nur ein optisches Update. Wir verbesserten auch die Benutzerführung und die Informationsarchitektur.
Die wichtigsten Verbesserungen:
✔ Listen & Tabellen mit besserer Strukturierung – Klare Hierarchien und Filteroptionen erleichterten die Navigation.
✔ Detail-Info-Kacheln & Modale Dialoge – Wichtige Informationen wurden nicht mehr versteckt, sondern kontextbezogen eingeblendet.
✔ Verbesserte Lesbarkeit – Größere Schriften und ein durchdachtes Farbschema sorgten für bessere Erfassbarkeit.
✔ Tooltips & Guided Tour – Ein interaktives Onboarding reduzierte den Schulungsaufwand und den Support-Bedarf.
Zukunftssichere Architektur
Das neue Design legte den Grundstein für zukünftige Erweiterungen:
Mobile Version – Durch ein flexibles Grid-Design kann das Tool zukünftig auch auf Tablets und Smartphones genutzt werden.
Dashboard mit Widgets – Eine modular aufgebaute Startseite ermöglicht eine personalisierte Übersicht.
Erkenntnisse
80% Redesign, 20% UX-Optimierung für einen reibungslosen Übergang, ist eine solide Basis für weitere Produktversionen.
Bei B2B SaaS-Redesigns gilt: Ein radikaler Schnitt kann Nutzer abschrecken.
Durch die Kombination aus 80% visuellem Redesign und 20% gezielter UX-Optimierung konnten wir:
Bestehende Nutzer behutsam an das neue Design heranführen.
Neue Kunden durch eine modernere, intuitivere UI gewinnen.
Eine Basis für zukünftige Funktionen schaffen.
Unser Prozess und Ansatz steht für durchdachtes UI/UX Design in der B2B SaaS-Welt. Unser Ziel ist es, komplexe Software nicht nur optisch zu verbessern, sondern sie für alle Nutzergruppen effizienter und angenehmer zu gestalten.