layout social linkedin
layout social junico
Bitwissen

Steigerung der KPI durch zielgerichtete UX für einen Krypto-Ratgeber.

Mehr als 200 Millionen Menschen nutzen Kryptowährungen. Trotz der hohen Popularität sehen alle Online-Ratgeber veraltet aus. Das Startup Bitwissen möchte für junge Erwachsene eine mehrsprachige Plattform etablieren, die sich durch hochwertige Inhalte und einzigartiges Design auszeichnet.

Meine Aufgabe ist es, eine visuelle Identität und benutzerfreundliche Leseerfahrung zu gestalten. Jeder Aspekt eines Blogartikels - vom Design bis zum Textfluss - soll Zeit sparen und lebendig wirken.

+5

Net Promoter Score

-86%

Absprungrate

+34%

Interaktionen

Zeitraum
2021 - 2022
Industrie
Finance
Wert
30.000€+
Aufgaben
  • Visuelle Identität
  • Usability Konzepte
  • Design System
  • User Interface
Tools
  • Adobe XD

Visuelle Identität

Vorhandene Blogs

Selbst Blogs, die sich auf die neuesten Trends, wie eHealth oder Blockchain konzentrieren, verfolgen oft ein ähnliches Gestaltungskonzept. Oft in Weiß und Grau gehalten, fehlt es ihnen an einem effektiven Branding - es wirkt, als hätte jemand ein Stück Zeitungspapier einfach digitalisiert. Farbe taucht nur in Form von Thumbnails auf, die oft ausschließlich aus Stockfotos bestehen. Hinzu kommt, dass die Inhalte durch schlecht durchdachte Abstandsregeln erdrückend wirken.

Auffällig und ansprechend

Unsere Zielsetzung? Wir wollen, dass die Leser unseres Blogs ein außergewöhnliches Leseerlebnis erleben. Aktuell sind zu viele Blogs eintönig und ermuntern Leser dazu, die Seite schnell wieder zu verlassen. Genau das wollen wir ändern. Unser Blog soll nicht nur "gut" sein - er soll den Lesern ein "Wow"-Erlebnis bieten, das sie im Gedächtnis behalten und sie dazu anregt, immer wiederzukommen. Und wie erreichen wir das? Durch das geschickte Zusammenwirken verschiedener Designelemente: Farben, Schrift und Grafiken werden so kombiniert und abgestimmt, dass sie die Benutzerfreundlichkeit und den Spaßfaktor (Joy-of-Use) erhöhen. Das Ergebnis? Eine rundum harmonische Leseerfahrung, die perfekt auf die Bedürfnisse der Leser abgestimmt ist.

Farben

Standardmäßig präsentiert sich unsere Webseite im trendigen Dark-Modus. Statt uns auf das traditionelle Branding-Konzept mit einer Primär- und einer Akzentfarbe zu verlassen, wagen wir etwas Neues: eine Farbpalette von insgesamt acht Farben. Sechs dieser Farben dienen dazu, visuelle Akzente zu setzen, während zwei weitere Farben speziell für Text und Links innerhalb der Artikel reserviert sind. Unsere Farbpalette erstreckt sich von Gelb bis Lila und bietet diverse, harmonisch aufeinander abgestimmte Helligkeitsstufen für ein reiches Spektrum an Farbverläufen.

Bitwissen setzt den bewussten Trend von farbenreichen Designs

Bitwissen setzt den bewussten Trend von farbenreichen Designs

Hintergrund

Während viele Blogs sich wenig um ihre Text-Hintergrundgestaltung kümmern und oft auf einfache Grau- oder Weißtöne zurückgreifen, geht Bitwissen einen radikalen neuen Weg. Unser Hintergrund? Ein stilvoller dunkelvioletter Mesh Gradient. Um einen Glassmorphism-ähnlichen Effekt zu erzeugen, überlagern wir diesen mit einem dunklen, transparenten Behälter. Dadurch scheinen die Elemente im Hintergrund zu verschwimmen und erzeugen einen schönen, weichen Übergang zu den Rändern. In unseren Call-to-Action-Elementen greifen wir ebenfalls auf diesen kreativen Einsatz von Farbverläufen zurück - die Hauptfarben verschmelzen zu einem einzigartigen Design, das die Aufmerksamkeit auf unsere wichtigsten Botschaften lenkt.

