krowdz/krowdz-hero.webp

Soziale Plattform trifft Blockchain

Krowdz ist eine konzeptuelle soziale Plattform. Sie strebt eine Mischung aus Social Network und Social Payment Service an. Im Stil von Patreon interagieren Fans mit ihren Künstlern. Künstler besitzen eine eigene, auf Blockchain basierende Währung. Fans können diese durch App-Interaktionen gewinnen und für exklusiven Content und exklusive Interaktionsmöglichkeiten mit dem Künstler ausgeben. Daneben besitzen Künstler in der App Alben an Sammelkarten, die Nutzer sammeln und tauschen können. Die Zielgruppe liegt zwischen 16 und 25 Jahren, mit einem Start auf dem deutschen Markt.

Krowdz wird auf einer Messe vor potenziellen Investoren in Dubai präsentiert. Die Präsentation findet einerseits im klassischen Powerpoint-Stil statt, andererseits auch interaktiv am eigenen Messestand. Die Gründer benötigen daher einen interaktiven Prototypen, der den Kern der App verständlich kommuniziert. Aufgrund der kurzen Frist haben wir von einer Perfektion in den Screens sowie detaillierten Mikro-Animationen abgesehen.

Metadaten

Industry
Tech & Social
Size
10-20 Mitarbeiter
Value
10.000€+
Tasks
    Visuelle Identität
    User Experience
    Design System
    User Interface
    Prototype
Tools
    Adobe XD
    Protopie
Date
2022
Website Link
  1. 1
    Design System
  2. 2
    Komponenten
  3. 3
    Screens
  4. 4
    Animationen

Design System

Dark Mode

Fast alle Unterhaltungs-Apps (Netflix, Spotify, YouTube, Smart TVs) verwenden dunkle User Interfaces. Aus Sicht der Nutzererwartungen ist dies logisch, da sie häufig in abgedunkelten Räumen verwendet werden. Ferner verbessert der dunkle Modus das Erscheinungsbild von farbigen Inhalten.

Um sich den Erwartungen der Zielgruppe zu ordnen und gleichzeitig exklusive und engagierende Atmosphäre zu erzeugen, hat Krowdz nativ eine Darstellung im Dark Mode.

Ich habe mich bewusst für einen sehr schattierten Blauton entschieden, da durch diese nachweislich das Zeitgefühl verringert wird und wir zu den eher warm gestalteten Komponenten einen angenehmen Kontrast schaffen. Die Darstellung erlaubt es ebenfalls, Komponenten detailreicher mit Schattierungen auszustatten.

Beispiel für den Dark Mode anhand der Navigation

Beispiel für den Dark Mode anhand der Navigation

Beispiel für den Dark Mode anhand der Navigation

Farbe

Grün dient als Primärfarbe. Gelb, Lila und Blau stellen die Akzentfarben dar. Sie dienen der Darstellung von Raritäten, wie es aus vielen Loot-Konzepten bekannt ist. Orange ist eine ergänzende Akzentfarbe, die auch für Fehlermeldungen verwendet werden kann.

Die Hauptfarben wurden systematisch skaliert, um Abstufungen in Illustrationen und unauffälligere Akzente zu erlauben.

Die Farbwahl von Krowdz

Die Farbwahl von Krowdz

Die Farbwahl von Krowdz

Typografie

Die Typografie ist modular skalierend aufgebaut. Als Schriftart habe ich Greycliff CF gewählt. Sie ist vielseitig einsetzbar und erlaubt durch ihre optimal aufgeteilten Schrittschnitte einen guten Kontrast zwischen Titeln und Texten. Die geometrische, fast monolithische Konstruktion verleiht eine klassische Beständigkeit, die durch weiche Kanten und lebendige Formen gemildert wird.

krowdz krowdz typography
krowdz krowdz typography

Komponenten

Coins

Jeder Künstler ist in Besitz eines eigenen Coins. In der App wird dieser Coin textlich mit einem Dollar-Zeichen und vier Buchstaben des Künstlers angegeben. Für die Komponente habe ich ein minimalistisches Design gesucht, das dennoch visuell ansprechend wirkt.

