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.
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
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
Overlay above the Mesh Gradient
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
Thoughtful modular scaling emphasizes hierarchies
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
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
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.
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.
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.
Chapter 1 in progress
Chapter 1 finished
Chapter 2 in progress
Mobile table of contents including progress indicator
Mobile table of contents
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
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.
An outline of the entire blog article
Possible call to action for newsletter
Pop up to register for a user account