Blockdaemon
INTRO
Blockdaemon is a leading blockchain infrastructure platform in the Web3 space. Blockdaemon empowers businesses to quickly deploy and iterate innovative blockchain applications. It aims to reduce the complexity of working with blockchains through quick and easy configuration. It also provides monitoring for high availability and quality of service with institutional-grade security.
As a member of the Design team, I’ve worked on many projects, of which I’ll be going over Phase 1 of the ETH Protocol: Repositioning & Awareness project in this case study.
Before we explore the problem further, let's take a moment to understand some key terms, explained in a simple and easy-to-understand way with metaphors:
Protocols: They are standards and procedures for various aspects of a blockchain network, such as transaction validation, consensus mechanisms, network communication, and data storage. In the game of "Blockchain," protocols are like rulebooks that tell players (nodes) how to interact with each other. Bitcoin, Ethereum, Ripple—these are some of the top protocols in the blockchain industry.
Nodes: They are devices that play a crucial role in maintaining the protocol network's integrity, validating transactions, and ensuring consensus among participants. Nodes are the players in this game who follow the protocols to validate transactions, maintain the network, and make sure everything is running smoothly.
Staking: Staking is a process in which crypto holders participate in the validation and consensus of a protocol. It involves locking up a certain amount of cryptocurrency in a wallet or staking platform to support the protocol’s operations. Staking is like players in the game of "Blockchain" locking up their digital coins to support the network, and it's related to nodes because stakers help validate and reach agreements, ensuring fairness in the game while earning rewards for their active involvement.
PROBLEM
In mid-2022, Blockdaemon featured a Protocols page displaying a comprehensive list of protocols it supported through APIs and other services. Ethereum (ETH) stood out as a particularly popular protocol for the company. Enterprise-level clients would frequently refer to these protocol pages to explore the available APIs and services, subsequently contacting the sales team.
However, a significant issue arose due to the outdated nature of most protocol pages. Both the design and content failed to reflect the latest offerings provided by Blockdaemon. For instance, the ETH Protocol page lacked information about recently launched APIs and services, such as the NFT API. Also, the page was lengthy and had a lot of text with very little visuals to support it.
Consequently, this lack of up-to-date information created a notable awareness gap regarding the new offerings for various protocols. Consequently, fewer qualifying enterprise leads contacted the sales team, hampering potential business opportunities.
This video demonstrates what the ETH Protocol page looked like initially:
OBJECTIVES
While there were a lot of things to do, here were my assigned objectives for this project:
Redesign the ETH Protocol page to reflect the latest APIs and offerings, while improving its visual appeal and reducing clutter. The aim was to create a user-friendly and visually appealing experience that effectively showcased the new features.
Generate awareness among enterprise-level clients regarding the newly launched APIs and offerings. Through targeted communication and promotional efforts, the goal was to ensure that these clients were well-informed about the exciting additions to Blockdaemon's protocol offerings.
Increase the number of qualified enterprise leads by successfully achieving the first two objectives. By enhancing the ETH Protocol page and raising awareness, the aim was to attract more potential clients who would engage with Blockdaemon's services and ultimately connect with the sales team.
OPPORTUNITIES
The ETH Protocol page design had become outdated over the years, failing to represent Blockdaemon's evolving brand identity. This presented an excellent opportunity to not only update the content but also revamp the design to align with the company's new visual direction.
In addition to focusing on the ETH Protocol page, this project provided a unique chance to create a Protocol page template. This template would serve as a blueprint for redesigning other protocol pages, ensuring consistency and a cohesive visual experience across the entire platform.
To successfully generate awareness about the new APIs and offerings, close collaboration with the marketing team was crucial. This exciting collaboration presented an opportunity to dive into email designs and ad designs, starting from scratch and crafting visually compelling assets that would effectively engage the target audience.
LOCATION
Los Angeles, CA, USA
TIMELINE
2 months
SKILLS & TOOLS
UX Research
UX Design
Brand Identity Design
Competitor Analysis
Figma
Adobe Illustrator
Adobe Photoshop
Research
INTERVIEWS
While the visual redesign wasn’t a big challenge, understanding the APIs and services provided by Blockdaemon for the ETH Protocol page was surely one. I met with:
2 Product Managers
2 Marketing Associates
1 Head of Marketing
I asked the above 5 people about the new APIs and services that were being launched, as well as caught up about the existing ones. My Web3 technical knowledge was limited at that point, so I tried to learn more about how the tech works, so that I could redesign for it better.
I also needed to get into the minds of our enterprise clients. Because I had no direct access to the enterprise clients, I relied on the face-to-face interactions that our sales team has with clients on a regular basis, and met with 3 Sales Associates to understand the following:
What do enterprise clients need with regards to blockchain APIs and services?
What key metrics or statistics do enterprise clients prioritise when evaluating a protocol for their business?
What are some challenges enterprise clients face when they have to choose a vendor for their blockchain infrastructure needs?
What are some examples from your experience with emails, pitch decks or one-pagers presented to clients that have gotten a positive outcome?
The Sales team shared their insights from their experience directly communicating with our existing enterprise clients, and here’s the affinity map I created to understand what we needed to work on:
AFFINITY MAP
FINDINGS
Here are the findings from the above affinity map:
COMPETITIVE ANALYSIS
In addition, I conducted competitor analysis to gain insights into the blockchain infrastructure space, and here are the key findings:
I noticed that there were a few things that we absolutely had to build:
Feature list & details section with excellent visuals.
Stats like staking rewards and additional rewards for the protocols.
Blog posts section to establish trust with the client.
Docs section to enable clients who generally want to read them before making a purchase decision.
Define
USER PERSONA
We knew exactly who we wanted to target, since we were familiar with our existing enterprise clients. I drew up a user persona to make sure that everyone on the Product and Marketing team was aligned:
USER JOURNEY MAP
With Alex with us, I made a user journey map for what her journey looks like when she has to decide which blockchain infrastructure vendor to choose for her org’s needs:
INSIGHTS
We learned that we had to update our visuals.
We knew that we had to not only update, but also restructure the content on the page to show updated info, as well as info in a way that is appealing to our target client.
We had to build trust and respect with our target client.
Here’s what we decided to work on:
"How might we effectively showcase the ETH Protocol page to increase awareness and attract executive-level decision makers, driving qualified leads for Blockdaemon's blockchain infrastructure services?”
Ideate
VISUAL REDESIGN
A few months prior to this project, our current website designs had inconsistencies in typography, colors and brand elements. So I created an MVP of a Style Guide that the design team could use going forward for future website designs.
For the ETH Protocol project, the plan was to use this Style Guide so that it ensured a nice visual update as well as future consistency.
Moreover, I pushed for the idea of making sure that we include some key design elements on the new design page:
Stats section
Offerings section with supporting links & visuals
Blog section to establish trust
CTA to let them try our app and stake ETH or launch a node
Current client logos to establish trust
We also were newly launching the NFT API for the ETH protocol, and seeing that it was an offering under the ETH Protocol, we decided to create a dedicated page for that and showcase the offering on the ETH Protocol page.
TEMPLATED APPROACH
I spoke with the team about creating a template page that could be used for all protocols, and not just the ETH Protocol page. This would enable us to ensure consistency and speed, while still giving us room to customise each protocol page to our liking. It would also cut down the time required for our future protocol page updates by a lot.
AWARENESS & TRUST
I worked closely with the marketing team to explore how we could create more awareness and trust around our brand. We came up with a few ideas:
New Sales One-Pagers
New Social & Display Ads
Email Newsletter Redesign
Blog Post Cover Images Redesign
Prototype
This section will consist of three key things:
Protocol Page Redesign
Email Newsletter Redesign
Blog Cover Images Redesign
PROTOCOL PAGE REDESIGN
Owing to the Style Guide I’d previously created and the components available in the Style Guide, I could get to high-fidelity wireframing easily and quickly without having to do low-fidelity. Also, since I was working with other departments in the company, it was important to show them high-quality visuals with the initial designs.
I tackled it section-wise, starting off with the hero section. We wanted to go with the templated approach, where we create a protocol page template, and then use that for all the protocol pages.
Here was the hero section from the current (old) design:
I noticed that there were too many stats that cluttered the old design and some of these stats weren’t relevant to our target client. The hero section copy was also incomplete and didn’t give a good overview of our latest offerings.
To showcase our proficiency in applying the templated approach, I opted to utilize the Polkadot Protocol page instead of the ETH Protocol page when getting started with the new templated protocol page design. By using the Polkadot protocol as a placeholder template, I aimed to demonstrate our capability of creating a flexible template page capable of accommodating complex protocols like Polkadot, while also ensuring its future adaptability for the ETH Protocol page.
So I designed two options, using the new Style Guide, to refresh this hero section and give it new life:
I gathered some feedback from the team and we found that Option 2 highlighted the stats well. It also places the description of the protocol on the left and stats on the right, which made sense for a natural reading pattern.
But option 2 also had some typography issues with the stats being too large and distracting. While they were important, it was also important to tone them down for better hierarchy. Here’s the final hero section design:
Next up was the features section. Here is the current (old) design:
It had a lot of cluttered text just one visual to support it. It was also missing some of our key offerings, including the staking feature and the latest NFT API. This was going to be crucial since we had to work in a lot of our new offerings. We also had to do this in a templated approach.
So I designed two options initially:
Option 1: An image-rich option, with all the key offerings up front.
Option 2: A multi-tab option, with icon-rich cards with a small set of our key offerings up front, with the other offerings being in the other tabs.
I gathered feedback from the team and we realised that while Option 1 made more sense as it had a higher chance to allow our potential clients to see all of our offerings as opposed to Option 2, the cards still limited what we could show for our offerings. The cards limited the amount of copy if we needed to add more in the future.
I reiterated on Option 1, and here is the final design:
It was important to tell a cohesive story on the page. This redesigned option gave us that opportunity. We could clearly show our key offerings, ordered according to the target client’s priority, with good supporting visuals and tertiary buttons to docs so that they could read about the tech before opting in.
Now that we presented our key offerings, it was time to go for the CTAs to stake and launch a node, which were our key offerings, but were missing from the old design. Clients could try out the app in a test environment on their own with these CTAs, and then would contact the sales team for production-level needs. To establish even more trust, we added in our blog section and current clients section. Here was the final design for the CTA & trust section:
With the CTA & Trust section in place, it was time to add the contact & FAQs. Here’s the contact & FAQs section:
The final design for the templated protocol page was done! I created the corresponding ETH Protocol page using this template, with ETH-relevant stats and other details, while a considerable amount of our copy for the key offerings stayed the same. This is what the ETH Protocol page looked like in the final design:
EMAIL NEWSLETTER REDESIGN
Our current newsletter was a simple text-only newsletter with our logo at the top. It was in need for a full redesign.
I created some new 3D assets as well as some previously-created 3D assets for the email newsletter’s new header image. These 3D assets would help the design team design and ship some of our design work like blog post cover images, YouTube thumbnails, and other event assets faster. Here’s a glimpse at some of my 3D artwork:
Using some of these 3D assets, I created the new email newsletter design. Here it is:
BLOG COVER IMAGES REDESIGN
The blog post cover images had inconsistencies in design and frame sizes. Most of them had a plain white background with simple text and an unpolished image, which didn’t catch the attention we needed if blog posts were posted on socials.
Wanting to change this and make it more visually appealing, I designed some new blog cover images:
I also wrote some blog cover image guidelines and created some templates for the team that was working on these images for future consistency and efficiency.
Test
By implementing the new template, we successfully revamped all the protocol pages, executed the redesigned newsletter format, and refreshed several recent blog posts. While most of the deliverables I produced in this project were public-facing, the test results are not. I cannot share the exact metrics of improvement, and these key metrics that I measured with the exact stats redacted is the best I can do for now:
The significance lies in ensuring that our target clients can easily grasp our core offerings, make informed comparisons with other vendors, and confidently inquire about our services. Through our engaging newsletter and informative blog posts, we effectively established a sense of trust and credibility with our audience.
Conclusion
LESSONS LEARNED
One of the most important things I learned in this project was applying a templated approach. In many instances of dealing with homogeneous data where we have to redesign just one item, we often design a one-off for that item. But this project got me thinking toward a templated approach that would save effort in the future as well as ensure design consistency.
I understood what enterprise-level clients wanted from a protocol page, which was very helpful for my other projects in this company. A lot of my process had to adapt to this type of client.
NEXT STEPS
After successfully implementing the templated approach for the protocol pages, the next phase of the project involved updating all the remaining protocol pages, a task effectively accomplished by our exceptional engineering team.
Furthermore, recognizing the importance of consistency in 3D artwork, I decided to establish clear guidelines for the design team. These guidelines will serve as a reference point to ensure uniformity and cohesion in all 3D art produced.
By defining specific parameters, techniques, and stylistic elements, we aim to maintain a cohesive visual language across our 3D artwork, enhancing overall brand consistency and user experience.
FINAL NOTE
Undertaking this substantial project was undoubtedly a challenge, particularly considering the tight 2-month timeline. The workload was demanding, keeping me occupied throughout the duration. However, seeing the remarkable results achieved made every ounce of effort worthwhile.
I can’t thank Blockdaemon enough for giving me this opportunity. I’m so lucky to have worked with the amazing design team there!