Mesh Gradient HintergrundOverlay oberhalb des Mesh GradientsResultat

Schriftart

Für eine optimale Lesbarkeit setzen wir auf eine geometrische Sans-Serif-Schriftart. Diese Schriftart verzichtet komplett auf Serifen und hat keine komplizierten Ober- oder Unterlängen. Ihre rundlichen Formen passen perfekt zu den übrigen Elementen unseres Designsystems. So strahlt die Schriftart eine moderne und zukunftsorientierte Ästhetik aus, die an innovative Fintech-Start-ups oder moderne Banken wie N26 erinnert.

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

Unsere Komponentenbibliothek umfasst bereits alle Elemente, die für die Gestaltung eines Blogartikels erforderlich sind. Doch damit nicht genug. Das Start-up hat auch vorausgedacht und wir haben bereits Komponenten für eventuelle Kontaktformulare erstellt. Diese Bibliothek wird mit der zunehmenden Größe und Funktionalität der Webseite noch umfangreicher, gewährleistet dabei jedoch durch das Designsystem eine konsistente und logische Gestaltung der gesamten Webseite.

Auszug aus der Komponentenbibliothek

Auszug aus der Komponentenbibliothek

Grafiken

Grafiken können einen großen Unterschied machen und den Leser visuell ansprechen. Statt einfacher Stockfotos verwenden wir moderne, farbenfrohe 3D-Grafiken. Diese greifen Themen wie Finanzen, Zukunft und Weltraum auf und illustrieren so den innovativen und fortschrittlichen Geist von Bitwissen. So bringen wir nicht nur Informationen, sondern auch Inspiration und Begeisterung auf den Bildschirm.

portfolio bitwissen krypto graphics1portfolio bitwissen krypto graphics2portfolio bitwissen krypto graphics3portfolio bitwissen krypto graphics4portfolio bitwissen krypto graphics5portfolio bitwissen krypto graphics6portfolio bitwissen krypto graphics7portfolio bitwissen krypto graphics8portfolio bitwissen krypto graphics9portfolio bitwissen krypto graphics10portfolio bitwissen krypto graphics11portfolio bitwissen krypto graphics12portfolio bitwissen krypto graphics13portfolio bitwissen krypto graphics14portfolio bitwissen krypto graphics15portfolio bitwissen krypto graphics16portfolio bitwissen krypto graphics17portfolio bitwissen krypto graphics18portfolio bitwissen krypto graphics19portfolio bitwissen krypto graphics20

UX Blogartikel

Gestaltung

Bitwissen weiß, man braucht das Rad nicht neu zu erfinden, wenn es um Textlesbarkeit geht. Wir vertrauen den Daten aus all den Studien, die uns zur Verfügung stehen, um unsere Texte optimal lesbar zu gestalten. Dabei konzentrieren wir uns besonders auf Details wie Schriftgröße, Zeilenhöhe, und die Länge von Zeilen, Absätzen und Sätzen. Zusammen mit weiteren Formatierungsmöglichkeiten schaffen wir Texte, die sich flüssig und angenehm lesen lassen.

Schreibstil

Unser Credo lautet: Klare und prägnante Texte. Jedes einzelne Wort wird daraufhin geprüft, ob es zum Verständnis des Textes beiträgt. Wenn ein Wort oder Satz keinen Mehrwert bietet, wird er gnadenlos gestrichen. Wir halten unsere Sätze und Absätze kurz, um einen flüssigen Lesefluss zu gewährleisten. Wo immer es sinnvoll ist, verwenden wir Aufzählungslisten, um das schnelle Überfliegen von Texten zu erleichtern. Und wir setzen interne Links, um den Leser weiterführend zu interessanten Artikeln zu führen. So schaffen wir eine Benutzererfahrung, die begeistert.

