TzStats blockchain explorer design

UX/UI Design

Blockchain, Crypto, Fintech, Open-source

Tezos is a cryptocurrency following the new digital economy's principles and governance foundation: free trade and exchange. We designed the web interface for TzStats explorer that helps to explore and analyze the blockchain health status.

The main value of the Tezos is the independent, decentralized infrastructure for businesses and democratic decisions. It is an open-source project that is aiming to provide a secure and transparent blockchain system.

Explorer is the tool to investigate and overview parameters of blockchain health in the context of time and Tezos currency market values.

We designed the comprehensive web app tool for tracking the health and growth of the Tezos blockchain. The first version of the interface is made for desktop screens and focuses on presenting complex information in the infographics.

Blockchain visuals

We looked into various representations and symbolics of the digital age and blockchain specifically. Through the conceptualization cycle, we explore aesthetics, semantics, and language used to present crypto technologies.

In the mood board collection, placed inspirational visuals elements that trigger a further exploration of the theme. Additionally, we looked into the various graphical elements, graphs, and charts to cover the part directly related to the explorer properties. Since TzStats aimed to present different information bits in a concise, easy to digest manner, we looked into direction analytics and infographics.

Inspirational graphics collage, blockchain visuals mood-board.
#relations #semantics #meanings

Collage of metrics, graphs, and graphical elements composing the visual mood-board.
#metrics #precision

Styling directions

We drafted the visual guides aligned with the blockchain visuals model and split them into 3 styling directions. The aim of the mood board exercise is to provide visual queues and insights. To communicate our intention for the look and feel of the future interface. Additionally, it lets us engage in a discussion over the different tastes, opinions, and ideas.

We developed 3 mood boards for styling directions exploring the look and feel of the Tezos explorer.

NEO STREAM is a clean, dark, and neon theme taking its inspiration from Ghost in the Shell and Matrix aesthetics.

Neo stream styling direction mood-board.
#black_n_white #neon_lines #cybertech

DARK EYE CANDY is a sweetness phenomenon made for modern society, taking the user to a new, intriguing blockchain tech world.

Dark Eye Candy styling direction mood-board.
#soft #dark #sweet_n_serious

NEW ORDER presents a slightly floating, in-a-cloud feeling that forms a clean environment with clean lines on soft transitions.

New Order styling direction mood-board.
#gentle #minimalistic #linework

Color scheme and design elements

By combining multiple perspectives of blockchain/crypto semantics, we developed the visual language and color schemes for the interface.

In the research process, we found that the style for elements should follow strict and relatively serious forms. Designing for the blockchain is a complex topic due to the low trust in the new generation technology.

With the help classical candle chart, we established the appearance of elements used for the interface. Further details like sections, graphs, symbols down to the iconography derive from the base definition of the visual exploration in color.

A significant part of the user interface design is the definition of colors. For the project, we used the color-coding system and assigned colors to the underlying states and statuses. 

In discussion with the TzStats team, we figured the preference for the DARK EYE CANDY theme. Based on that, we created 3 color scheme directions with a set of properties:

  1. Multicolor scheme with a gradient color
  2. Bicolor color scheme with two primary flat colors
  3. Monochrome cold flat colors set 

The Monochrome become the preferred variant creating the Monochrome Dark Eye Candy style.

TzStats 3 initial colors variations

To cover the full range of color codes for the monochrome theme, we extended the primary colors to 4: main, secondary, complimentary 1, and 2.

TzStats styles: final color scheme and typography

Final design

The final design is where everything comes together. Research and exploration serve as a starting point. Later, transitioning to the ideation and conceptualization step. At the phase of wireframing and prototyping, all abstractions and definitions coming to the real digital product.

Nowadays, TzStats explorer stands for a comprehensive tool used by thousands of people in the Tezos community and beyond. TzStats is the crucial source of data that Coinmarketcap, Coinbase, and others are referencing to. Tezos is at the heart of the digital revolution.

Check out a couple of screen renders of the final result.

Credits:

  • Alexander Eichhorn - project management and back-end dev
  • Mirko Schmiedl - project onboarding
  • Andrei Vaulin - front-end dev
  • Oliver Simon - project exposure