logoPortfolioBenchmarksArtikel
krowdz/krowdz-hero.webp

Social platform meets blockchain.

Krowdz is a conceptual, social platform. It aims to be a mixture of social networks and social payment services. In the style of Patreon, fans interact with their artists. Artists own their own blockchain-based currency. Fans can gain this through app interactions and spend it on exclusive content and interaction opportunities with the artist. In addition, artists in the app have albums of trading cards that users can collect and trade. The target audience is between 16 and 25 years old, with a launch in the German market.

Krowdz is presented to potential investors at a trade fair in Dubai. On the one hand, the presentation will be in classic PowerPoint style. On the other hand, it will also be interactive at the company's trade fair stand. The founders, therefore, need an interactive prototype that communicates the core of the app understandably. Due to the short deadline, we refrained from perfection in the screens and detailed micro-animations.

Metadaten

Industry
Tech & Social
Size
10-20 Employeees
Value
10.000€+
Tasks
    Visual Identity
    User Experience
    Design System
    User Interface
    Prototype
Tools
    Adobe XD
    Protopie
Date
2022
Website Link

Design System

Dark Mode

Almost all entertainment apps (Netflix, Spotify, YouTube, Smart TVs) use dark user interfaces. This is logical from user expectations since they are often used in darkened rooms. Furthermore, the dark mode improves the appearance of colored content.

To align with the target audience's expectations while creating an exclusive and engaging atmosphere, Krowdz natively has a Dark Mode display.

I deliberately chose a shaded blue, as it has been proven to reduce the sense of time, and we create a pleasant contrast with the more warmly designed components. The rendering also allows components to be shaded in greater detail.

Example of the dark mode based on the navigation

Example of the dark mode based on the navigation

Color

Green serves as the primary color. Yellow, purple and blue represent the accent colors, representing rarities, as is known from many loot concepts. Orange is a complementary accent color that we can also use for error messages.

The primary colors have been systematically scaled to allow gradations in illustrations and more unobtrusive accents.

The color choice of Krowdz

The color choice of Krowdz

Typography

The typography is modular scaling. I chose Greycliff CF as the font. It is versatile and allows for good contrast between titles and texts due to its optimally divided step cuts. The geometric, almost monolithic design lends a classic permanence softened by soft edges and lively shapes.

Components

Coins

Each artist owns their own coin. In the app, this coin is textually indicated with a dollar sign and four letters of the artist. For the component, I was looking for a minimalist design that was still visually appealing.

The result: we use a picture of the artist in the background. The name of the coin and artist is displayed on the left half. The number of existing coins is also visible on the right side. Users of investment apps will find this display familiar.

Coins

Coins

NFTs

Individual NFTs consist of a container, reminiscent of trading cards due to the aspect ratio. A label indicates the respective album in the upper left corner. The number of the NFT, title, and artist are visible in the bottom center of a darkened container.

Different rarities have different colors, shadows, and glow effects. They are based on the conventions of loot boxes, which can be found in numerous games and similar apps. NFTs that have not yet been collected use washed-out displays. A set of NFTs ("Packages") is displayed like a set of cards.

NFTs

NFTs

Links and profile pictures are one way to link the artists' pages. Even more amicable are dynamically adapting banners that present the artist through several image elements in the app. The connection between the coin and the artist is made clear to the user by displaying the coin on the flags.

Banner

Banner

More components

Screens

Welcome Screen & Onboarding

Welcome Screen & Onboarding present the principle of the app via a multi-step principle. The user is clearly explained how to interact with the artists.

Feed & Artist Screens

The feed is based on the expectations of the target group. It is modeled on TikTok's basic principle of swiping items up and down in the feed. The artist is presented via a video and a short description. The user can use gestures and taps to go to the search or to open the details page of the respective artist.

In further design work, we would replace the placeholder shown in the bottom right of the feed with a custom-designed coin.

Wallet & Coins

The user has an overview of his existing tokens in the wallet. He can open them in a detailed screen to interact with them.

Animations

Interactions

To present the prototype in the best possible way, I exported the designs from Adobe XD software to Protopie software. Protopie makes it possible to create detailed animations and use complicated gestures.

Through the tool, I designed an interactive search, created a wipeable feed, and incorporated a few complex screen transitions that provide the necessary show effect.

Buy Coins

NFT Packages

Search function

Important note

All used images and videos of artists in the UI are understood as placeholders. They only serve the purpose of visualizing the UI with related content. All media rights belong to the respective creators and distributors of these media. They will be removed immediately upon request.