Branche
Fintech (Krypto / Blockchain)
Kunde
SatoshiPay GmbH
Rolle
Pendulum
Sich in der Komplexität von Blockchain-Netzwerken zurechtzufinden, kann für Einsteiger eine Herausforderung sein. Und selbst erfahrene Nutzer kämpfen mit oft überkomplizierten Interfaces und Konzepten, die den Zugang erschweren.
Auf dieser Seite findest du Case Studies, die meine Beiträge zum Blockchain-Netzwerk Pendulum und seinen Schwesterprojekten Amplitude und Spacewalk zeigen. Jedes davon geht unterschiedliche Herausforderungen an, mit Fokus auf Benutzerfreundlichkeit und Wachstum.
Kurz gefasst
Was ist Pendulum?
Pendulum ist ein Blockchain-Netzwerk, das Fiat-Währungen mit DeFi verbindet und Stablecoins über das Polkadot-kompatible Substrate-Framework integriert. Zum Ökosystem gehört die integrierte Spacewalk-Bridge, ein Tool, mit dem du Assets sicher vom Stellar-Netzwerk zu Polkadot bewegen kannst, sowie Amplitude, eine Schwesterchain auf Kusama, die als Testumgebung für innovative Anwendungen dient.
Was war meine Rolle?
2022 bin ich als Werkstudent im Grafikdesign zum Unternehmen gekommen, während ich meinen Master gemacht habe, und habe an zentralen Designinitiativen im ganzen Unternehmen mitgewirkt. Dazu gehörte die Unterstützung bei der Entwicklung der Markenidentitäten für unsere Projekte Pendulum, Amplitude und Spacewalk, das Erstellen von Merchandising-Assets und das Gestalten von Marketingmaterialien im Einklang mit den strategischen Zielen. Außerdem habe ich an Web- und Editorial-Inhalten gearbeitet, um die visuelle Kommunikation zu stärken, und Marktforschung betrieben, um Designverbesserungen zu fundieren und die User Experience zu verbessern. Später habe ich als leitender Brand Designer mehr Verantwortung übernommen und eng mit den Produkt-, Marketing- und Operations-Teams zusammengearbeitet, um ein breites Spektrum an Designanforderungen abzudecken. In dieser Rolle habe ich KI-gestützte Tools integriert, um Branding-Prozesse zu optimieren, die Produktionseffizienz zu steigern und Konsistenz über alle Touchpoints hinweg zu wahren.
E R S T E C A S E S T U D Y
Pendulums Medium-Blog verbessern
Zusammenfassung
Der Pendulum-Blog lief bereits einige Jahre, aber mit begrenztem Erfolg. Um seine Reichweite zu vergrößern, bekam ich die Aufgabe, die Markenkonsistenz zu stärken und die Gesamtstruktur zu verbessern. Durch das Identifizieren zentraler Content-Kategorien und den Vorschlag einer klaren visuellen Identität sollte die Navigation verbessert und mehr Nutzer dazu gebracht werden, die Inhalte zu lesen und sich mit ihnen zu beschäftigen. Obwohl die vorgeschlagenen Verbesserungen sehr gut ankamen, wurde später ein komplettes Rebranding gestartet, sodass diese Lösung nicht in ihrer ursprünglichen Form umgesetzt wurde.
Herausforderung
Die visuelle Wirkung und Konsistenz unseres Blogs steigern, indem standardisierte Assets entwickelt werden, um die fehlende Geschlossenheit zu beheben, die daraus entstand, dass es vor meinem Einstieg keinen eigenen Designer gab.
Ziel
Ein neues Titelbild-System für den Medium-Blog vorstellen, das die Navigation und das Verständnis der verschiedenen Inhaltstypen erleichtert: Lehrartikel, Pendulum-News, Amplitude-News und Partnerschaftsankündigungen.
Design-Audit des aktuellen Blogs
KATEGORIE – PENDULUM-NEWS
Ich habe verschiedene Layouts beobachtet, darunter Bilder mit und ohne Text, unterschiedliche Ausrichtungen und Schriftgrößen.
Das Pendulum-Logo wird uneinheitlich eingesetzt, was den Bedarf an klaren Nutzungsrichtlinien zeigt.
Das Standardisieren der Bildmaße für jede Plattform würde sicherstellen, dass sich das System effektiv an ihre Anforderungen anpasst.
KATEGORIE – AMPLITUDE-NEWS
Die Bilder sind hier einheitlicher und zeigen zwei ähnliche Designsysteme mit Variationen in Farbe und Schrift. Die Bildgrößen bleiben jedoch uneinheitlich und sollten standardisiert werden.
Außerdem zeigt ein älterer Beitrag eine vorläufige Version des Amplitude-Logos, die auf die finale Version aktualisiert werden sollte, um die Markenkonsistenz zu stärken.
KATEGORIE – PARTNERSCHAFTSANKÜNDIGUNGEN
Dieses Thema bleibt in Farbe und Design konsistent und zeigt zwei Systeme: eines mit Icons und Farben, ein anderes mit vollständigen Logos auf rein schwarzem Hintergrund, jeweils mit unterschiedlichen Canvas-Größen.
Ideal wäre es, diese zu einem vielseitigen, klaren Bild zu vereinen, das verschiedene Logotypen (mit oder ohne Symbol) aufnimmt und ergänzende visuelle Elemente enthält.
KATEGORIE – LEHRINHALTE
Dieses Thema bietet die größte Flexibilität bei Design und Typografie. Vielen Beitragsbildern fehlt Text, und wenn Text enthalten ist, ist er zentriert und ohne einheitliches Format. Auch Logogrößen, Positionierung der Elemente und Grafikstile variieren stark.
Recherche, Moodboard und Styleboard
Es wurde umfassend recherchiert, um den aktuellen Stand der Blogbeiträge zu bewerten und zu verstehen, wie ähnliche Unternehmen kommunizieren. Die ausgewählten Unternehmen stachen durch ihr starkes Markenbild und visuell ansprechende Blogbeitrags-Designs heraus. Ihre Bilder sind leicht verständlich und haben eine geschlossene Identität, mit bemerkenswerten Gemeinsamkeiten, die es wert sind, betrachtet zu werden.
Das Moodboard zeigt Referenzen, die den gewünschten Ton für den Vorschlag einfangen. Es geht darum, die beabsichtigte Stimmung zu vermitteln, statt einen bestimmten visuellen Stil zu kopieren, denn Pendulum und Amplitude sollten ihre eigenen, unverwechselbaren visuellen Identitäten aufbauen, statt andere zu imitieren.
Aufbauend auf dem Moodboard und den Markenrichtlinien habe ich ein Styleboard erstellt, das verschiedene Einflüsse aufnimmt, um den visuellen Ansatz für Blog- und Social-Media-Beiträge zu erweitern. Der Fokus dieses Styleboards liegt auf Grafikstil und Layout-Variationen und bietet eine Bandbreite an Möglichkeiten für das visuelle Design, statt bestimmte Inhalte zu betonen.
Ergebnis
Dieses System unterscheidet Beitragstypen durch Farbe und verwendet die Schriftart Lexend (Readex Pro), passend zu den Websites von Pendulum und Amplitude, mit linksbündigem Text.
Die Canvas misst 1200 x 630 px, mit einem Rand von 61 px und einem 123 px hohen unteren Band für Logos. Eine Kopfzeile zeigt den Beitragstyp an, etwa News oder About, mit einer vorgeschlagenen Kopfzeile für Lehrinhalte.
Der Hintergrund enthält dynamische, generative Grafik mit Punkten und Linien, passend zur aktuellen visuellen Identität der Website.
News
About (Lehrinhalte)
Partnerschaft
Fazit
Das vorgeschlagene visuelle System bot eine solide Grundlage für konsistentes und flexibles Branding, mit Raum für künftiges Wachstum. Sekundäre Schriften und Farben hätten die kreativen Möglichkeiten erweitert, während das Erkunden generativer Kunst die Chance bot, dynamische, ansprechende Visuals im Einklang mit der Marke zu schaffen. Auch ein geschlossenes Icon-Set hätte die Konsistenz über Plattformen hinweg verbessern können. Insgesamt waren diese Elemente darauf ausgelegt, aktuelle Anforderungen zu erfüllen und sich reibungslos an künftige Herausforderungen anzupassen.
Leider wurde das visuelle System nicht umgesetzt, da Pendulums CMO den Fokus auf ein komplettes Rebranding verlagerte. Mit diesem Strategiewechsel war die visuelle Identität des Blogs keine Priorität mehr und wurde hinfällig.
Z W E I T E C A S E S T U D Y
Pendulum Rebranding
Zusammenfassung
Pendulums technisches Fundament war robust, doch dem ursprünglichen Branding fehlten die Tiefe, Geschlossenheit und visuelle Wirkung, um die vielfältige Zielgruppe zu erreichen. In Zusammenarbeit mit Wirelab, einer renommierten Branding-Agentur, sollte das Rebranding-Projekt diese Lücken schließen und eine geschlossene Identität schaffen, die Pendulums Mission und Werte auf den Punkt bringt.
Als Werkstudent im Grafikdesign bin ich in dieser prägenden Phase zum Rebranding dazugestoßen und habe Hand in Hand mit dem externen Wirelab-Team gearbeitet. Meine Beiträge spielten eine zentrale Rolle bei der Gestaltung der visuellen Markenidentität und stellten sicher, dass das finale Design zu Pendulums Vision passte und sich im umkämpften Blockchain-Umfeld abhob.
Herausforderung
Die zentralen Schwächen der Marke Pendulum überwinden, die zu diesem Zeitpunkt waren:
Fehlende Identität: Das ursprüngliche Logo, die Farbpalette und die Grafiken waren zu generisch, um sich im umkämpften Blockchain-Umfeld abzuheben.
Uneinheitliche Botschaft: Den visuellen Elementen fehlte die konzeptionelle Geschlossenheit, wodurch es schwerfiel, Pendulums Mission über Plattformen hinweg wirkungsvoll zu vermitteln.
Geringes Engagement: Die begrenzte Anpassungsfähigkeit des Designs führte zu wenig Nutzerbindung und geringem Wiedererkennungswert.
Skalierungsprobleme: Dem Designsystem fehlte die Flexibilität, um wachsende Interfaces über Web, Mobile und andere Plattformen hinweg zu unterstützen.
Ziel
Eine visuell ansprechende Marke und ein geschlossenes Designsystem gestalten, das Pendulums Mission klar widerspiegelt, den Weg für eine dezentrale Zukunft zu ebnen, und der Marke hilft, sich von der Konkurrenz abzuheben.
Bisheriges Pendulum-Logo und Farbpalette
Überarbeitung der temporären Ergänzungsgrafiken
Die bisherigen Ergänzungsgrafiken von Pendulum bestanden aus gepunkteten Bildern in Electric Blue, ohne klare Richtlinien. Nach meinem Einstieg habe ich diese Visuals als Übergangslösung überarbeitet und sie am Konzept des „Treffpunkts“ ausgerichtet, um Pendulums Rolle als Brücke zwischen Fiat und DeFi hervorzuheben. Diese Überarbeitung nutzte generative Kunst und führte das Thema „Ordnung und Chaos“ ein, dargestellt durch strukturierte konzentrische Kreise, die in einen dynamischen, chaotischen Fluss übergehen.
Recherche und Audit
Unser Rebranding-Prozess begann mit einer Bestandsaufnahme von allem, was wir hatten. Über mehrere Wochen habe ich Pendulums gesamtes Markenumfeld auditiert, darunter Websites, Social-Media-Beiträge, Docs und Blog-Inhalte, und ihm damit einen Marken-Gesundheitscheck verpasst. Gleichzeitig haben wir als Team einen ausführlichen internen Workshop organisiert, in dem ich das Team in den Grundlagen des Brandings geschult habe. In diesem Workshop wurde die Essenz von Pendulum auf drei Säulen verdichtet:
Freiheit durch Dezentralisierung
Eine futuristische Finanzvision
Dynamisches Design für Anpassungsfähigkeit
Aufbauend auf den Ergebnissen von Audit und Workshop habe ich die Pendulum-Community um Feedback gebeten. Die Community, überwiegend auf X und Twitter aktiv, half zu bestätigen, dass die im Workshop definierten Säulen stimmten. Gleichzeitig habe ich auch die Stimmung zu Pendulum auf X analysiert. Rund 70 % der Kommentare drückten Begeisterung für Pendulums Vision aus, ein beträchtlicher Teil bemerkte aber auch Verwirrung rund um Branding- und Stablecoin-Details. Manche stellten sogar grundlegende Fragen wie „Ist Pendulum ein Coin oder ein Netzwerk?“. Das zeigte uns, dass die Leute unserer Technologie vertrauten, sich über unsere Rolle aber nicht immer im Klaren waren. Diese Recherchephase machte deutlich: Klarheit und Glaubwürdigkeit waren die obersten Prioritäten für die neue Marke.
Affinity-Diagramm mit Erkenntnissen aus dem internen Workshop und dem Community-Feedback (auf Englisch).
Die Community-Umfragen und Workshop-Diskussionen zeigten außerdem, dass sich Pendulums Identität vertrauenswürdig und futuristisch anfühlen sollte. Eine interne Erkenntnis war zum Beispiel, dass Finanz-Zielgruppen wie NGOs und Regulierungsbehörden Vertrauen und Zurückhaltung priorisierten, während krypto-affine Nutzer sich einen hochmodernen Look wünschten.
Diese Recherche bestimmte unsere und Wirelabs kreative Richtung und untermauerte die anstehenden Designentscheidungen. Sie gab allen im Team die Sicherheit, dass die neuen Farben, das Logo und die Botschaft nicht nur gut aussehen, sondern auch bei der Zielgruppe ankommen würden.
Designprozess
LOGO-REDESIGN
Der neue Schriftzug wurde so gestaltet, dass er die Essenz des Konzepts „Pendel“ einfängt und dessen Fähigkeit betont, den doppelten Handlungsraum der Marke zu symbolisieren. Dieser Fokus wurde früh im Branding-Prozess festgelegt und sorgte für ein geschlossenes Ergebnis, das sowohl bei Wirelab als auch beim Pendulum-Team Anklang fand.
FARBEN
Die neue Farbpalette wurde als Triade angelegt: ein dunkler Ton, ein heller Ton für Hintergründe und eine leuchtende, neon-inspirierte Akzentfarbe für ein futuristisches Gefühl. Die gewählten Farben folgen diesem Ansatz und führen zugleich Variationen ein, um die Dynamik der Marke zu verstärken.
Einige Zeit später wurde als Reaktion auf die Anforderungen aus der Nutzung der Marke in verschiedenen Kontexten eine neue Farbe eingeführt: Berkeley Blue. Diese Ergänzung erweitert die Palette und schafft neue Möglichkeiten für Farbanwendungen.
HERO IMAGE
Pendulums Hero Image zu gestalten war eine der anspruchsvollsten Aufgaben und erforderte mehrere Iterationen. Ziel war es, Pendulums unverwechselbare Identität (die Brücke zwischen einer strukturierten Vergangenheit und einer innovativen Zukunft) in einem einzigen Bild einzufangen. Der Prozess bestand darin, Disruption sorgfältig auszubalancieren, die zugrunde liegende Struktur hervorzuheben und die richtige Dichte zu erreichen. Nach ausgiebigem Erkunden fanden wir die ideale Komposition. Dieses Hero Image ist dafür gedacht, teilweise innerhalb verschiedener Kompositionen eingesetzt zu werden, statt zentriert wie hier gezeigt. Grund dafür ist der hohe Detailgrad, der sicherstellt, dass es andere Elemente im Design nicht überstrahlt.
Einige Zeit später habe ich wegen der Übernutzung des ursprünglichen Hero Image eine neue Version vorgeschlagen, die bevorzugt auf der Website verwendet werden sollte. Dieses Update passte zur Weiterentwicklung der Marke und war Teil einer breiteren Integration von KI in verschiedene Grafiken, die in den kommenden Abschnitten gezeigt wird.
TYPOGRAFIE
Typografie ist ein zentrales Element unserer Marke und vermittelt unsere Botschaft unmittelbar. Wir haben mehrere typografische Ansätze erkundet und uns für unterschiedliche Schriften für Headlines und Fließtext entschieden, um die Lesbarkeit zu sichern und zugleich einen klaren, seriösen und modernen Eindruck zu wahren.
Für Headlines haben wir Outfit gewählt, eine geometrische Sans-Serif von Smartsheet Inc. und Rodrigo Fuenzalida, wegen ihres neutralen Designs und der ausgezeichneten Lesbarkeit. Für den Fließtext haben wir Nunito Sans gewählt, eine ausgewogene Sans-Serif, die Outfit ergänzt und außergewöhnliche Klarheit bietet.
Nach einigen Monaten haben wir eine neue Schrift, Steelfish, in die Marke Pendulum aufgenommen. Diese schmallaufende Display-Schrift von Typodermic Fonts Inc. dient als Headline-Variante und macht die Marke vielseitiger. Sie ist besonders wirkungsvoll für Merchandise-Designs und kreativere Kompositionen.
SOCIAL-MEDIA-ASSETS
Die ersten Social-Media-Assets unter dem neuen Branding waren Bilder für Medium-Beiträge. Medium, viel genutzt von Pendulum und anderen Blockchain-Unternehmen, ist eine Online-Publishing-Plattform, bekannt für ihr klares, minimalistisches Design und den Fokus auf Lesbarkeit. Passend zu dieser Ästhetik haben wir schlichte, minimalistische Beitragsbilder gestaltet, die als ansprechende Einführungen in die Inhalte dienen.
Die Disruption durch KI
KONTEXT
Tools der künstlichen Intelligenz (KI) wie ChatGPT und Midjourney haben Designprozesse revolutioniert, besonders im Branding. Midjourney, ein KI-gestützter Bildgenerator, der 2022 gestartet ist, ermöglicht es Designern, schnell einzigartige Visuals und Konzepte zu erstellen, und erweitert die kreativen Möglichkeiten erheblich. Ebenso unterstützt ChatGPT, Ende 2022 von OpenAI vorgestellt, das Entwickeln von Markennarrativen, Slogans und ansprechenden Inhalten und stärkt so das Storytelling im Branding.
Bei der Entwicklung der Marke Pendulum haben wir diese Tools bewusst eingesetzt und darauf geachtet, dass ihre Nutzung dezent und natürlich bleibt. Dieser Ansatz erforderte Sorgfalt, um die allzu offensichtliche oder aufgesetzte Ästhetik zu vermeiden, die viele Unternehmen beim Einsatz KI-gestützten Designs ungewollt zur Schau stellen.
MIDJOURNEY
Midjourney war ein zentrales Tool in Pendulums Branding-Prozess und ermöglichte schnelles Ideenfinden und Experimentieren, während es Bilder erzeugt, die legitim für Branding-Zwecke genutzt werden können. Der Prozess umfasst das „Prompting“, bei dem sorgfältig formulierte Textbeschreibungen die KI dazu anleiten, bestimmte Bilder zu erzeugen. Damit die Ergebnisse zur Markenidentität passen und visuell konsistent bleiben, wurde der Prompting-Prozess verfeinert und als fester Bestandteil des Branding-Workflows dokumentiert.
Pendulum setzt von Anfang an auf sci-fi-inspirierte Bildwelten, die seine Kernwerte widerspiegeln: Geschwindigkeit, Sicherheit, Zugänglichkeit, Innovation, Offenheit, Dezentralisierung, Vertrauen und Inklusion. Diese Themen wurden in internen Diskussionen durchgehend aufgegriffen, oft mit Weltraum-Motiven wie Astronauten und Planeten, die den entdeckerischen Charakter von Krypto symbolisieren.
Die Recherche zu ähnlichen Marken wie Stellar, Centrifuge und Astar zeigte einen gemeinsamen Schwerpunkt auf Weltraum-Bildern und etablierte sie als natürliche visuelle Sprache der Branche. Selbst in externen Branding-Beratungen wurde die Idee vorgeschlagen, die Ästhetik von Blade Runner mit klassischem Banking zu verbinden. Auf dieser Grundlage haben wir das Pendulum-Universum entwickelt und uns dabei an die Markenrichtlinien, die Farbpalette und die übergreifende visuelle Identität gehalten, um ein skalierbares und ansprechendes Narrativ zu schaffen.
First, we create the image using Midjourney. The prompt should be structured like this:
Das Beibehalten der Prompt-Struktur sorgt dafür, dass das erzeugte Bild dezent zu den Markenrichtlinien passt. Um das Bild weiter zu verfeinern, wird ein schrittweiser Bearbeitungsprozess mit Adobe Photoshop oder ähnlichen Anwendungen durchgeführt. Der Prozess umfasst folgende Schritte:
Neue Füllebene anlegen, mit der Farbe Tolopea #32253E, und den Mischmodus auf Aufhellen stellen.
Auf Auswahl -> Farbbereich gehen und Cyantöne wählen. Eine Einstellungsebene Farbton/Sättigung anlegen und die Töne so nah wie möglich an Bright Turquoise #1DE7DF bringen.
Auf Auswahl -> Farbbereich gehen und Magentatöne wählen. Eine Einstellungsebene Farbton/Sättigung anlegen und die Töne so nah wie möglich an Light Tolopea #907EA0 bringen.
Alle unnötigen Elemente entfernen, die von der KI erzeugt worden sein könnten, etwa zu helle Bereiche oder seltsame Formen.
KI-OPTIMIERTE SOCIAL-MEDIA-ASSETS
Das zweite Set an Social-Media-Assets nutzte KI, um die visuelle Wirkung zu steigern. Zu diesen Designs gehörten Bilder, die auf Twitter (jetzt X), Medium und unseren E-Mail-Newsletter zugeschnitten waren.
WEBSITE
Bei Pendulum habe ich das Website-Design und die Updates in Zusammenarbeit mit Webflow-Entwicklern verantwortet. Mit der Zeit haben wir den Prozess verschlankt, kleinere Updates selbst übernommen und Entwickler bei größeren Änderungen wie neuen Seiten hinzugezogen. Der Workflow folgte einem sprintbasierten Ansatz: Er begann mit dem Festlegen der Ziele, Lösungsvorschlägen, Prototyping in Figma und Tests, bevor die finalen Designs zur Umsetzung in Webflow an die Entwickler übergeben wurden. Vor meiner Zeit wurde Adobe XD genutzt, das aber wegen der besseren Zusammenarbeits- und Testmöglichkeiten durch Figma ersetzt wurde. Ich habe außerdem die volle Verantwortung für regelmäßige Updates übernommen, darunter Überarbeitungen der Roadmap und das Ergänzen neuer Teammitglieder, die ich eigenständig umgesetzt habe.
Die Pendulum-Website integriert KI-generierte Elemente dezent über verschiedene Seiten hinweg und stärkt so die visuelle Wirkung der Marke, ohne die Botschaft zu überlagern. Ihr Design lässt Raum für interne und externe Markenelemente und sorgt für eine nahtlose Verbindung zu Pendulums Identität.
Bewusst wurde entschieden, auf der Hauptseite auf Animationen zu verzichten und die Klarheit und Präsenz der Informationen über visuelle Effekte zu stellen. Die Website behält eine klare, moderne Ästhetik im Einklang mit der Farbpalette und Typografie der Marke bei und vermittelt so die Kernwerte wirkungsvoll. Die Navigation ist intuitiv, und die Inhalte sind für gute Lesbarkeit strukturiert, mit Weißraum und visuellen Hierarchien, die den Blick des Nutzers lenken. Infografiken und Diagramme sind gezielt eingebunden, um komplexe technische Konzepte zu vereinfachen und zu verdeutlichen.
Infografiken
Während meiner Zeit bei Pendulum war das Erstellen von Infografik-Inhalten in verschiedenen Formaten und Komplexitätsgraden eine meiner häufigsten Aufgaben. Diese Infografiken sollten komplexe Themen vereinfachen und visuell erklären, zugeschnitten auf unterschiedliche Zielgruppen, darunter reguläre Pendulum-Nutzer, Investoren und NGOs.
Diese Infografik führt Nutzer wirkungsvoll durch einen schrittweisen Prozess und nutzt Pfeile, um eine logische, leicht nachvollziehbare Abfolge zu schaffen. Der Einsatz von Farbe verbessert das Design, indem er den Nutzern hilft, zwischen Aktionen und Abschnitten zu unterscheiden, während zentrale Aktionen deutlich hervorgehoben werden.
Für ein breites Publikum konzipiert, auch für Einsteiger im Krypto-/DeFi-Bereich, bietet die Infografik klare und einfache Anleitungen und setzt kein Vorwissen voraus. Diese Zugänglichkeit stellt sicher, dass auch neue Nutzer jedem Schritt sicher folgen können.
Die Infografik hat sich als sehr wirkungsvoll erwiesen und die Zahl der Nutzer, die auf Zenlink Liquidität bereitstellen, erfolgreich erhöht, indem sie komplexe Aufgaben in ein zugängliches und visuell ansprechendes Format übersetzt.
Diese Infografik wurde erstellt, um das komplexe Konzept von Stablecoins in B2B-Überweisungsprozessen klar und visuell zu vermitteln. Das Hauptziel war es, ein hochtechnisches Thema zu vereinfachen und zugleich seine Vorteile hervorzuheben, sodass es für kleine und mittlere Unternehmen (KMU) mit wenig Wissen über Blockchain-Technologie zugänglich wird. Als datengetriebenes Narrativ angelegt, betont die Infografik den Nutzen der vorgeschlagenen Lösung auf ansprechende Weise. Da sie für Nutzer gedacht war, die das Thema bereits aus einem früheren Meeting kannten, konzentriert sich der Inhalt auf untermauernde Daten statt auf einführende Erklärungen.
Fazit
Beim Redesign der Marke Pendulum ging es nicht nur darum, ein Logo aufzufrischen oder Farben zu aktualisieren: Es ging darum, Identität und Sinn in Einklang zu bringen. Durch Audits, Workshops und intensives Community-Engagement haben wir eine zentrale Spannung aufgedeckt: die Notwendigkeit, Vertrauen und Klarheit mit Innovation und Ambition auszubalancieren. Das neue Markensystem ist das Ergebnis dieses Prozesses, selbstbewusst, strukturiert und klar zukunftsorientiert.
Der Launch stieß auf positives Feedback. Im ersten Monat stieg das Engagement bei X-Beiträgen um 6,2 %. Die Stimmung in der Community war ausgesprochen positiv, Antworten und Reposts bezeichneten die Marke oft als „professionell“, „cool“ und „clean“. Der Marken-Launch fiel außerdem damit zusammen, dass Pendulum sich einen Parachain-Slot auf Polkadot sicherte, die Auktion in Rekordzeit gewann und damit den ersten Meilenstein eines neuen Kapitels für das Projekt setzte.
Indem wir komplexe Ideen in klare Visuals und eine geschlossene Botschaft übersetzt haben, gaben wir Pendulum ein Fundament, das mit seinem Ökosystem wachsen kann. Es spricht jetzt sowohl krypto-affine Nutzer als auch institutionelle Partner fließend an, ohne seine Persönlichkeit oder Vision zu verlieren. Am wichtigsten: Es kommt bei der Community an, die es mitgeprägt hat.
D R I T T E C A S E S T U D Y
Pendulum Portal und Design System
Zusammenfassung
Das Pendulum Portal ist eine Webanwendung, mit der Nutzer ihre Interaktionen mit den Parachains Pendulum und Amplitude verwalten. Es dient als Einstiegspunkt für zentrale Aufgaben wie das Verfolgen von Netzwerkkennzahlen, das Verwalten von Kontoständen und das Ausführen von Token-Transaktionen, alles in einer schlanken, benutzerfreundlichen Oberfläche. Als Pendulums Ökosystem wuchs, kam das Portal kaum noch mit. Angesichts der Bedeutung dieser Oberfläche, die den wichtigsten Weg zur Interaktion mit der Chain darstellt, habe ich ihr Redesign vorgeschlagen und geleitet. Ich habe Probleme wie fragmentierte Seiten, uneinheitliche UI-Muster und nicht abgestimmte Markenelemente angegangen, die es Nutzern schwer machten, sich sicher zurechtzufinden. Das Ergebnis ist eine flexible, geschlossene Oberfläche, die Wachstum unterstützt, Reibung reduziert und die Identität des Projekts besser widerspiegelt.
Herausforderung
Pendulums bestehendes Portal war mit der Zeit organisch gewachsen. Jeder neue Abschnitt und jede neue Komponente wurde auf den vorherigen draufgesetzt, was zu einer immer unzusammenhängenderen Experience führte. Die Navigation wirkte fragmentiert, das Verhalten auf Mobilgeräten war uneinheitlich, und visuelle Muster variierten oft von Seite zu Seite. Das Fehlen einer klaren UI-Logik bremste die Entwicklung und erschwerte es, die Markenkonsistenz zu wahren. Was wir brauchten, war nicht nur ein Redesign einzelner Elemente, sondern ein solides Fundament für nachhaltiges Skalieren.
Ziel
Wir setzten uns zwei Ziele: erstens, Pendulums digitale Präsenz unter einer einzigen, stimmigen Designsprache zu vereinen. Zweitens, ein flexibles Komponentensystem aufzubauen, das es dem Produktteam ermöglicht, neue Abschnitte zu erstellen, zu erweitern und zu pflegen, ohne jedes Mal das Rad neu zu erfinden. Das erforderte, die Architektur des Portals neu zu denken, eine wiederverwendbare Komponentenbibliothek zu erstellen und Markenkonsistenz sowie Barrierefreiheit über alle Touchpoints hinweg sicherzustellen.
Recherche & Grundlage
Bevor ich in UI oder Komponenten eingestiegen bin, wollte ich verstehen, wie Nutzer das bestehende Ökosystem erlebten. Ich begann mit einem schnellen Content- und Traffic-Audit: Fast 42 % der Portal-Besucher sprangen ab, ohne eine Aktion auszuführen. Die mobile Nutzung lag bei rund 38 %, doch viele Seiten reagierten auf kleineren Bildschirmen schlecht, was die Navigation erschwerte. Diese Lücken halfen, unsere Prioritäten zu bestimmen
Responsiveness verbessern
Informationen klar strukturieren
Ein Designsystem bauen, das flexibel genug ist, um über verschiedene Use Cases und Zielgruppen hinweg zu skalieren.
PORTAL DESIGN AUDIT
Ein interner Design-Audit wurde mit Teilnehmenden aus den Produkt- und Marketing-Teams durchgeführt. Ich habe diese Initiative geleitet und dabei auch die Grundlagen des UI-Designs erklärt, damit wir auf demselben Stand sind, da wir unterschiedlich viel Wissen darüber hatten. Die Erkenntnisse waren folgende:
Zu einfache Farbpalette:
Die Oberfläche stützt sich auf 3–4 Grundtöne, was die visuelle Hierarchie verflacht und das dynamische Gefühl des Designs reduziert. Die breitere Farbpalette der Marke Pendulum sollte eingebunden werden, um eine lebendigere und ansprechendere Oberfläche zu schaffen.Übermäßiger Einsatz von Nunito Sans:
Nunito Sans wird stark über Menüs, Infoblöcke und Buttons hinweg genutzt, während die Schrift Outfit nur begrenzt zum Einsatz kommt. Outfit wird zwar passend in Titeln und Eingabefeldern verwendet, könnte aber stärker in CTAs oder größeren Überschriften genutzt werden, um zentrale Aktionen besser abzuheben und die visuelle Hierarchie zu verbessern.Zu schwache Hervorhebung interaktiver Elemente:
Klickbare Elemente wie Buttons und Links verschmelzen mit dem umgebenden Inhalt, was sie weniger intuitiv macht. Interaktive Komponenten brauchen klarere visuelle Hinweise wie Hover-States, Schatten oder Akzentfarben, um die Usability zu verbessern.Schwache Hierarchie in bestimmten Screens:
Im Deposit-Screen wirken alle Elemente visuell gleich, wodurch der Inhalt unformatiert erscheint.
Im Swap-Screen würde die Gebührenaufschlüsselung von einer besseren Unterscheidung der Posten profitieren, um die Lesbarkeit zu verbessern.
Einsatz der Iconografie:
Die Icons sind zwar funktional, es gibt aber Potenzial, sie stärker an die gesamte visuelle Sprache der Marke anzupassen.
Die UI wirkt kahl, es fehlen ergänzende grafische Elemente wie Icons oder Illustrationen, die Navigation und Interaktionen intuitiver und ansprechender machen könnten. Solche Elemente könnten die gesamte User Experience verbessern und die Markenidentität stärken.
Diese Erkenntnisse halfen uns, die nächsten Schritte festzulegen: eine gemeinsame UI-Sprache zu entwickeln, die klar und skalierbar ist und zur Marke passt.
Pendulum Design System
COLORS
Die Farbpalette baut auf den Markenrichtlinien auf und lässt sich vom Farbansatz 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: Tolopea 500, ergänzt durch hellere Abstufungen (300, 200, 50) für mehr Vielseitigkeit.
Sekundärfarbe: Light Tolopea 500, mit dunkleren (700) und helleren Abstufungen (300, 100, 50) für verschiedene Designanforderungen.
Basisfarbe: Tranquil, überwiegend für Hintergründe genutzt, als neutrale Grundlage.
Akzentfarbe: Bright Turquoise, mit dem Designsystem eingeführt, um Lebendigkeit zu schaffen und zentrale Elemente hervorzuheben.
Alternativfarbe: Berkeley Blue, vor allem in Buttons genutzt, für zusätzliche Flexibilität im Design.
Diese strukturierte Palette sorgt für visuelle Konsistenz und ermöglicht zugleich dynamische, benutzerfreundliche Interaktionen über die gesamte Oberfläche.
TYPOGRAFIE
Auch wenn zu den offiziellen Markenschriften Outfit, Nunito Sans und Steelfish gehören, werden für Benutzeroberflächen nur die ersten beiden verwendet. Steelfish ist als schmallaufende Display-Schrift für Merchandising und andere kreative Anwendungen reserviert.
Überschriften: Outfit in drei Größen: 36 pt, 24 pt und 20 pt.
Untertitel: Outfit auch für Untertitel mit 16 pt.
Fließtext: Nunito Sans für Fließtext in drei Größen: 18 pt, 14 pt und 12 pt.
Für Mobilgeräte verwenden wir etwas größere Schriftgrößen für bessere Lesbarkeit:
Überschriften: Outfit in drei Größen: 40 pt, 28 pt und 24 pt.
Untertitel: Outfit auch für Untertitel mit 18 pt.
Fließtext: Nunito Sans für Fließtext in drei Größen: 18 pt, 16 pt und 14 pt.
BUTTON
Um die Usability von Buttons und klickbaren Elementen zu verbessern, habe ich ein neues Button-System entwickelt, das die Maße des vorherigen Designs beibehält und zugleich mehr Variabilität einführt. Dazu gehören kleinere CTAs, etwa Buttons zum Eingeben von Mindest- oder Höchstbeträgen in Eingabefeldern je nach verfügbaren Assets, sowie Text-Buttons, Hover-States und Spezial-Buttons. Außerdem wurden Website-Buttons standardisiert und für Konsistenz in das System aufgenommen.
ICONOGRAFIE
Pendulums Iconografie zeigte anfangs Uneinheitlichkeiten, die durch einen an Google Material Design orientierten Stil behoben wurden. Diese Icons haben kräftige Linien, die gut zur Ästhetik der Marke passen.
Einige Icons wurden direkt übernommen, andere für bestimmte Zwecke individuell gestaltet, was zu einem geschlossenen und zugleich eigenständigen Stil führte. Alle allgemeinen Icons folgen einer einheitlichen Größe von 24 x 24 px und sorgen so für Einheitlichkeit, auch wenn die Proportionen je nach Inhalt variieren. Die meisten Icons sind als Outline gestaltet, einige sind gefüllt, um verschiedene funktionale oder visuelle Anforderungen zu erfüllen.
MENÜ
Das Menü wurde neu gestaltet, um zentrale Elemente der vorherigen Version zu erhalten und zugleich deutliche Verbesserungen einzubringen. Die Schrift wurde auf Outfit umgestellt, und der Icon-Stil wurde an die neu definierte Iconografie angepasst. Ich habe außerdem interaktive Funktionen eingeführt, etwa ein verbessertes Akkordeon-Menüsystem. Auch der Übergang von „Stellar Bridge“ zu „Spacewalk“ wurde berücksichtigt. Dieses interaktive Element stellt sicher, dass auch neue Nutzer, die zunächst vielleicht nicht wissen, dass Spacewalk unsere Stellar Bridge meint, den Zweck leicht verstehen, sich in der Oberfläche zurechtfinden und sie effektiv nutzen können.
Fazit
Der Aufbau des Pendulum Design Systems legte das Fundament für das eigentliche Redesign des Pendulum Portals. Die modulare Komponentenbibliothek und die gemeinsamen Design-Tokens gaben jedem Team eine einheitliche visuelle und technische Sprache. Es wirkte sich auch positiv auf das Produktteam aus, indem es das Bewusstsein dafür schärfte, wie wichtig ein strukturiertes Designsystem ist, um sicher zu skalieren und unnötige Iterationen zu reduzieren. Das Community-Feedback war positiv, besonders zur Einbindung neuer, häufig gewünschter Funktionen auf logische und benutzerfreundliche Weise.
Mehr als nur ein Redesign, ist das System zur Infrastruktur geworden. Es ist skalierbar, barrierearm und bereit, jedes künftige Produkt zu unterstützen, das Pendulum launcht. Neue Seiten oder Komponenten sind jetzt in wenigen Stunden entwickelt, und jedes Update stärkt die Marke, statt sie zu verwässern. Für ein schnelllebiges Web3-Projekt ist dieses Maß an Konsistenz und Tempo nicht nur nützlich, sondern ein Wettbewerbsvorteil.