Branche

Fintech (Crypto / Blockchain)

Kunde

SatoshiPay GmbH

Rolle

Grafik- & UI/UX-Designer

Vortex

Ein benutzerfreundlicher, schneller und sicherer Weg, Stablecoins in Fiat auszuzahlen.

Viele Freelancer auf der ganzen Welt werden in Krypto bezahlt. Immer mehr Menschen sehen einen Vorteil darin, Zahlungen in Stablecoins zu erhalten, die schnell und sicher sind. Das Problem entsteht, wenn Nutzer diese Stablecoins in Fiat, ihre Landeswährung, umwandeln müssen. Der Off-Ramping-Prozess ist oft langwierig, teuer und kompliziert.

Vortex bietet eine kostengünstige Lösung, um Stablecoins in Landeswährungen umzuwandeln, mit Fokus auf den lateinamerikanischen und europäischen Markt. In diesem Projekt findest du eine Case Study, die zeigt, wie ich zur Entwicklung dieses Tools beigetragen habe, mit Fokus auf ein unverwechselbares Branding und Benutzerfreundlichkeit.

Kurz gefasst

Was ist Vortex?

Vortex ist eine Non-Custodial-Platform, die eine Forex-optimierte dezentrale Exchange mit Off-Ramping-Services verbindet. Sie ermöglicht es Nutzern, besonders in den Märkten Lateinamerikas und Europas, zwischen Krypto und lokalen Fiat-Währungen zu wechseln, mit Stablecoins wie EURC und USDC, sehr niedrigen Gebühren von nur 0,5 % und minimaler Slippage. Die Beträge lassen sich anschließend direkt auf Bankkonten überweisen. Ursprünglich unter dem Dach von Pendulum bei SatoshiPay gestartet, entwickelte sich Vortex zu einem eigenständigen Produkt, nachdem interne Diskussionen ergaben, dass es außerhalb des Polkadot-Systems arbeiten würde. Zuerst wurde es mit einer Pop-up-Marke und dem Namen PendulumPay entwickelt, bevor es zu einem vollständig eigenständigen Konzept mit eigenem Designsystem und eigener Identität wurde.

Was war meine Rolle?

Als Brand Designer bei SatoshiPay war Vortex die einzige Marke, die ich komplett von Grund auf gestalten konnte. Das ursprüngliche Ziel war es, eine Pop-up-Marke für Investoren zu schaffen, um Kapital einzuwerben. Bei engen Deadlines habe ich schnelle Recherche betrieben und das PendulumPay-Logo im Rahmen der Marke Pendulum gestaltet. Später haben wir als Team entschieden, dass die neue Marke unabhängig von Pendulum sein sollte. Um die neue Identität zu definieren, habe ich einen Naming-Workshop durchgeführt, in dem Vortex als Produktname ausgewählt wurde. Anschließend habe ich die gesamte Marke Vortex, ihre Landingpage und das Vortex Design System entwickelt. Gemeinsam mit dem Produktteam habe ich an der Entwicklung der Benutzeroberfläche gearbeitet. Dieses Projekt forderte uns heraus, agil zu arbeiten und schnell durch Ideenfindung, Definition und Tests zu gehen, was zu starken Ergebnissen und einem benutzerfreundlichen Tool führte, das einen sonst mühsamen Prozess vereinfacht.

Herausforderung

Vortex will ein vielschichtiges Problem lösen: sofortige, günstige Stablecoin-Off-Ramps ermöglichen und dabei komplexe globale Regularien meistern. Klassisches Off-Ramping bedeutet hohe Gebühren, mehrere Zwischenhändler und Verwahrungsrisiken. Vortex' Non-Custodial-Ansatz verlangte ein Design, das sofort Kontrolle, Sicherheit und Einfachheit vermittelt.

Ziel

