Blockdaemon Design System


Design at scale.


Blockdaemon is a B2B2C company that helps customers deploy blockchain nodes in the cloud. The world's largest companies, including Fortune 500 enterprises, banks, custodians, and trusts, use Blockdaemon.

Running a node isn’t easy

A blockchain node is a peer in a blockchain network. It is specialized software running on a server, connected and communicating with other peers.

Running a blockchain node can mean using vast amounts of disk space, memory, and bandwidth. Additionally, to run reliably, the node must maintain 24/7 uptime to avoid losing tokens.

Many customers work with a specialized company to handle these scale and reliability challenges. Blockdaemon offers solutions for over 60 blockchain protocols.

My role

I started working with Blockdaemon as a consultant through my business, Gravy

After six months of working together, Gravy was acquired by Blockdaemon, and I joined the team full-time as the Director of Design. I hired and managed a team of product designers, marketing/brand designers, and user-centered researchers. 

The Blockdaemon Design System

When I started working with Blockdaemon, there was a need for a consistent, scalable design system.

I started with an accessibility audit of the current design system to understand how users might perceive the existing elements, such as color, typography, space, and size.

 

Testing color contrast with brand colors ensures that colors remain accessible in context.

 

I worked on a system of components, working closely with the UI development team to ensure a consistent, scalable approach to our app development.

 

A selection of the button styles and variants I designed focused on accessibility across various placements.

 

Before and after

Here is a selection of images of Blockdaemon before I put the design system into place, as well as after. Note the hierarchy, consistency, and storytelling per screen.

A node page, sharing health and hardware metrics

Ubiquity, the Blockdaemon API solution

The Blockdaemon 404 page, with more helpful guidance and context shared with the user.

Product design principles

I led the creation of a set of principles. The design team uses these principles to align and guide the design team to create consistent and meaningful solutions across projects and focus on teaching product and marketing designers and writers.

Visual design concepts

We used the product design principles as a basis for a selection of visual design concepts to show how Blockdaemon’s product offering might evolve over time.

A peek into the future of the Blockdaemon API product.

Running blockchain infrastructure at scale.

User experience writing

Beyond the visual elements of our design system, we created a set of standards to ensure consistency around terminology, formatting, and language within our app and marketing content.

An excerpt from our standards guide highlighting the tone of voice we strive for with in-app copy.

Marketing and brand design

Part of my role at Blockdaemon was to oversee and inform the visual expression of our brand. Visual expression included conference booths, social media posts, ownership over our logo and website, and even physical space design for our offices.

 

We use a one-pager printout for conferences to share our value proposition with the world.

 

Further thoughts

One of Blockdaemon's core value propositions is its ability to enable its customers to deploy nodes, scale them, and enable customers to stake. I designed a storyboard for telling this end-to-end story with Blockdaemon to set the vision for the product over the coming years.

This foundational work helped me scale the work of the entire design team by leading with a unified visual language and principles.

One challenge I faced along the way was in presenting the design principles to non-designers. Crafting the message around how the design team (and non-design teams) would leverage the principles taught me that how projects are presented and communicated is as important as the work itself and goes hand-in-hand with the design work.

The outcomes of this design system work helped inform the language and product offered to customers and our website. As a result, click-through rates increased by 64% on key feature pages with the visual language and principles applied.