Contribution

UI/UX design, Wireframing, Contributed to design system

Overview

Blockchain's 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.

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.

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

Keep It Simple

Having previous experience designing web pages for conversion increase, I knew adding more copy to each page would help SEO, this could also be an opportunity to educate new users.

I wanted to get buy-in from the team without adding a lot of scope to the project, so I started by adding tooltips next to the main headers.

To improve navigation, I noticed that the explorer pages didn't have breadcrumbs. A simple addition like that could help the user understand the relationship between pages and easily navigate to other areas.

To improve retention, we needed to include links to our other pages. It was clear that we needed a new explorer homepage that included links and metadata of all explorer entities, to allow for easier navigation and discovery.

Increasing ad revenue meant that we needed to keep the ad placements. However, I wanted to ensure they were not very disruptive to the user's experience. This was a tough challenge to fight for, so I started by simply adding rounded corners to the ad containers. A simple detail of adding smooth corners would decrease visual friction and it would make it look more on brand, as we had rounded corners on buttons and other box containers.

Next Step

The next step was to take the navigation and retention strategy to the next level.

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 stratch or redesigned, which were later added to the design system to be included throughout other areas of the site.

Outcome

With these changes, search usage improved from 9.5% to 12%. The drop-off rate went down from 40% to 30%. Improve click-through rate to Exchange product from 0.13% to 0.76%, and increased ad revenue (undisclosed figure).

Next Project

Bettsina Walkinson