Eine unverwechselbare, vorausdenkende Marke schaffen, die Innovation signalisiert und bei jeder Interaktion Vertrauen weckt. Das Design musste komplexe Abläufe vereinfachen, die Eigenständigkeit der Nutzer betonen und Vortex sowohl von zentralisierten Exchanges als auch von anderen Web3-Produkten abheben. Eine kühne, moderne Ästhetik in Kombination mit transparenter Kommunikation ließ Vortex zugleich hochmodern und verlässlich wirken.

E I N N E U E S P R O D U K T

Ideenfindung

Bei Pendulum, innerhalb von SatoshiPay, identifizierte das neu gebildete Business-Development-Team einen überzeugenden Use Case in Schwellenmärkten. Freelancer, die in Krypto bezahlt werden, standen vor erheblichen Herausforderungen und hohen Gebühren, wenn sie Stablecoins in ihre Landeswährungen umwandelten. Um das zu lösen, entwickelten sie PendulumPay, zunächst als Teil des Pendulum-Ökosystems gedacht. Dieses währungsübergreifende Fiat-Gateway bietet On-Chain-Devisenservices zu Interbanken-Kursen und liefert zentrale Vorteile wie bis zu 85 % niedrigere Kosten gegenüber klassischen Methoden, sofortige Abwicklung mit transparenten Gebühren und eine vereinfachte User Experience. Es umfasst außerdem eine API-Integration für Unternehmen.

PendulumPay nutzt einen Oracle-gesteuerten AMM, um FX-Swaps mit minimaler Slippage zu ermöglichen und den Umweg über teure USD-Ramps zu umgehen. Die Lösung konzentrierte sich auf unterversorgte Regionen wie Lateinamerika und Afrika und nahm zugleich volumenstarke Korridore wie Japan und Europa ins Visier. Sie adressierte einen schnell wachsenden Markt, für den bis 2028 ein grenzüberschreitendes Stablecoin-Zahlungsvolumen von 137 Milliarden US-Dollar prognostiziert wird.

Als Brand Designer bei Pendulum und SatoshiPay habe ich eine Pop-up-Marke geschaffen, die auf Investoren zugeschnitten war, um schnell ein überzeugendes Pitch Deck zu entwickeln und Kapital zu sichern. Bei engen Deadlines habe ich schnelle Recherche betrieben und das PendulumPay-Logo im Rahmen der Marke Pendulum gestaltet. Ich habe zügig ein Styleboard mit ähnlichen Marken zusammengestellt, das als Inspiration für Form und Konzept diente. Nachdem ich es mit dem Team geteilt hatte, begann ich, verschiedene Konzepte für das PendulumPay-Logo zu entwickeln.

Diese Übung lieferte vier Logo-Alternativen, von denen am Ende keine verwendet wurde, obwohl es klare Favoriten gab. Grund dafür war die Frage, ob PendulumPay der richtige Name für ein Produkt sei, das mit Pendulum und seinem Ökosystem wenig zu tun haben würde. Wir zielten außerdem nicht auf das Polkadot-Ökosystem ab, zu dem Pendulum als Parachain gehört. PendulumPay richtete sich an ein breiteres Publikum, und in den folgenden Meetings wurde entschieden, dass es mit einer eigenen Marke laufen würde, die sich von Pendulum unterscheiden musste.

Naming-Workshop