Das Ergebnis: Wir nutzen ein Bild des Künstlers im Hintergrund. Der Name des Coins und Künstlers wird auf der linken Hälfte dargestellt. Die Anzahl der vorhandenen Coins ist auch der rechten Seite sichtbar. Nutzer von Investment-Apps wird diese Darstellung bekannt vorkommen.

Coins

Coins

Coins

NFTs

Einzelne NFTs bestehen aus einem Container, der durch das Seitenverhältnis an Sammelkarten erinnert. Das jeweilige Album wird per Label oben links angegeben. Die Nummer des NFTs, Titel und Künstler sind mittig unten in einem abgedunkelten Container sichtbar.

Unterschiedliche Raritäten haben unterschiedliche Farben, Schatten und Leuchteffekte. Sie sind an den Konventionen von Lootboxen orientiert, die sich in zahlreichen Spielen und ähnlichen Apps finden lassen. Noch nicht gesammelte NFTs verwenden verwaschen angezeigt. Ein Set aus NFTs ("Packages") wird wie ein Set aus Karten angezeigt.

NFTs

NFTs

NFTs

Links und Profilbilder sind eine Möglichkeit, um die Seiten der Künstler zu verlinken. Noch schöner sind sich dynamisch anpassende Banner, die den Künstler durch mehrere Bildelemente in der App präsentieren. Durch das Anzeigen des Coins auf den Bannern wird dem Nutzer die Verbindung zwischen Coin und Künstler verdeutlicht.

Banner

Banner

Banner

Weitere Komponenten

Screens

Welcome Screen & Onboarding

Welcome Screen & Onboarding stellen das Prinzip der App über ein mehrstufige Schritte-Prinzip dar. Dem Nutzer wird anschaulich erklärt, wie er mit den Künstlern interagieren kann.

Feed & Artist Screens

Der Feed bedient sich den Erwartungen der Zielgruppe. Er ist dem Grundprinzip von TikTok nachempfunden, Items im Feed nach oben und unten zu wischen. Der Künstler wird über ein Video und eine kurze Beschreibung dargestellt. Der Nutzer hat die Möglichkeit, über Gesten und Taps zur Suche zu gelangen oder die Detail-Seite des jeweiligen Künstlers zu öffnen.

In weiteren Design-Arbeiten würde der im Feed unten rechts dargestellte Platzhalter mit einem eigen designten Coin ausgetauscht werden.

Wallet & Coins

Der Nutzer hat in der Wallet eine Übersicht aus seinen vorhandenen Tokens. Diese kann er in einem detaillierten Screen öffnen, um mit ihnen zu interagieren.

Animationen

Interaktionen

Um den Prototypen optimal präsentieren zu können, habe ich die Designs aus der Software Adobe XD in die Software Protopie exportiert. Protopie ermöglicht es, detaillierte Animationen zu erstellen und komplizierte Gesten zu nutzen.

Über das Tool gelang es mir, eine interaktive Suche zu gestalten, einen wischbaren Feed zu erstellen und auch einige wenige komplexe Screen Transitions einzubauen, die für den nötigen Show-Effekt sorgen.

Vergrößern

Coins kaufen

Vergrößern

NFT Packages

Vergrößern

Suchfunktion

Wichtiger Hinweis

Alle verwendete Bilder und Videos von Künstlern in der UI sind als Platzhalter zu verstehen. Sie dienen nur dem Zweck, die UI mit entsprechendem Content zu visualisieren. Alle Medienrechte liegen bei den jeweiligen Erstellern und Vertreibern dieser Medien. Auf Wunsch werden diese umgehend entfernt.

Justin Schmitz
Wie eine Zeitung, die dir jeden Monat an die Haustür geliefert wird - Erfahre das Neueste über Digital Health User Experience.
Wenn du dich für den Newsletter anmeldest, stimmst du zu, elektronische Nachrichten von mir zu erhalten.