Learn how Blocknative, a blockchain infrastructure company, exponentially grew their website traffic with a real-time Ethereum gas estimation tool. Additionally, we will highlight the Web 3.0 design elements we used to rebrand 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.
Introducing the Blocknative Gas Estimator.
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.
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.
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.
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.
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.
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.
In adddition to the Gas Estimator, Webstacks also helped Blocknative with a significant rebranding and website redesign.
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:
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.
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:
The new and improved Blocknative branding is simple yet distinctive. The copy, illustrations, and animations help project a truly unique identity.
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.
This second table is below the fold of the page, and provides a more comprehensive breakdown for users who would like to learn more.
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!
Blocknative is a Blockchain company focused on building infrastructure to monitor and manage the complexity of transacting on public blockchain networks.
San Francisco, CA
Blockchain/Crypto
40
