TzStats blockchain explorer design
UX/UI Design
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.
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.
DARK EYE CANDY is a sweetness phenomenon made for modern society, taking the user to a new, intriguing blockchain tech world.
NEW ORDER presents a slightly floating, in-a-cloud feeling that forms a clean environment with clean lines on soft transitions.
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:
- Multicolor scheme with a gradient color
- Bicolor color scheme with two primary flat colors
- Monochrome cold flat colors set
The Monochrome become the preferred variant creating the Monochrome Dark Eye Candy style.
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.
