Visuelles Webdesign und UI-Designsystem für eine Geldtransfer-Plattform

Ganzheitliches UI/UX-Projekt für ein Fintech-Produkt für internationale Geldüberweisungen: Marketing-Website, Wechselkursrechner, Kundenkonto (Dashboard) und System für Transaktions-E-Mails — aufgebaut auf einem einheitlichen Designsystem aus 67 Komponenten.

Rolle: UI/UX-Design, Designsystem Stack: Sketch, Figma, Next.js, Framer-Motion, Tailwind v4, Storybook

Kunde und Aufgabe

Das Hauptziel des Projekts ist es, das Website-Design und den UI/UX-Ansatz zu zeigen. Die zentrale Aufgabe: einen komplexen Fintech-Flow für den Endnutzer verständlich und vertrauenswürdig zu gestalten, mit einer einheitlichen visuellen Sprache über alle Produktoberflächen hinweg, von der Marketing-Website bis zu den E-Mail-Benachrichtigungen.

Das Kundenkonto im Überblick

Das Kundenkonto bündelt alle verbundenen Leistungen des Kunden: Konten, Überweisungen, Empfänger, Berichte, Zugriffsrechte. In der Praxis sind das viele Funktionen, die sich stark voneinander unterscheiden.

Vom Smartphone bis zum Desktop

Jede Seite ist an alle gängigen Bildschirmgrößen angepasst. Die Oberfläche funktioniert auf Desktop, Tablet und Smartphone gleich zuverlässig.

Visuelle Sprache

Im Corporate-Bereich der Website ergänzt eine Image-Animation den visuellen Stil und macht ihn leichter erfassbar; sie stärkt die emotionale Bindung zur Marke.

Ikonografie

Die Erzählung und die Übergangslogik zwischen den Abschnitten werden durch eine eigens entwickelte, animierte Icon-Bibliothek visuell unterstützt.

Geldbewegung

Das zentrale Nutzungsszenario des Produkts ist das Senden einer Überweisung und das Aufladen des Kontos — mit transparenter Anzeige von Wechselkurs und Gebühr bei jedem Schritt.

Betrag und Kurs aktualisieren sich live während der Eingabe. Ein sichtbarer Timer fixiert den Kurs für die Dauer der Entscheidung, die Gebühr wird vor der Bestätigung transparent aufgeschlüsselt — keine versteckten Kosten, keine veraltete Kursangabe.

Komponentenbasiert

Die Abschnitte wurden aus denselben wiederverwendbaren Komponenten zusammengesetzt, was die Iteration beschleunigte, ohne den einheitlichen visuellen Stil zu verlieren.

Farbthemen

Das Designsystem unterstützt einen Dark Mode und einen Light Mode, wodurch der Stil einheitlich bleibt und die Wahrnehmung der Oberfläche persönlicher wird.

Storybook

Storybook wurde zum Testen des Kundenkontos eingesetzt – so war klar erkennbar, welche Komponenten bereits fertig waren und an welchen noch gearbeitet werden musste.

E-Mail-Baukasten

Ein eigener Mini-Case innerhalb des Projekts: ein E-Mail-Baukasten, eine Bibliothek wiederverwendbarer Blöcke und einheitlicher Layout-Regeln, mit denen sich eine neue E-Mail als Komposition fertiger Teile zusammensetzen lässt, statt jede von Grund auf neu zu gestalten. Auf dieser Basis entstand ein Katalog von Transaktions-E-Mails mit Light- und Dark-Theme, aus wiederverwendbaren HTML-Blöcken.

Ergebnis und Erkenntnisse

Entstanden ist ein Designsystem, das den gesamten Produktzyklus abdeckt: von der ersten Begegnung mit der Marke auf der Website bis zur Transaktions-E-Mail nach einer Überweisung.

Schwierig war vor allem, die finanzspezifischen Komponenten (Wechselkurse, Gebühren, Compliance-Hinweise) so abzustimmen, dass sie im Web und in HTML-E-Mails gleich gut funktionieren.