Design & Umsetzung für CredaRate Solutions
CredaRate Solutions
UI/UX-Design der neuen Anwendung in Figma und deren Umsetzung in HTML und CSS. Entstanden als Design- und Umsetzungsarbeit für CredaRate Solutions in Köln.
Die Herausforderung
Aus mehreren getrennten Anwendungen sollte ein Einstieg werden: Redesign und Zusammenführung in einem Zug. Damit standen die Arbeitsabläufe neu zur Debatte — was gehört zusammen, was bleibt getrennt, wo wechselt jemand von der Erfassung in die Prüfung? Dazu die Dichte: Hier werden die Daten erfasst und geprüft, auf denen später ein Kreditrating steht — Stammdaten, Beziehungen, Kapitaldienstfähigkeit, ESG, Defaulterfassung. Viele Einzelangaben auf engem Raum, mehrere Prüfregeln je Angabe, und dahinter immer dieselbe Frage der Bearbeitenden: Was fehlt noch, und was ist beanstandet?
Screenshot des UI-Designs der CredaRate-Solutions-Anwendung. Ausschnitt aus der Desktop-Anwendung.
Der Ansatz
Diese Frage beantwortet die Oberfläche zuerst. Über jeder Erfassungsmaske steht eine Leiste, die den Stand in vier Zuständen zeigt: valide, Warnung, Fehler, offen. Darunter liegen die Themenblöcke als aufklappbare Gruppen — das ist die logische Trennung, die aus der Zusammenführung entstanden ist: sichtbar bleibt, woran gerade gearbeitet wird, der Rest ist einen Klick entfernt. Jede Zeile trägt Status, letzte Bearbeitung und genau einen Weg in die Bearbeitung. Farbe bedeutet hier etwas und wird entsprechend sparsam eingesetzt — sie markiert Zustände, nicht Dekoration.
Das Ergebnis
Entworfen in Figma, danach in HTML und CSS umgesetzt — mit den Zuständen, die im Alltag wirklich vorkommen: leere Felder, halb erfasste Blöcke, Warnung neben Fehler. Aus mehreren Anwendungen ist eine geworden, ohne dass aus Dichte Enge wird. Wer die Maske öffnet, sieht in der ersten Sekunde, wie weit ein Kunde erfasst ist und wo es hakt.
Anklicken, um das Gerät zu vergrößern
- Stand auf einen Blick
- Eine Leiste über der Maske zeigt, wie viele Angaben valide, beanstandet, fehlerhaft oder offen sind.
- Dichte ohne Enge
- Viele Datenzeilen auf einem Bildschirm, durch Gruppierung und Weißraum trotzdem ruhig.
- Farbe als Signal
- Zurückhaltende Palette: Farbe markiert Zustände, nicht Dekoration.
- Figma bis HTML/CSS
- Entwurf und Umsetzung aus einer Hand, ohne Übersetzungsverlust dazwischen.
Nächstes Projekt