Block clock

For the first version of the application, the block clock is the central part of the user experience. The application is focused on letting users easily run a node, and the block clock provides a simple visual to see the current status.

Application screen showing the block clock
Explanation of the block clock elements
Explanation of the peer indicator states

Every element in the block clock has a function. They can be combined to communicate different application states.

Various states of the block clock

It takes some time until the application can show initial progress and a somewhat reliable time estimate until completion of the initial block download. To the user, this can look like the application is broken. So a few adjustments are made:

  • The progress circle always shows at least a small bit (even at 0%)
  • While the percentage value is typically rounded, we show tenths and hundredths below 1% so users can see some progress
  • While the estimated time fluctuates drastically and provides not useful information, we only show “Estimating”
  • A “~” indicates that this is an estimate
  • We only show minutes when we’re confident that they are somewhat accurate
Details of the initial block download state

A network indicator appears below the block click when the application does not run on mainnet. We need to decide whether this element should have a tool tip, and/or tapping it navigates to the settings for more information and options.

Visual states of the network indicator below the block clock

And the block clock in light mode, which simply switches the color variables from the dark set to the light set.

The block clock in light mode


This web prototype was done to validate if the block clock dial renders well with realistic data (or if segments get too small), to explore animations & interactions, and test widgets.

Prototype, Source