logoPortfolioBenchmarksArtikel
krypto/krypto-hero.webp

Crypto blogs reach a new age

Cryptocurrencies are used by more than 200 million people worldwide. They have become one of the most modern and central fintech topics globally at the latest since the boom of Bitcoin. More and more people are interested in topic-specific crypto websites and blogs. But why do well-known crypto blogs look like they were designed in 2010? The designs are cluttered, confusing, and not adapted to the target audience. Blogs look like digitized newsprint.

The start-up Bitwissen solves this problem. Bitwissen wants to offer a multilingual information platform for cryptocurrencies for a target group between 18 and 30 years. This should distinguish itself from the competition not only through high-quality content but also through a maximally modern design. The start-up contacted me to design a visual identity, user flows, and the user interface. The biggest challenge was to rethink the blog user experience and optimize articles with modern UI in the best possible way for maximum reading efficiency.

Results

+5

NPS

-86%

bounce rate

+34%

interactions

Metadaten

Industry
Tech
Size
10-20 Employees
Value
30.000€+
Tasks
    Visual Identity
    User Experience
    Design System
    User Interface
Tools
    Adobe XD
Date
2021 - 2022
Website Link

Visual identity

Existing blogs

Blogs focusing on current topics like eHealth or blockchain are also primarily designed according to the same pattern. They are often white and gray, lack effective branding, and look as if newsprint has been transferred to digital. Colors are only used in thumbnails, which usually consist only of stock photos. The content seems stifling due to poor spacing rules.

Striking and appealing

The readers of the blog should get a pleasant reading experience. Current web pages are boring and encourage users to leave quickly, and we want to change that. The blog should be remembered as a wow experience and thus keep the user interested in the site for as long as possible. By combining and matching different design elements such as colors, fonts, and graphics, usability and joy-of-use are connected, and readers experience a holistic reading experience that is optimally tuned.

Colors

The website is in dark mode by default. Unlike traditional branding with one primary and one accent color, we rely on a color palette with eight colors. Six colors are used for visual accents, while one color each is used for the texts and a unique color for links within articles. The color palette, which runs from yellow to purple, also has numerous variants with coordinated brightness gradations and can be freely used for color gradients.

Bitwissen sets the deliberate trend of colorful designs

Bitwissen sets the deliberate trend of colorful designs

Background

While regular blogs don't care much about the visualization of their text background and usually use a regular shade of gray or white, Bitwissen relies on a dark purple mesh gradient. This is overlaid with a dark container of transparency that blurs the elements that are in the background, creating a Glass Morphism-like effect. This setting is toned down to the edge of the page, giving the edges a glowing effect. Gradients from the primary colors are also used in call-to-action elements.

Mesh Gradient Background

Mesh Gradient Background

Overlay above the Mesh Gradient

Overlay above the Mesh Gradient

Result

Result

Font

We use a geometric sans font that is entirely sans serif for maximum legibility and readability. It has no complex descenders or ascenders and blends perfectly with the rounded shapes of the design system through rounded spines and bowls. It gives the site a modern and futuristic appearance. It is partly reminiscent of fintech start-ups or modern banking providers like N26.

Titilium Web serves as the primary font

Titilium Web serves as the primary font

Thoughtful modular scaling emphasizes hierarchies

Thoughtful modular scaling emphasizes hierarchies

Components

The component library currently includes all elements necessary for the appearance of a blog article. In addition, the start-up wanted to have already designed the components for user input for possible contact forms. The library will become more comprehensive in the long run as the size and functionality of the website increase. The design system ensures a continuous and logical design of the website.

Extract from the component library

Extract from the component library

Graphics

The targeted use of graphics appeals to the reader visually. Instead of stock photos, modern and colorful 3D-rendered graphics related to the themes of finance, the future and outer space are used to illustrate the forward-looking and progressive spirit of Bitwissen.

UX Blog article

Design

Bitwissen doesn't have to reinvent the wheel of text readability. We use the data from studies to format texts in an optimally readable way. We focus mainly on font size, line height, line, paragraph, sentence length, and other formatting options.

Writing style

We should write texts as briefly and concisely as possible. We should check every written word for its efficiency in understanding the text. If a word or phrase offers no added value, it shall be removed. Sentence and paragraph lengths should be kept continuously minimalist to allow for quick reading flow. Where possible, bulleted lists should allow text to be scanned, and links to further articles should ensure internal linking.

Metadata for trust

In addition to the article's content, the blog should provide metadata that adds value to the user when needed. This includes metadata that reinforces trust in the truth and information content of the text. The author should be named, including their connection to the crypto world, and social channels should be linked. The frequency with which an article has been shared on social networks is also shown. In addition, relevant and reputable sources for the articles are indicated.

Metadata for relevance

Further metadata can convey the relevance of the text to the user. This includes the estimated reading time, breadcrumbs, tags, as well as the date of publication and the date of an update.

Unique interactions

Gamified table of contents

The blog article is made more interactive by numerous elements. These include not only social sharing buttons: The overview of the blog article is continuously displayed on the left side of the screen. It shows the chapters of the article as well as the reading progress. This allows users to target a specific chapter and estimate the length of the current chapter. Through the progress bars, we create a gamified incentive based on the Zeigarnik effect to keep reading.

Default

Default

Chapter 1 in progress

Chapter 1 in progress

Chapter 1 finished

Chapter 1 finished

Chapter 2 in progress

Chapter 2 in progress

Mobile table of contents including progress indicator

Mobile table of contents including progress indicator

Mobile table of contents

Mobile table of contents

Smart Search

We often search for a very specific phrase in a long article. A continuously displayed search allows the user to search for specific terms in the article at any time. The blog article is reduced to search results when a search is active. Search results display the keyword determined by the user, including the surrounding sentences and the title of the chapter. When a user selects the section of interest, the article unfolds back to its full size, with a focus on the text passage selected by the user.

Intelligent search within an article

Intelligent search within an article

Prospects

Many more options

Many other possibilities exist to make the website an innovative player in the field of information dissemination for blockchain & crypto. For example, during a joint workshop we came up with the idea of reducing blog articles to the most important sentences via toggle. The user thus experiences a maximum time saving, which is completely in line with the expectations of the target group in times of Blinkist and Co.

Also, blog articles can be made more active with numerous other elements:

  • Complex quote displays with images and links
  • Social media posts such as tweets
  • Current exchange rates of mentioned cryptocurrencies
  • Currency calculator
  • Images & videos
  • Additional CTAs or pop-ups in case of monetization

Bitwissen is my most exciting project so far, as we are completely rethinking experiences instead of relying on established structures. I'm very much looking forward to accompanying the start-up all the way to launch.

User Interfaces

An outline of the entire blog article

An outline of the entire blog article

Possible call to action for newsletter

Possible call to action for newsletter

Pop-up to register for a user account

Pop up to register for a user account