Wir brauchten einen neuen Namen. Ich schlug einen Naming-Workshop vor, wie wir ihn schon im Kontext von Pendulum gemacht hatten. In diesem Workshop folge ich dem Naming-Prozess von Xavier Grau Castelló vom Studio Nom-Nam, einem Naming-Spezialisten, der aus fünf Schritten besteht:

  1. Fokus: Zunächst die Ziele, Zielgruppe und Kernwerte der Marke gründlich verstehen. Dieser grundlegende Schritt stellt sicher, dass der Naming-Prozess zur Identität und den strategischen Zielen der Marke passt.

  2. Informationssammlung: Umfassend zu Branchentrends, Konkurrenznamen und kulturellen Feinheiten recherchieren. Dieser Schritt liefert entscheidende Erkenntnisse, die die Naming-Strategie prägen und helfen, unverwechselbare und relevante Namen zu entwickeln. Der Autor nennt diesen Schritt auch name hunting.

  3. Ideengenerierung: Durch kreatives Brainstorming eine vielfältige Bandbreite möglicher Namen erzeugen. In dieser Phase werden verschiedene sprachliche Stile, Wortkombinationen und einfallsreiche Ansätze erkundet, um eine solide Liste an Optionen zu entwickeln. Dieser Schritt führt zu einer langen Liste von mindestens 100 Namen.

  4. Entscheidungsfindung: Die erzeugten Namen bewerten und die Auswahl zu einer „Shortlist“ verdichten, indem Relevanz, Einprägsamkeit und Übereinstimmung mit der Markenessenz jedes Namens beurteilt werden. Dieser Schritt kann erste Prüfungen zu Domain-Verfügbarkeit und möglichen Markenrechtskonflikten umfassen.

  5. Präsentation: Eine überzeugende Präsentation der Namen der Shortlist für die Stakeholder vorbereiten und halten. Dazu gehört, die Begründung hinter jeder Wahl darzulegen, zu zeigen, wie sie die Markenziele erfüllen, und mögliche Bedenken auszuräumen.

Damit der Prozess kollaborativ und effektiv war, habe ich alle Teammitglieder über den anstehenden Naming-Workshop informiert und ihnen die ersten beiden Schritte zugeteilt: die Marke zu verstehen, indem sie ihre Ziele und Identität durchgehen, und über eine Woche hinweg nach möglichen Namen zu suchen. Jedes Mitglied sollte mindestens fünf Namensideen mit in den Workshop bringen.

Die wichtigste Regel in dieser Phase war, keine Namen zu bewerten oder zu beurteilen, denn unser Fokus lag allein darauf, eine umfassende lange Liste von 100 möglichen Namen zu erzeugen. Während des Workshops teilten die Teammitglieder ihre Ideen und trugen maßgeblich zur Liste bei. Wir schlossen den Prozess mit einer Live-Brainstorming-Session ab und ergänzten die restlichen Namen während des Meetings.

Nachdem insgesamt 149 Namen entstanden waren, wurde die nächste Phase an das Marketing-Team übergeben, zu dem auch ich gehörte. Wir wählten unsere Favoriten aus, indem wir uns auf die Namen konzentrierten, die wirklich herausstechen. Diese verfeinerte Shortlist wurde dann anhand von sieben zentralen Parametern bewertet:

  • Einprägsamkeit: Bezieht sich darauf, wie leicht ein Name im Gedächtnis bleibt. Ein einprägsamer Name hinterlässt einen bleibenden Eindruck und sorgt dafür, dass Kunden ihn bei Bedarf abrufen können.

  • Einfachheit: Stellt sicher, dass der Name unkompliziert, leicht zu schreiben, auszusprechen und zu verstehen ist. Einfachheit reduziert Verwirrung und verbessert die Nutzbarkeit über Sprachen und Plattformen hinweg.

  • Relevanz: Zeigt, wie gut der Name zu den Werten, der Zielgruppe und der Branche der Marke passt. Ein relevanter Name transportiert Bedeutung und schafft eine klare Verbindung zum Zweck der Marke.

  • Unverwechselbarkeit: Misst, wie einzigartig der Name im Vergleich zur Konkurrenz ist. Ein unverwechselbarer Name hilft einer Marke, sich in einem überfüllten Markt abzuheben.

  • Rechtliche Verfügbarkeit: Stellt sicher, dass der Name als Marke geschützt werden kann und dass Domains oder Social-Media-Handles nicht bereits vergeben sind. Das vermeidet Rechtsstreitigkeiten und sichert exklusive Nutzungsrechte.

  • Kulturelle Sensibilität: Prüft, ob der Name über verschiedene Kulturen und Sprachen hinweg angemessen ist, um ungewollte negative Konnotationen oder anstößige Bedeutungen zu vermeiden.

  • Wohlklang: Bezieht sich darauf, wie angenehm der Name gesprochen klingt. Ein Name mit gutem Wohlklang klingt ansprechend und kommt beim Publikum gut an.

