Blocknative Sees 10x in Organic Traffic with Gas Estimator Tool

Role

Lead Designer

Medium

Web Application, Chrome Extension

Collaborators

2 Frontend Engineers, PM, 1 Content Writer, 1 SEO Specialist

Stack

Figma, Hubspot, Illustrator, Photoshop, After Effects, Hotjar, Jira

Blocknative Mobile Thumbnail Cover 1920x800

Who is Blocknative:

Blocknative builds infrastructure to monitor and manage the complexity of transacting on public blockchain networks. Their suite of tools powers transparency and profit for Web3 developers, users, and traders on Ethereum, Binance, Polygon, Fantom, xDai, and Bitcoin. Leading cryptocurrency applications like Curve, Balancer, and Compound depend on Blocknative for their critical Web3 infrastructure.

The Problem:

Blocknative strives to be the #1 platform for transaction management and monitoring solutions within the blockchain. One of the main issues Blocknative aims to solve is the trouble surrounding the transaction lifecycle - specifically what occurs before a transaction is validated on the blockchain.

Extremely high demand and limited block space on the Ethereum network generate fierce competition in the gas fee marketplace. If not executed properly, users can face serious consequences, like missing inclusion in a block, overpaying for gas, or experiencing a failed transaction. This lack of transparency of pre-chain activity can frustrate users and often make or break a transaction.

With their extensive mempool database on the Ethereum blockchain, Blocknative partnered with Webstacks to create an interactive tool that would allow traders and developers to gain insight into Ethereum gas fees before initiating a transaction.

The Goal:

  • Leverage Blocknative’s real-time mempool data to design and develop a gas estimation tool
  • Display live gas prices to provide instant, accurate gas fee information, enhancing the utility and relevance of our tool for users managing Ethereum transactions.
  • Boost organic search traffic site-wide by focusing on SEO enhancements related to the Ethereum gas estimation tool, positioning it as a key resource for gas fee insights and efficient transaction management.
  • Differentiate this tool from its competitors. We need to position Blocknative’s Gas Platform as something new, different, & better.

Our research began by identifying who our users were using this tool. Blocknative provided user personas of who their core demographic is:

Persona Dylan
Persona Kyle
Persona Teddy

Defining the user needs:

  • Prediction Accuracy: Users need accurate predictions to avoid overpaying during fluctuations in network activity. The tool uses real-time data to refine these estimates, helping users make informed decisions on when and how much to pay.
  • Transaction Assurance: Users seek control over how quickly their transactions are processed. The estimator provides different gas fee options tied to various transaction speeds, giving users the flexibility to prioritize speed or cost according to their current needs.
  • Cost Efficiency: Users want to avoid unnecessary expenses. This tool helps by pinpointing the most economical gas fee that still ensures transaction completion.
  • Mobile Scalability: Based on data from Google Analytics, 64% of Blocknative’s user base were desktop users, while 36% came from mobile. This only emphasized the need for a user-friendly mobile design so we don’t neglect a large portion of Blocknative’s audience.

Competitive Analysis:

We took a look at a list of gas estimators that were on the market and created a competitive analysis of what these competitors were succeeding at and where they fell short.

Etherscan Gas Tracker

Website: Etherscan Gas Tracker

Etherscan

Pros:

  1. User Friendliness: Etherscan provides a straightforward and easy-to-understand interface that is accessible to both beginners and advanced users, making it very approachable (Ethereum (ETH) Blockchain Explorer).
  2. Integrated Tools: Offers additional features such as gas price heatmap, oracle gas prices, and transaction cost calculators, which provide a holistic view of gas economics on Ethereum (Ethereum (ETH) Blockchain Explorer).
  3. Reputation and Reliability: Etherscan is a well-established and trusted platform within the Ethereum community, which adds an extra layer of credibility to its gas estimates.

Cons:

  1. Less Predictive: Relies more on recent transaction data rather than predictive analytics, which may not be as effective in forecasting sudden spikes or drops in gas prices (Ethereum (ETH) Blockchain Explorer).
  2. Generic Estimates: The gas estimates are generally provided in broad categories (low, average, high), which may not be sufficient for users looking for more tailored information.
  3. Lack of Real-Time Adjustment: While it updates frequently, it doesn’t adjust in real-time to the mempool changes as effectively as Blocknative, potentially leading to less accurate predictions during fast-moving market conditions.

Mempool Space

Website: Mempool Space

Mempool Space

Pros:

  1. Bitcoin Focus: Specializes in providing detailed information about Bitcoin transactions, fees, and blocks, making it an excellent tool for Bitcoin users.
  2. Comprehensive Data Visualization: Offers extensive visual data about transaction fees, block sizes, and mempool status, which is invaluable for users who need to understand the current state of the Bitcoin network.
  3. Open Source and Community-Driven: The platform is open source, which not only makes it free to use but also benefits from continuous improvements and updates from the community.

Cons:

  1. Limited to Bitcoin: As it focuses exclusively on Bitcoin, users needing information on other cryptocurrencies like Ethereum must look elsewhere.
  2. Lacks Predictive Capabilities: Unlike Blocknative, Mempool Space does not offer predictive models for transaction fees, which can be a disadvantage during periods of sudden fee changes.
  3. User Interface Complexity: While informative, the interface can be complex and intimidating for users who are not technically savvy or familiar with blockchain details.

Gas Sweet Spot

Website: Gas Sweet Spot

Gas Sweet Spot

