The redesigned Bitcoin price page on desktop and mobile, with a price chart, time-range dropdown and Buy Bitcoin button
UI/UX design, Wireframing, Design System
Figma, Whimsical

Blockchain.com explorer is the oldest crypto explorer with over 12 million visitors a month. It was built by engineers and barely touched by designers due to its complexity.

My job was to restructure and consolidate all the explorer properties, improve navigation and optimize its main pages for retention.

Full-page design of the new explorer homepage: network stats, price and mempool charts, latest blocks and transactions, product promos and analytics cards
The new explorer homepage

Requirements

General information

Blockchain.com made its name by creating the first Bitcoin blockchain explorer in 2011. By 2020, their explorer not only displayed network transactions but also had charts for savvy users and price data for all available cryptocurrencies.

When I joined Blockchain, my first project was to redesign the entire explorer homepage and its subpages such as the block page, transaction page, and prices.

Key goals

Ensure brand consistency across all explorer products, restructure and consolidate explorer properties, make navigation to other properties more intuitive, improve front-end pages to optimize for conversion, and increase ad revenue.

Full-page design of the Bitcoin detail page: price chart, latest transactions, live trade history, converter, price search, token summary and top stories
Coin detail page for a supported cryptocurrency

Understanding the information architecture

The explorer is used by all kinds of users, from anyone new to crypto wanting to confirm their transaction, to very technical and crypto savvy users that are looking for detailed metadata to inform them about the current status of the network, specifically for Bitcoin, Ethereum, and Bitcoin Cash.

As my first step, I wanted to take the time to understand how each area of the explorer was structured and tried to find patterns or common areas where I could connect them. The main pages included:

  • Bitcoin explorer (block, transaction and address pages)
  • Ethereum explorer (block, transaction and address pages)
  • Bitcoin Cash explorer (block, transaction and address pages)
  • Bitcoin charts
  • Cryptocurrency prices list
  • Coin price detail page
Diagram of the new explorer structure: the explorer branches into BTC, ETH and BCH, each connecting to shared Blocks, Transactions, Charts and Prices pages, with Address linked from Blocks and Transactions
The new explorer structure: three chains sharing one set of pages

Navigation

Looking at other products from Blockchain it became clear that the page needed to look clean, while still displaying a lot of information. The final product focused on the explorer's main page as the main navigation place. Users would land there and get a summary of everything the explorer has to offer. This also allowed an opportunity to upsell other Blockchain products.

As part of the retention strategy, the explorer pages also offered a high level of interactivity to the advanced user: dropdowns, coin discovery, a search engine for blocks, transactions and addresses, and an advanced view of charts. A lot of these interactive UI elements had to be designed from scratch or redesigned, and were later added to the design system to be used throughout other areas of the site.

Design system components: desktop and mobile navigation with hover states, breadcrumbs with search, currency and coin pickers, date-range dropdown, a redirect modal and a data snippet bar
Components designed for the explorer and added to the design system

Outcome

Search usage
12%
up from 9.5%
Drop-off rate
30%
down from 40%
Click-through to Exchange
0.76%
up from 0.13%

Ad revenue also increased (figure undisclosed).

The redesigned crypto prices list, explorer homepage and Bitcoin price page shown side by side
Prices list, explorer homepage and coin page