Blocknative Sees 10x in Organic Traffic with Gas Estimator Tool
Lead Product Designer
Retainer 2021 - 2023
Figma, Hubspot, Illustrator, Photoshop, After Effects, Hotjar, Jira
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.
Blocknative has aggressive growth goals and strives to be the #1 platform for transaction management and monitoring solutions within the blockchain. One of the main issues that 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 be frustrating to users and often makes or breaks 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.
Leverage Blocknative’s real-time mempool data to design and develop an Ethereum gas estimation tool.
V1 - Legacy Model
The first iteration of the Gas Estimator we built for Blocknative launched in April of 2021, constructed around Ethereum’s legacy gas pricing model.
The Gas Estimator was divided into 5 confidence intervals: 70%, 80%, 90%, 95%, and 99% probability. This range of estimations gives users with more or less urgency an idea of the amount of gas required for inclusion in the next block.
Correlative feedback colors (green to orange) are assigned to each interval to emphasize their respective accuracy. Gas estimations are updated in real-time with an animation to highlight the constant updating of data.
The design our team created seamlessly fit with the rest of Blocknative’s branding, including elements like dark mode, text font, simplicity, and radiant colors.
V2 - EIP-1559 Update
The second version of the Gas Estimator was released in September of 2021, following the EIP-1559 upgrade to the Ethereum network. 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.
V3 - Polygon
The third Gas Estimator update was released in May 2022 and introduced an entirely new blockchain. With the success of the Ethereum Gas Estimator, Blocknative began plans for extending gas prediction to other leading blockchains. The V3 includes 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.
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.
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 sitewide monthly organic search sessions. Fast forward six months and that metric had done a 10x to more than 48,000 site-wide organic search sessions for January 2022.