Pros:

  1. Simplicity: Tools like Gas Sweet Spot often focus on providing straightforward, easy-to-understand information and recommendations, making them accessible to casual users or those new to Ethereum transactions.
  2. Targeted Recommendations: Assuming it provides suggestions for the optimal gas price to minimize costs while ensuring timely transaction processing, this can be highly beneficial for individual users looking to optimize their transaction fees.
  3. User Interface: Such tools typically have a user-friendly interface, aiming to make the complex topic of gas fees more approachable for the average user.

Cons:

  1. Limited Data: Tools with a narrow focus might not offer the depth of data and analytics found in more comprehensive platforms, which could be a limitation for power users or developers.
  2. Lack of Predictive Capabilities: If it lacks real-time data integration or predictive capabilities, users may not get the most accurate fee estimates during periods of high network congestion.
  3. Restricted Features: The tool might offer fewer features compared to more robust platforms, focusing only on basic estimations without additional functionalities like historical data analysis or integration capabilities.

Overall, we found that competitors missed the mark in providing real-time data & predictive capabilities which Blocknative can provide through their Mempool Platform, customization and flexibility for confidence levels for gas predictions, and a mobile-friendly tool optimizing for scalability.

Based on these findings, we identified the features needed for this component to successfully meet our business goals & user needs.

How We Figure Out Gas Fees

Understanding gas fees can be confusing, to say the least. Blocknative shared the 3 core elements of how to calculate gas fees:

  • Block Conception: Instead of looking at past trends, our gas estimates are based on what's happening right now with the blocks being created, so they're always up to date.
  • Confidence Intervals: We let you pick how confident you want to be about the gas fees you're paying, so you can decide what works best for your budget and timeline.
  • Real-Time Data from the Mempool: Blocknative’s Mempool Platform checks the mempool — the waiting area for transactions — to see real-time conditions, which is super helpful when things get busy.

This provided more understanding of how Blocknative’s Gas Estimator will stand apart from its competitors and how we should design the confidence intervals.

Blocknative's Design System

The design of the Blocknative Gas Estimator is built upon Blocknative’s Design System, ensuring consistency, high performance, and a seamless user experience across the application. The design system's robust framework supports both light and dark modes, providing flexibility and accessibility for all users.

Blocknartive Design System

V1 - Legacy Model

The first iteration of the Gas Estimator we built for Blocknative in April of 2021, was constructed around Ethereum’s legacy gas pricing model.

The Gas Estimator was divided into 5 confidence intervals: 70%, 80%, 90%, 95%, and 99% probability, catering to users with more or less urgency an idea of the amount of gas required for inclusion in the next block.

Gas Estimator v1

Testing

Blocknative team tested this prototype with a small pool of peers in the gas platform space who shared conclusive feedback that

“It feels disorienting that all of the boxes are the same color. The only difference is the percentage of probability.”

This feedback was extremely helpful in understanding where this tool was leading users astray. We decided to change the colors on a scale of orange to green reflecting the percentage of probability. We also added an animation to highlight the constant update of data correlating to their respective probabilities.

Gas Estimator v2

Iterations

After launching the first version, the Gas Estimator went through multiple iterations till we were satisfied with a new design for launch.

Figma work 1
Figma work 2
Figma work 3
Figma work 4

EIP-1559 & Polygon Update

The next iteration of the Gas Estimator followed the EIP-1559 upgrade to the Ethereum network and introduced an entirely new blockchain. The changes to the Ethereum gas fee system introduced a base fee, priority fee, and max fee. The legacy model was still accessible via the toggle in the top right corner.

With the success of the Ethereum Gas Estimator, Blocknative began plans for extending gas prediction to other leading blockchains including Blocknative’s new partner, Polygon - a popular “layer two scaling solution” that runs alongside the Ethereum blockchain.

Now, Polygon users can access the most accurate real-time gas prices with the Polygon Gas Estimator.

Gas Estimator Polygon

Developing the Gas Estimator

The Gas Estimator was built with a React HubSpot component. While HubSpot is not traditionally built with React, there is a React module that allows engineers to build with their libraries. Overall, this approach led to super-efficient speed to market.

Results

Blocknative experienced unprecedented traffic with the Gas Estimator, most notably after the launch of EIP-1559. EIP-1559 significantly complicated the gas model. In turn, the spike diminished users' understanding of calculating gas fees on Ethereum.

Before the London Hard Fork and EIP-1559 update, the Gas Estimator page had 1,300 organic search views in July 2021. Shortly after, traffic started gaining steady momentum. For October, the Gas Estimator accumulated over 47,000 organic search page views.

To date, the Gas Estimator has over 1.6 million page views with an average session duration of 4.6 minutes.
Overall, the Gas Estimator has had an immense impact on the entire Blocknative site. In July 2021, Blocknative had roughly 4,000 site-wide monthly organic search sessions. Fast forward six months and that metric increased 10x to more than 48,000 site-wide organic search sessions for January 2022.

Since then we have continued to add more tools to help users navigate gas prices more efficiently including the Recent Gas Prices Chart & Average Gas Price Heat Map as well as a Chrome Extension.

Gas Estimator Legacy
Gas Estimator EIP 1559
Recent Gas Prices Chart
Average Gas Prices Heat Map

User Responses

The crypto community on Twitter (X) was very receptive to the Gas Estimator. Here are a few of the many responses we saw:

Twitter 2
Twitter 5
Twitter 1
Twitter 4
Twitter 6
Twitter 3