Wir stellten eine Liste von 34 Namen der Shortlist in einem eigenen Sheet zusammen. Die ausgewählten Namen waren die folgenden:

Zunächst teilten wir die Liste unter allen Mitgliedern des Marketing-Teams auf. Namen, die zentrale Kriterien wie rechtliche Verfügbarkeit, Relevanz und kulturelle Sensibilität erfüllten, kamen in eine finale Shortlist von sechs. Diese Namen wurden dann anhand aller zuvor genannten Parameter auf einer Skala von 1 bis 10 bewertet. Die Ergebnisse waren die folgenden:

Vortex erhielt die höchste Bewertung und wurde von den Team-Leads und Co-Foundern einstimmig genehmigt. Mit der finalen Entscheidung begann ich, die Vortex-Pop-up-Marke zu entwickeln. Aus früheren Erfahrungen wusste ich, dass es sehr gut möglich war, dass diese Marke zur finalen wird, also entschied ich mich, ihr mehr Gedanken zu widmen, während ich sie unter engem Zeitdruck gestaltete. Ein wichtiges Detail: Während des Prozesses war der Favorit des Teams XPay. Es stellte sich heraus, dass es wegen der rechtlichen Verfügbarkeit nicht die beste Alternative war und in anderen Parametern nicht hoch abschnitt. Da ich diese Vorliebe aber verstand, arbeitete ich damit, das X in Vortex als zentrales Designelement zu nutzen.

Branding

Ich begann den Markenaufbau, indem ich zuerst gemeinsam mit dem Team zentrale Konzepte definierte:

  • Innovation:
    Modernste Blockchain-Technologie und vorausdenkende Lösungen spiegeln den Fokus der Marke auf Fortschritt und Kreativität wider.

  • Effizienz:
    Verschlankte Abläufe und sofortige Abwicklung betonen die Bedeutung von Geschwindigkeit, Einfachheit und weniger Reibung.

  • Transparenz:
    Die Marke wurzelt in Vertrauen und Offenheit und legt den Fokus auf klare Prozesse, transparente Gebühren und manipulationssichere Transaktionen.

  • Globale Zugänglichkeit:
    Das Engagement, vielfältige Märkte zu bedienen und grenzüberschreitende Verbindungen zu ermöglichen, betont Inklusivität und Universalität.

  • Empowerment:
    Die Marke stärkt Nutzer, indem sie Werkzeuge und Lösungen bietet, die Kontrolle, Selbstvertrauen und Chancen ermöglichen.

Colors

Aufbauend auf dem Ansatz der Marke Pendulum nutzt auch die Vortex-Farbpalette eine Triade: einen dunklen Ton, einen hellen Ton für Hintergründe und eine neon-inspirierte Akzentfarbe für eine futuristische Ästhetik. In frühen Markeniterationen wurde die helle Akzentfarbe in zwei Varianten aufgeteilt, um besser zu praktischen Anwendungen zu passen. Bei Vortex sind die Farben bewusst kräftig, um die helle, futuristische Identität der Marke zu betonen, ihr Einsatz sollte aber sorgfältig ausbalanciert werden, um Klarheit zu wahren und das Design nicht zu überladen. Wir verwenden Sapphire, einen Blauton, der ursprünglich in einem der frühen Projekte von SatoshiPay vorkam: DTransfer, einer Blockchain-Lösung für sofortige, transparente und kostengünstige grenzüberschreitende Geschäftszahlungen. Vortex übernimmt außerdem Deep Pink von DTransfer und führt Xanthous für zusätzliche Lebendigkeit ein. Für Text verwenden wir Eerie Black, passend zu Amplitude, Pendulums Schwesternetzwerk.

