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 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 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.
Our research began by identifying who our users were using this tool. Blocknative provided user personas of who their core demographic is:
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.
Website: Etherscan Gas Tracker
Website: Mempool Space
Website: Gas Sweet Spot
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.
Understanding gas fees can be confusing, to say the least. Blocknative shared the 3 core elements of how to calculate gas fees:
This provided more understanding of how Blocknative’s Gas Estimator will stand apart from its competitors and how we should design the confidence intervals.
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.
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.
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.
After launching the first version, the Gas Estimator went through multiple iterations till we were satisfied with a new design for launch.
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.
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 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.
The crypto community on Twitter (X) was very receptive to the Gas Estimator. Here are a few of the many responses we saw: