logoPortfolioBenchmarksArtikel
krypto/krypto-hero.webp

Krypto Blogs erreichen ein neues Zeitalter

Kryptowährungen werden weltweit von über 200 Millionen Menschen genutzt und sind spätestens seit dem Boom von Bitcoin eines der modernsten und zentralsten Fintech-Themen der Welt. Immer mehr Menschen interessieren sich für themenspezifische Krypto-Webseiten und Blogs. Doch wieso sehen bekannte Krypto-Blogs so aus, als ob sie im Jahr 2010 gestaltet wurden? Die Designs sind überladen, unübersichtlich und nicht an die Zielgruppe angepasst. Blogs sehen wie digitalisierte Zeitungspapiere aus.

Das Start-up Bitwissen löst dieses Problem. Bitwissen möchte für eine Zielgruppe zwischen 18 und 30 Jahren eine mehrsprachige Informationsplattform für Kryptowährungen bieten. Die soll sich nicht nur durch hochqualitativen Content, sondern auch durch ein maximal modernes Design von der Konkurrenz unterscheidet. Das Start-up kontaktierte mich, um eine visuelle Identität, User Flows und User Interface zu gestalten. Die größte Herausforderung lag darin, das Thema Blog User Experience neu zu denken und Artikel mit moderner UI bestmöglich im Sinne der maximalen Leseeffizienz zu optimieren.

Results

+5

NPS

-86%

Absprungrate

+34%

Interaktionen

Metadaten

Industry
Tech
Size
10-20 Mitarbeiter
Value
30.000€+
Tasks
    Visuelle Identität
    User Experience
    Design System
    User Interface
Tools
    Adobe XD
Date
2021 - 2022
Website Link

Visuelle Identität

Vorhandene Blogs

Auch Blogs mit einem Fokus auf aktuelle Themen wie eHealth oder Blockchain sind meist nach demselben Muster gestaltet. Sie sind häufig weiß und grau, besitzen kein effektives Branding und wirken so, als wäre Zeitungspapier ins Digitale übertragen worden. Farben werden lediglich in Thumbnails verwendet, die wiederum häufig nur aus Stockfotos bestehen. Inhalte wirken durch mangelhafte Abstandsregeln erdrückend.

Auffällig und ansprechend

Die Leser des Blogs sollen ein angenehmes Leseerlebnis erhalten. Aktuelle Webseiten langweilen und neigen dazu, den Nutzer schnell zum Verlassen der Seite zu animieren. Das wollen wir ändern. Der Blog soll als Wow-Erlebnis im Gedächtnis bleiben und somit den Nutzer möglichst lang und interessiert an die Seite binden. Durch die Kombination und Abstimmung unterschiedlicher Designelemente wie Farben, Schrift und Grafiken wird die Usability und ein Joy-Of-Use verbunden und die Leser erfahren eine ganzheitliche Leseerfahrung, die optimal abgestimmt ist.

Farben

Die Webseite befindet sich per Default im Dark-Modus. Anders als herkömmliche Brandings mit einer Primär- und einer Akzentfarbe, setzen wir auf eine Farbpalette mit insgesamt 8 Farben. 6 Farben dienen visuellen Akzenten, während je eine Farbe für die Texte und eine spezielle Farbe für Links innerhalb von Artikeln genutzt wird. Die von gelb bis lila durchlaufende Farbpalette besitzt zudem zahlreiche Varianten in mit aufeinander abgestimmten Helligkeitsabstufungen und ist frei für Farbverläufe nutzbar.

Bitwissen setzt den bewussten Trend von farbenreichen Designs

Bitwissen setzt den bewussten Trend von farbenreichen Designs

Hintergrund

Während reguläre Blogs sich nicht stark um die Visualisierung ihres Text-Hintergrundes sorgen und meist einen regulären Grauton oder weiß verwenden, setzt Bitwissen auf einen dunkelvioletten Mesh Gradient. Dieser wird mit einem dunklen Container mit Transparenz überdeckt, der die im Hintergrund befindlichen Elemente verschwimmen lässt, sodass ein Glassmorphism-ähnlicher Effekt entsteht. Diese Einstellung wird bis zum Rand der Seite abgeschwächt, sodass die Ränder einen leuchtenden Effekt aufweisen. In Call to Action Elementen werden zudem Farbverläufe aus den Primärfarben verwendet.

Mesh Gradient Hintergrund

Mesh Gradient Hintergrund

Overlay oberhalb des Mesh Gradients

Overlay oberhalb des Mesh Gradients

Resultat

Resultat

Schriftart

Wir setzen für eine maximale Lesbarkeit und Leserlichkeit auf eine geometrische Sans Schriftart, die vollständig ohne Serifen auskommt. Sie besitzt keine komplexen Unter- oder Oberlängen und schmiegt sich durch rundliche Spines und Bowls perfekt in die runden Formen des Design Systems ein. Sie verleiht der Seite ein modernes und futuristisches Erscheinungsbild und erinnert teilweise an Fintech Start-ups oder moderne Banking Provider wie N26.

Titilium Web dient als primäre Schriftart

Titilium Web dient als primäre Schriftart

Eine durchdachte modulare Skalierung betont Hierarchien

Eine durchdachte modulare Skalierung betont Hierarchien

Komponenten

Die Komponentenbibliothek umfasst derzeit alle Elemente, die für das Erscheinungsbild eines Blogartikels notwendig sind. Zudem wollte das Start-up für eventuelle Kontaktformulare bereits die Komponenten für Nutzereingaben gestaltet haben. Die Bibliothek wird mit zunehmender Größe und Funktionalität der Webseite auf Dauer noch umfassender und gewährleistet mit dem Design System eine kontinuierliche und logische Gestaltung der Webseite.

Auszug aus der Komponentenbibliothek

Auszug aus der Komponentenbibliothek

Grafiken

Der gezielte Einsatz von Grafiken spricht den Leser visuell an. Anstelle von Stockfotos werden moderne und bunte 3D-gerendete Grafiken mit Bezug auf die Themen Finanzen, Zukunft und Weltall verwendet, die den zukunftsweisenden und progressiven Spirit von Bitwissen verdeutlichen sollen.

UX Blogartikel

Gestaltung

Bitwissen muss das Rad der Text-Lesbarkeit nicht neu erfinden. Wir nutzen die uns aus Studien zur Verfügung stehenden Daten, um Texte optimal lesbar zu formatieren. Dabei legen wir einen besonders großen Fokus auf die Schriftgröße, Zeilenhöhe, Zeilen-, Absatz- und Satzlänge sowie weitere Formatierungsmöglichkeiten.

Schreibstil

Texte sollen so kurz und prägnant wie möglich geschrieben sein. Jedes geschriebene Wort soll auf seine Effizienz für das Verständnis des Textes überprüft werden. Bietet ein Wort oder Satz keinen Mehrwert, wird dieser entfernt. Satz- und Absatzlängen sollen kontinuierlich minimalistisch gehalten werden, um einen schnellen Lesefluss zu ermöglichen. Wo möglich, sollen Aufzählungslisten das Scannen von Texten erlauben und Links zu weiteren Artikeln die internen Verlinkungen sicherstellen.

Metadaten für Vertrauen

Neben dem Inhalt des Artikels soll der Blog Metadaten bereitstellen, die dem Nutzer bei Bedarf Mehrwert liefern. Darunter fallen Metadaten, die das Vertrauen in den Wahrheits- und Informationsgehalts des Textes bestärken. Der Autor soll inklusive seiner Verbindung zur Kryptowelt genannt und soziale Kanäle verlinkt werden. Die Häufigkeit, mit der ein Artikel in sozialen Netzwerken geteilt wurde, wird ebenfalls angezeigt. Zusätzlich werden relevante und seriöse Quellen zu den Artikeln angegeben.

Metadaten für Relevanz

Weitere Metadaten können dem Nutzer die Relevanz des Textes vermitteln. Darunter fällt die geschätzte Lesedauer, Breadcrumbs, Tags sowie das Datum der Veröffentlichung und das Datum bei einer Aktualisierung.

Einzigartige Interaktionen

Gamifiziertes Inhaltsverzeichnis

Der Blogartikel wird durch zahlreiche Elemente interaktiver gestaltet. Dazu zählen nicht nur Social Sharing Buttons: Die Übersicht des Blogartikels wird fortlaufend am linken Bildschirmrand eingeblendet. Sie zeigt die Kapitel des Artikels sowie den Lesefortschritt an. Das erlaubt Nutzern, ein bestimmtes Kapitel anzuvisieren und die Länge des aktuellen Kapitels einzuschätzen. Durch die Fortschrittsbalken schaffen wir einen auf dem Zeigarnik-Effekt basierenden gamifizierten Ansporn, weiterzulesen.

Default-Wert

Default Wert

Kapitel 1 lesend

Kapitel 1 lesend

Kapitel 1 gelesen

Kapitel 1 gelesen

Kapitel 2 lesend

Kapitel 2 lesend

Mobiles Inhaltsverzeichnis inklusive Fortschrittsanzeigen

Mobiles Inhaltsverzeichnis inklusive Fortschrittsanzeigen

Mobiles Inhaltsverzeichnis

Mobiles Inhaltsverzeichnis

Smart Search

Häufig suchen wir nach einem ganz bestimmten Satz in einem langen Artikel. Eine fortlaufend angezeigte Suche erlaubt es dem Nutzer jederzeit, nach bestimmten Begriffen im Artikel zu suchen. Der Blogartikel wird bei einer aktiven Suche auf die Suchergebnisse reduziert. Suchergebnisse zeigen das vom Nutzer bestimmte Keyword inklusive der umliegenden Sätze und dem Titel des Kapitels an. Wählt ein Nutzer den für sich interessanten Bereich aus, wird der Artikel wieder auf seine volle Größe ausgeklappt, mit einem Fokus auf die vom Nutzer ausgewählte Textpassage.

Intelligente Suche innerhalb eines Artikels

Intelligente Suche innerhalb eines Artikels

Ausblick

Viele weitere Möglichkeiten

Es existieren viele weitere Möglichkeiten, um die Webseite zu einem innovativen Player im Bereich der Informationsvermittlung für Blockchain & Krypto werden zu lassen. Beispielsweise kam uns während eines gemeinsamen Workshops die Idee, Blogartikel per Toggle auf die wichtigsten Sätze zu reduzieren. Der Nutzer erfährt so eine maximale Zeitersparnis, die sich ganz mit den Erwartungen der Zielgruppe in Zeiten von Blinkist und Co deckt.

Auch können Blogartikel mit zahlreichen weiteren Elementen aktiver gestaltet werden:

  • Komplexe Zitat-Darstellungen mit Bildern und Verlinkungen
  • Social Media Posts wie z. B. Tweets
  • Aktuelle Kurse von erwähnten Kryptowährungen
  • Währungsrechner
  • Bilder & Videos
  • Weitere CTAs oder Pop-ups bei einer Monetarisierung

Bitwissen ist mein bisher spannendstes Projekt, da wir Erfahrungen vollständig neu denken, anstatt auf etablierte Strukturen zu setzen. Ich freue mich sehr darauf, das Start-up bis zum Launch zu begleiten.

User Interfaces

Eine Skizze des gesamten Blogartikels

Eine Skizze des gesamten Blogartikels

Möglicher Call to Action für Newsletter

Möglicher Call to Action für Newsletter

Popup zur Anmeldung für einen Nutzeraccount

Popup zur Anmeldung für einen Nutzeraccount