E I N S A T Z D E R F A R B E N

Hellere und dunklere Varianten der Primärfarben wurden sorgfältig gewählt, um den Kontrast zu erhöhen und optimale Lesbarkeit über verschiedene Anwendungen hinweg sicherzustellen. Diese Abstufungen bieten Flexibilität im Design und ermöglichen dynamische Kompositionen, während Klarheit und Geschlossenheit erhalten bleiben. Mehr dazu im Abschnitt Design System.

Typografie

Der typografische Ansatz lässt sich von der Marke Pendulum inspirieren und nutzt eine Display-Schrift für Headlines und großformatigen Text sowie eine ergänzende Schrift für den Fließtext. Als Display-Schrift habe ich Red Hat Display gewählt, eine Sans-Serif, gestaltet von Jeremy Mickel für die Red Hat Foundry. Diese Schrift, Teil einer größeren Familie, verkörpert Red Hats Fokus auf Open-Source-Software und Innovation. Ihr kräftiger, geometrischer Stil mit starken Kontrasten und klaren Buchstabenformen macht sie ideal für Headlines und den Display-Einsatz.

Für den Fließtext habe ich Open Sans gewählt, eine humanistische Sans-Serif, gestaltet von Steve Matteson für die Ascender Corporation. Ihr klares, modernes Design sichert die Lesbarkeit und passt gut zur Display-Schrift. Zusätzlich haben wir Red Hat Mono aufgenommen, eine Monospace-Schrift, um Code wirkungsvoll darzustellen und Konsistenz mit dem übergreifenden typografischen System zu wahren.

Ergänzungsgrafiken

Angesichts des engen Zeitrahmens, in dem die Marke Vortex entwickelt wurde, entstanden die meisten Ergänzungsgrafiken mithilfe von KI, konkret Midjourney und Bearbeitung in Photoshop. Um Bilder zu erhalten, die zur Marke Vortex passen, nutzen wir diesen Prompting-Leitfaden:

Der variable Abschnitt ist bearbeitbar, während der feste Abschnitt Konsistenz und die Einhaltung der Markenrichtlinien sicherstellt. Parameter können je nach spezifischen Anforderungen angepasst werden, mit Ausnahme von --quality. Anpassungen sollten sorgfältig erfolgen, da manche Parameter experimentelle oder unvorhersehbare Ergebnisse liefern können. Damit das erzeugte Bild zu den Markenrichtlinien passt, ist das Beibehalten der Prompt-Struktur entscheidend. Sobald das Bild erzeugt ist, durchläuft es einen Verfeinerungsprozess in Adobe Photoshop für ein poliertes Ergebnis.

E I N S A T Z V O N S T Y L E - R E F E R E N C E - P A R A M E T E R N

Der Parameter --sref wurde in Midjourney Version 6 eingeführt, die im Februar 2024 erschien, genau als wir die Marke Vortex entwickelten. Diese Funktion erlaubt es Nutzern, bestimmte visuelle Ästhetiken aus Referenzbildern in ihre KI-generierten Kreationen zu übernehmen. Indem man --sref gefolgt von der URL eines Referenzbildes an einen Prompt anhängt, kann man Midjourney anleiten, Elemente wie Farbpaletten, Licht, Texturen und die Gesamtstimmung des Bildes nachzubilden. Diese Funktion verbessert die stilistische Geschlossenheit der Ergebnisse und bietet mehr kreative Kontrolle und Konsistenz.

Bei Vortex haben wir den Einsatz von --sref eingeführt, um die Grafiken der Marke aufzuwerten und sie von Pendulums visueller Identität abzuheben. Durch eine bestimmte Style Reference haben wir 3D-inspirierte Bilder erzeugt, die der Marke Vortex einen frischen, dynamischen Look verliehen.

Wie zuvor bleibt der variable Abschnitt bearbeitbar, während der feste Teil minimal ist und nur die Farbe festlegt. Die Bilderzeugung wird vor allem durch den --sref-Parameter 723685491 gesteuert, damit das Ergebnis zum gewünschten Stil passt.

