Digital Bridge Plattform
Digital Bridge ist eine B2B-SaaS-Plattform, auf der Unternehmen digitale Projekte und Lösungen für Digitalisierungsprobleme teilen. Seit dem Projektstart wuchs die Plattform von 60 auf über 650 Projekte und das Partnernetzwerk aus Kompetenzzentren und Umsetzungspartnern von 17 auf über 140.
Gemeinsam mit meinem Team habe ich mich auf die größte Nutzerhürde konzentriert: die Projektanlage. Ziel war ein einfacherer Prozess und ein neues, konsistentes Design-System.
Redesign einer B2B SaaS-Plattform
5 Personen (davon
2 Designer:innen)
Figma, FigJam, Notion
April - November 2024
Das Problem
Die übernommene Plattform hatte zwei zentrale Schwachstellen. Die Projektanlage lief über ein einziges, langes Formular mit vielen Pflichtfeldern. Das überforderte Nutzer:innen und führte zu hohen Abbruchraten. Zudem fehlte ein Design-System. Das Interface war inkonsistent, der Designprozess ineffizient.
Ergebnis
Der neue Progressive-Disclosure-Wizard löst das lange Formular durch mehrere kurze, aufeinanderfolgende Schritte ab. Das reduziert die kognitive Last und wirkt deutlich weniger überfordernd als zuvor. Ein A/B-Test bestätigte den Erfolg: weniger Abbrüche und eine deutlich höhere Abschlussquote.
Die klar strukturierte Eingabe senkt außerdem den administrativen Aufwand und macht eingereichte Projekte leichter auffindbar und vergleichbar. Das neue Design-System liefert dabei eine konsistente, skalierbare Basis, die weiteres Wachstum der Plattform unterstützt.
18%
Conversion-Uplift
72%
40+
Prozess
Problemanalyse & Bestandsaufnahme: Wir analysierten die bestehende Projektanlage. Die hohe Abbruchrate war das zentrale Problem. Rückmeldungen von Nutzer:innen und Formulardaten zeigten, dass Länge und Komplexität die Hauptursachen waren.
Informationsarchitektur: Jedes Eingabefeld wurde als einzelne Karte erfasst. Die Karten kategorisierten wir und bildeten thematische Gruppen. Diese Gruppen wurden zur Grundlage der Wizard-Screens.
Wireframing & Flowcharts: Aus den Gruppen entstanden Flowcharts und Wireframes für den neuen Anlageprozess. So testeten wir Reihenfolge und Logik des Wizards früh im Prozess.
Design-System: Farben & Typografie: Ein Design-System gab es noch nicht, daher entwickelten wir eines von Grund auf. Dabei legten wir Farben und Typografie als grundlegende Bausteine komplett neu fest. So entstand eine einheitliche visuelle Basis für die gesamte Plattform.
Design-System: Komponenten-Bibliothek: Darauf bauten wir eine Bibliothek wiederverwendbarer Komponenten. Jede Komponente wurde mit Anatomie, Varianten und Anwendungsbeispielen dokumentiert. Die Progressive-Disclosure-Komponente bildete später die Grundlage für den Formular-Wizard.
Design-System: Dokumentation & Guidelines: Jede Komponente erhielt klare Nutzungsregeln und Do's & Don'ts. So stellten wir sicher, dass das Design-System im Team einheitlich angewendet wird.
Prototyping in Figma: Mit den fertigen Komponenten bauten wir den Wizard als High-Fidelity-Prototyp. Jeder Formularschritt wurde zu einem eigenen, fokussierten Screen.
A/B Testing & Validierung: Im Folgenden zeige ich zentrale Screens des neu entwickelten Design-Systems sowie die finale Umsetzung des Progressive-Disclosure-Wizards.
Das finale Design
Die folgenden Screens zeigen die finale Umsetzung des Progressive-Disclosure-Wizards. Jeder Schritt baut auf den zuvor definierten Komponenten des Design-Systems auf. So entsteht ein durchgängiges, konsistentes Interface vom ersten bis zum letzten Schritt der Projektanlage.