Metadaten für Vertrauen

Neben dem eigentlichen Inhalt legen wir Wert auf nützliche Metadaten. Diese zusätzlichen Informationen liefern dem Nutzer Mehrwert und stärken das Vertrauen in den Wahrheits- und Informationsgehalt des Textes. So nennen wir beispielsweise den Autor und seine Verbindung zur Kryptowelt und verlinken auf seine sozialen Kanäle. Auch die Häufigkeit, mit der ein Artikel in sozialen Netzwerken geteilt wurde, stellen wir transparent dar. Schließlich listen wir die Quellen auf, aus denen wir unsere Informationen beziehen - denn Transparenz und Glaubwürdigkeit stehen bei uns an oberster Stelle.

Metadaten für Relevanz

Zusätzliche Metadaten können dazu beitragen, dem Nutzer die Relevanz des Textes zu verdeutlichen. Dazu gehören Angaben wie die geschätzte Lesezeit, "Breadcrumbs" (also Navigationselemente, die den Weg durch die Seite anzeigen), Tags sowie das Veröffentlichungsdatum und das Datum der letzten Aktualisierung.

Einzigartige Interaktionen

Gamifiziertes Inhaltsverzeichnis

Um den Blogartikel interaktiver zu gestalten, haben wir eine Vielzahl von Elementen eingefügt. Dazu gehören nicht nur Social-Sharing-Buttons. Eine stets am linken Bildschirmrand sichtbare Übersicht zeigt die Kapitel des Artikels und den jeweiligen Lesefortschritt an. Das ermöglicht den Nutzern, gezielt ein bestimmtes Kapitel anzusteuern und die Länge des aktuellen Kapitels abzuschätzen. Mit den Fortschrittsbalken erzeugen wir einen auf dem Zeigarnik-Effekt basierenden, spielerischen Anreiz zum Weiterlesen.

Default-WertKapitel 1 lesendKapitel 1 gelesenKapitel 2 lesend
Mobiles Inhaltsverzeichnis inklusive FortschrittsanzeigenMobiles Inhaltsverzeichnis

Wer kennt es nicht? Man sucht in einem langen Artikel nach einem bestimmten Satz. Daher bieten wir eine ständig zugängliche Suchfunktion, die es den Nutzern ermöglicht, jederzeit nach bestimmten Begriffen im Artikel zu suchen. Bei einer aktiven Suche wird der Artikel nur auf die Suchergebnisse reduziert. Diese Ergebnisse zeigen das gesuchte Keyword, eingebettet in die umliegenden Sätze und den Titel des Kapitels. Wählt der Nutzer den für ihn interessantesten Bereich aus, klappt sich der Artikel wieder auf seine volle Größe aus, der Fokus liegt dann jedoch auf dem ausgewählten Textabschnitt.

Intelligente Suche innerhalb eines Artikels

Intelligente Suche innerhalb eines Artikels

Ausblick

Viele weitere Möglichkeiten

Es gibt zahlreiche Möglichkeiten, um unsere Webseite zu einem echten Vordenker in Sachen Blockchain und Krypto-Information zu machen. Während eines Workshops entstand beispielsweise die Idee, Blogartikel durch einen einfachen Schalter auf die wesentlichsten Sätze zu konzentrieren. Dieser clevere Ansatz entspricht komplett den Erwartungen unserer Zielgruppe in Zeiten von Blinkist und Co und spart den Nutzern wertvolle Zeit.

Zusätzliche Möglichkeiten, um unsere Blogartikel noch interaktiver zu gestalten, könnten sein:

Mit seinem einzigartigen Ansatz und der Abkehr von etablierten Strukturen, ist Bitwissen bis dato eines meiner spannendsten Projekte. Ich freue mich schon darauf, das Start-up auf seiner Reise 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