Dieses Bild wurde bewusst erstellt, um Logotypen einzubinden, und zeigt eine kreative Anwendung von Midjourneys Möglichkeiten. Da das Tool Text oder Logos nicht zuverlässig verarbeitet, werden diese Elemente in der Bearbeitungsphase ergänzt. Im Kontext stärkt die finale Komposition die Identität der Marke und hebt ihre visuelle Wirkung.

Infografik-Stil

Infografiken spielen eine zentrale Rolle dabei, den Zweck von Vortex an Nutzer, Investoren und andere Stakeholder zu vermitteln. Von Anfang an haben wir einen unverwechselbaren Infografik-Stil entwickelt, geleitet von der Markenidentität von Vortex. Unser Ansatz betont Vielseitigkeit und ermöglicht die nahtlose Einbindung von Drittprojekten und unterschiedlichen Workflows.

Vortex Landingpage

Die erste große Designaufgabe für Vortex war das Erstellen einer Landingpage. Anfangs diente sie als vereinfachte Website, während die Tech- und Produktteams die eigentliche Lösung entwickelten. Ihr Hauptzweck war es, Anmeldungen für die Warteliste zu sammeln und einen Überblick über unser Angebot zu geben. Mit der Zeit wuchs die Landingpage und entwickelte sich zu einer umfassenderen Website.

Um Engagement und Einprägsamkeit zu erhöhen, habe ich eine Animation gestaltet, die Dynamik hinzufügte und zugleich die vom Team entwickelte Benutzeroberfläche zeigte. Die Seite enthält außerdem eine Infografik, die visuell erklärt, wie die Lösung funktioniert. Zentrale Calls-to-Action (CTAs) sind gezielt platziert, darunter Optionen wie „Invest“ für potenzielle Investoren, „Launch App“ für Nutzer und „Contact Us“ oder „Support“ für Community-Anfragen oder technische Hilfe.

Vortex Design System

Das Gestalten der Vortex-Benutzeroberfläche wurde unverzichtbar, nachdem das Tech-Team die Lösung als voll funktionsfähige Off-Ramping-Plattform ohne benutzerfreundliche Oberfläche entwickelt hatte. Anfangs war die einzige Möglichkeit, mit dem System zu interagieren, über Code, was den Bedarf an einer zugänglichen UI verdeutlichte.

Das erforderte eine enge Zusammenarbeit zwischen dem Tech-, Produkt- und Marketing-Team. Zum Auftakt habe ich Wireframes auf Basis von detailliertem Input des Produktteams erstellt. Diese dienten als Grundlage für iterative Diskussionen und stellten sicher, dass das Design sowohl zu den technischen Möglichkeiten als auch zu den Bedürfnissen der Nutzer passte, bevor es in die nächsten Phasen ging.

Das Design System

Durch diese Diskussionen wurde klar, dass ein strukturiertes, aber einfaches Designsystem, ähnlich dem für Pendulum entwickelten, unverzichtbar war. Ein solches System würde mehr Flexibilität beim Gestalten von Interfaces ermöglichen, Nutzerfeedback des Produktteams einbinden und effizientes Iterieren erlauben.

Um diesen Bedarf zu decken, begann ich mit der Entwicklung des Vortex Design Systems. Ziel war es, nach und nach neue Komponenten zu integrieren und zugleich die Weiterentwicklung der Wireframes zu ihren finalen Versionen zu verschlanken. Dieser Ansatz stellte sicher, dass Feedback verschiedener Stakeholder effektiv einfließen konnte, was den Designprozess schneller und anpassungsfähiger machte.

Farben

