Announcement

GatsbyJS announces the 2021 Gatsby Agency of the Year: Read Announcement

Chat
Blockchain

Blocknative Adopts Web 3.0 Design to Elevate Their Brand

Learn how redesigning Blocknative’s website redefined their branding and product offerings.

Modular

design system

#1

Gas Tool

3

new resource pages

blocknative-logo
Product Team Size:
2+
Solutions:
Web Design, Creative
Technologies:
HubSpot, Figma Design
Talk to sales
Brought to you by

Flexible product teams to start, run and grow website operations.

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. 

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.

Read more about how we helped Blocknative 10x organic traffic with the Gas Estimator.

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!

Brought to you by

Did you find this article helpful?

We provide flexible product teams to high-growth technology companies to help them start, run and grow website operations.

Talk to sales