Blocknative Sees 10x in Organic Traffic with Gas Estimator Tool

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. 

Opportunity: Leverage Blocknative’s real-time mempool data to design and develop an Ethereum gas estimation tool. 

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.

Introducing the Blocknative Gas Estimator.

Designing the Gas Estimator

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 design our team created seamlessly fit with the rest of Blocknative’s branding, including elements like dark mode, text font, simplicity, and radiant colors. 

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.

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.

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 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.

The Gas Estimator rapidly started ranking for more than 800 keywords, with remarkable positioning for highly competitive keywords. It currently ranks in the top 3 for “eth gas tracker,” “gwei price,” and “Ethereum gas” - queries with keyword difficulty scores between 86 and 88 (on a 100-point scale) according to Ahrefs. 

Ultimately, we have associated the success of the Gas Estimator with two key factors:

1. It is Invaluable to End Users and Blocknative

For users, the Gas Estimator delivers continuous, unparalleled value at zero expense. The tool solves a critical pain point that all blockchain developers and traders face and allows for more informed, economical decision-making. Before every transaction, Ethereum (and now Polygon) users can turn to Blocknative to help save money on gas fees. 

From Blocknative’s perspective, the Gas Estimator is now a key top-of-funnel asset. Blocknative strives to democratize mempool data and pre-chain transparency, so they made the Gas Estimator open to the public and completely ungated. 

While ungated content generally serves to boost SEO and increase brand awareness, the Gas Estimator has become a substantial lead generation tool for Blocknative. Many traders and developers who initially come across the Gas Estimator would also gain value from the rest of Blocknative’s products, such as the Mempool Explorer and Gas API. 

2. It is an Authoritative Source 

Blocknative has established itself as a reliable and reputable source for information regarding gas fees. Not only is their Gas Estimator data consistently accurate, but it is displayed in a distinct, user-friendly manner. Overall, it provides a pleasant user experience and enhances brand equity for Blocknative. 

From a metrics standpoint, the Gas Estimator’s URL rating has shown substantial growth and is one of Blocknative’s strongest sub-pages, established as a resource for estimating gas fees, with over 800 backlinks. 

The SEO of this page is also effective in a remarkable way. While the page has minimal copy, it still outperforms most other websites related to gas fees. This is because the Gas Estimator is unique and solves users' needs far better than any written content could.  

The Webstacks Methodology

Together with Blocknative, we identified a key issue that the entire Ethereum community was dealing with - estimating gas - and leveraged data to implement a solution that was easily accessible, intuitive, and resourceful for users.

Our team at Webstacks specializes in building unique tools that develop your website into a product, like the Gas Estimator. We see a massive opportunity for more Web3 companies like Blocknative to explore innovative solutions that increase traffic, provide value, and establish topical authority.

If you wish to learn how our team can help you create one-of-a-kind user experiences while increasing lead generation, contact our sales team.

Now, let's discuss how redesigning Blocknative’s website branding aligned the company with Web 3.0, and enhanced their product offerings.

Problem: Effectively educating users on blockchain and Blocknative’s innovative solutions

Given the newness and complexity of blockchain, many companies in the space struggle with brand positioning, and accurately presenting their value proposition to potential customers.

For Blocknative, its mission is to create Web3 products that improve users’ transaction experiences on the blockchain. This is achieved by managing a platform that constantly evaluates extensive amounts of real-time, pre-chain data from the mempool.

Inherently, Blocknative’s products are complex and difficult to comprehend for the average trader or developer. It is a considerable challenge to explain the mempool and the problems that Blocknative solves clearly and cohesively.

Before working with Webstacks, Blocknative’s website faced 3 key issues:

1. The design of the site was dated.

2. The content lacked clarity.

3. The product pages were disjointed.

Ultimately, its website did not reflect the company’s identity and its ambition to provide industry-leading Web3 tools.

To emerge as a reputable and professional brand, Blocknative would need a website that looked as credible as its products. 

Solution: Create a Website Redesign Using Atomic Design

Our team at Webstacks pitched Blocknative with a redesign that applied Atomic Design systems. 

After creating documentation for Atoms, Molecules, and Components, we worked closely with Blocknative to come up with a design for the homepage that would also serve as a framework for the entire website.

There are several advantages Atomic Design brings to redesigning a website:

• Ability to easily mix and match components

• Increased speed to market for marketing, design, and developer teams

• Scalability through recycling of pre-existing components

• Consistency in code that reduces redundancy

To learn more about our approach to building better web experiences, download our Ultimate Guide to Atomic Design here.

Outcome: A Website Optimized for Web 3.0 Design

Styling

Our goal was to align Blocknative with the trends of Web 3.0 design - something we’ve become very familiar with working with our crypto and blockchain clients. Some elements we wanted to highlight while designing the Blocknative site were:

• Dark mode

• Vivid gradients

• Futuristic illustrations

• Trust bars

• Web animations

The new and improved Blocknative branding is simple yet distinctive. The copy, illustrations, and animations help project a truly unique identity. 

Gas Estimator

In addition to a website redesign, Blocknative approached us with a desire to create a visual tool that leveraged their mempool data. 

Together, we were able to design and develop the first iteration of the Gas Estimator. With the Gas Estimator, users can monitor live transaction fee estimates for inclusion in the next block on Ethereum and Polygon.

Since launching in April of 2021, we have continuously added more features and improvements to the Gas Estimator page. In addition to the multiple iterations, we built out a heat map and chart that uses Blocknative’s historical gas fee data.

Having a UI-friendly mobile version of the Gas Estimator was also a priority for Blocknative. Our focus was to include every element on one screen, without making it appear too cluttered.

The Gas Estimator has grown to become one of Blocknative’s greatest assets - being a significant source of organic traffic and new business.

Pricing page

With Blocknative’s pricing model having multiple plans and tiers, we had to create a layout that was not overcrowded or confusing for the user.

Our design minimizes complexity and is intuitive to navigate. The pricing page is also consistent with the design cues seen throughout the rest of Blocknative’s site. 

Conclusion

In the competitive and complex space of blockchain, it is crucial to provide a quality user experience. 

When Blocknative approached us, they had a clear need for branding that their suite of products could stand on top of. Through Webstacks’ redesign, Blocknative can better present its products and educate users.

Reflecting on our redesign, we believe our implementation of Atomic Design brought Blocknative’s website much-needed consistency and efficiency. Using web 3.0 design elements, we were able to create a distinct identity for the Blocknative brand. In addition to the redesign, the Gas Estimator has become Blocknative’s most trafficked page and established them as an authoritative source regarding gas fees.

We are so proud of what Blocknative has accomplished, and cannot wait to see what they build for the future of blockchain. Their company has seen unprecedented growth over the last two years and continues to foster partnerships with some of the largest players in the crypto industry.

We are so excited to keep working with the Blocknative team to improve their website, and help onboard users for the next generation of finance!