Die Farbpalette baut auf den Markenrichtlinien auf und lässt sich vom Color System von Google Material Design inspirieren. Jede Farbe bietet eine Reihe von Abstufungen, von hell (50) bis dunkel (900), was Tiefe und Betonung für Elemente wie Hover-States, Schatten und Hintergründe ermöglicht.

  • Primärfarbe: Sapphire 500, ergänzt durch dunklere Abstufungen (700, 900) und hellere Abstufungen (300, 100, 50) für mehr Vielseitigkeit.

  • Sekundärfarbe (Akzent): Deep Pink 500, mit helleren Abstufungen (300, 100, 50) für verschiedene Designanforderungen.

  • Tertiärfarbe (Akzent): Xanthous 500, für Highlights und mit helleren Abstufungen (300, 100) für unterschiedliche Zwecke.

  • Textfarbe: Eerie Black 500, mit helleren Abstufungen (300, 100) für Vielseitigkeit.

  • Warnfarbe: Vermillion 500, im Designsystem eingeführt, um den Nutzer über potenziell gefährliche Aktionen zu informieren.

Typografie

  • Überschriften: Red Hat Display in drei Größen: 36 pt, 24 pt und 18 pt.

  • Untertitel: Red Hat Display auch für Untertitel mit 24 pt und 15 % Laufweite.

  • Fließtext: Open Sans für Fließtext in drei Größen: 18 pt, 16 pt und 12 pt.

  • Code: Red Hat Mono für Code in drei Größen: 18 pt, 16 pt und 12 pt.

Für Mobilgeräte verwenden wir etwas kleinere Headlines und größere Fließtextgrößen für bessere Lesbarkeit:

  • Überschriften: Red Hat Display in drei Größen: 32 pt, 24 pt und 20 pt.

  • Untertitel: Red Hat Display auch für Untertitel mit 22 pt und 15 % Laufweite.

  • Fließtext: Open Sans für Fließtext in drei Größen: 20 pt, 18 pt und 14 pt.

  • Code: Red Hat Mono für Code in drei Größen: 20 pt, 18 pt und 14 pt.

Icons

Icons sind in drei Formaten verfügbar, die die User Experience verbessern und die Navigation durch die Oberfläche verschlanken:

  • Allgemeine Icons (24 px): Diese Icons verbessern die Usability, indem sie Nutzer durch die Oberfläche führen. Inspiriert von Pendulums Design, kombinieren sie gefüllte und Outline-Stile für mehr Vielseitigkeit und Skalierbarkeit.

  • Große Icons (80 px): Zugeschnitten auf zentrale Interaktionen und mobile Menüpunkte, bieten diese Icons bessere Sichtbarkeit und Fokus.

  • Website-Iconografie: Interaktive Icons, speziell für den Einsatz auf der Landingpage gestaltet, für eine dynamische und ansprechende User Experience.

Transaktionen

Die Transaktions-Screens entwickelten sich von den ersten Wireframes zu einem polierten und benutzerfreundlichen Design. Der zentrale Test-Screen zeigt eine Transaktion von USDC auf Polygon, mit einem Standard-Eingabebetrag von 300, die in EUR ausgezahlt wird. Für Transparenz bleibt das Gebühren-Dropdown zunächst geschlossen, enthält aber eine klare Botschaft, die bestätigt, dass es keine versteckten Gebühren gibt. Außerdem wird angegeben, dass die Transaktion voraussichtlich innerhalb von 5 Minuten ankommt.

Ein entscheidendes Element ist die Warnmeldung über dem Bestätigen-Button. Sie betont, wie wichtig eine stabile Internetverbindung ist, besonders für Nutzer auf Mobilgeräten mit möglicherweise unzuverlässigen Datennetzen. Diese Vorsichtsmaßnahme hilft, das Risiko zu minimieren, dass während der Transaktion Beträge verloren gehen.

Die folgenden Screens decken drei mögliche Ergebnisse ab: erfolgreiche Überweisung, fehlgeschlagene Überweisung und ausstehende Überweisung. Jeder Screen zeigt die Transaktions-ID prominent an, mit einer praktischen Kopieroption für den Nutzer. Zusätzlich erhalten Nutzer einen direkten Link zum Telegram-Kanal, um das Support-Team zu kontaktieren.

