Neues Designsystem und Interface für das deutsche Fintech

MYOS, ein aufstrebendes deutsches Fintech, hat sich mit einer innovativen Lösung zur Warenfinanzierung für Händler im Markt positioniert. Die ursprüngliche Plattform stieß jedoch an ihre Grenzen. Die User Experience (UX) und das User Interface (UI) wiesen spezifische Herausforderungen auf, die den eigentlich unkomplizierten Finanzierungsprozess für Nutzer erschwerten. Es fehlte an einer durchgängigen visuellen und funktionalen Konsistenz, was nicht nur die intuitive Bedienung behinderte, sondern auch die Weiterentwicklung der SaaS-Lösung ausbremste. Für ein Unternehmen, dessen Geschäftsmodell auf Effizienz und Vertrauen basiert, war eine grundlegende Optimierung der gesamten Plattform unerlässlich, um nachhaltig zu wachsen und die Marktposition zu festigen.

Um diese ambitionierten Ziele zu erreichen, wurde ein mehrstufiger, methodischer Prozess verfolgt, der Design und technische Umsetzung eng miteinander verknüpfte:

• Tiefgehende Plattformanalyse Zu Beginn stand eine detaillierte Analyse der bestehenden Plattform. Dabei wurden durch die Untersuchung von Nutzerflüssen und Interaktionsmustern konkrete Schwachstellen und Optimierungspotenziale identifiziert.
• Aufbau eines umfassenden Designsystems in Figma Als zentrales Werkzeug wurde eine umfangreiche Komponentenbibliothek in Figma erstellt. Jedes UI-Element. Von Buttons über Formularfelder bis hin zu komplexen Modulen, wurde detailliert definiert und für die technische Umsetzung dokumentiert. Dies umfasste Spezifikationen zu Typografie, Farbpalette, Abständen und Interaktionsverhalten.
• Implementierung eines 4pt-Grid-Systems Um eine durchgängige visuelle Harmonie und präzise Struktur zu garantieren, wurde ein konsequentes 4-Punkt-Rastersystem eingeführt. Dieses Prinzip sorgte für einheitliche Abstände und ein sauberes, responsives Layout über alle Bildschirmgrößen hinweg.
• Entwicklung modularer UI-Komponenten Alle UI-Elemente wurden als flexible und wiederverwendbare Bausteine konzipiert. Dieser modulare Ansatz ermöglicht es, neue Features und Ansichten effizient und ohne Design-Inkonsistenzen zu integrieren.
• Detaillierte technische Dokumentation Da anfangs kein modernes Inspect-Panel zur Verfügung stand, wurde eine lückenlose Dokumentation in Form von Sheets erstellt. Diese enthielt alle relevanten Spezifikationen für die Entwickler und stellte sicher, dass das Design pixelgenau und ohne Interpretationsspielraum umgesetzt werden konnte.