Um die Kommunikation zu verbessern, haben wir ein Feld eingebaut, in das Nutzer ihre E-Mail-Adresse eintragen können. Damit können wir Updates teilen und weitere Informationen zur App bereitstellen, was besonders wichtig ist, da die App keinen Login erfordert. Nutzer verbinden ihre Wallets direkt, es werden aber keine weiteren persönlichen Daten erhoben.

Statusanzeigen

Statusanzeigen spielen eine entscheidende Rolle in der Oberfläche, besonders in Situationen, in denen Nutzer Transaktionen in ihren Wallets signieren oder auf die Verarbeitung warten müssen. Um diesen Prozess reibungsloser zu machen und mögliche Unsicherheit zu reduzieren, haben wir Ladebalken und schrittweise Fortschrittsanzeigen eingebaut.

Diese Elemente sollen Transparenz wahren und sicherstellen, dass Nutzer während des gesamten Prozesses informiert sind. Klares Feedback verhindert Situationen, in denen Nutzer die Oberfläche aus Frust oder Unsicherheit schließen, was die Transaktion unterbrechen und zu verlorenen Beträgen führen könnte.

Ergebnis

Vortex wurde Anfang 2024 zunächst in Brasilien gelauncht und erhält seit dem Release Lob von den Nutzern. Jahrelang war das Umwandeln von Stablecoins in Landeswährung langsam und teuer. Vortex' einfaches Tool beseitigt diese Ineffizienzen wirkungsvoll. Das beweist, dass selbst komplexeste Technologie zugänglich wirken kann, wenn Design mit Klarheit und Vertrauen vorangeht. Der Service weitet seine Reichweite nun auf die Eurozone und Argentinien aus, mit dem Plan, künftig ein globales Publikum zu bedienen.

„Mit Vortex können wir unseren Kunden benutzerfreundliche und kostengünstige Gateways in Fiat-Währungen bieten.“

— Eudelio Garza, CEO von

— Eudelio Garza, CEO von

„Wow! Vortex Finance ist eine Augenweide und dauert nur ein paar Minuten! Probier es gleich selbst aus.“

— Seyi Akin-Olugbemi, CEO und Co-Founder von

— Seyi Akin-Olugbemi, CEO und Co-Founder von

© 2026 Klaus Dietz

Die Inhalte und Materialien in diesem Portfolio wurden von Klaus Dietz gestaltet, in einigen Fällen in Zusammenarbeit mit den genannten Teams. Alle Rechte vorbehalten. Kein Teil dieser Website darf in irgendeiner Form oder mit irgendwelchen Mitteln (elektronisch, mechanisch, durch Fotokopie, Aufzeichnung oder auf andere Weise) ohne schriftliche Genehmigung des Autors reproduziert, gespeichert oder übertragen werden. © 2026.

© 2026 Klaus Dietz

Die Inhalte und Materialien in diesem Portfolio wurden von Klaus Dietz gestaltet, in einigen Fällen in Zusammenarbeit mit den genannten Teams. Alle Rechte vorbehalten. Kein Teil dieser Website darf in irgendeiner Form oder mit irgendwelchen Mitteln (elektronisch, mechanisch, durch Fotokopie, Aufzeichnung oder auf andere Weise) ohne schriftliche Genehmigung des Autors reproduziert, gespeichert oder übertragen werden. © 2026.

© 2026 Klaus Dietz

Die Inhalte und Materialien in diesem Portfolio wurden von Klaus Dietz gestaltet, in einigen Fällen in Zusammenarbeit mit den genannten Teams. Alle Rechte vorbehalten. Kein Teil dieser Website darf in irgendeiner Form oder mit irgendwelchen Mitteln (elektronisch, mechanisch, durch Fotokopie, Aufzeichnung oder auf andere Weise) ohne schriftliche Genehmigung des Autors reproduziert, gespeichert oder übertragen werden. © 2026.