← All work

Case study / Datagram

Four surfaces. One UX thread. 100,000 node operators in four weeks.

UX Strategy

Art Direction

Webflow

Web3 · DePIN · Infrastructure

In this case study

01About the project→ 02Challenge→ 03Methodology→ 04What was delivered→ 05Result→ 06Strategic note→

Four surfaces. One UX thread.
100,000 node operators in four weeks.

Decentralized data infrastructure. Four product surfaces. One UX thread.

Datagram is a Global Hyper-Fabric Network, a decentralized infrastructure layer for computing, bandwidth, and storage. The network connects DePIN projects, enabling them to share resources without building their own infrastructure from scratch. Node operators run the network and earn $DGRAM rewards for uptime and resource contribution.

Pre-seed: $4M. Backed by Animoca Brands, Amber Group, Blizzard (Avalanche Fund). 200+ enterprise clients. 1M+ users on the network.

About the client

Industry

Web3 / DePIN / Infrastructure

Stage

Pre-seed

Location

USA

Timeline

2024

My role

UX Lead, Art Director, Webflow Coordinator

Studio

Proof of Work Studio

Results

100,000+

node operator signups at testnet launch

10,000+

signups in the first 24 hours

350,000+

video views

$4M

pre-seed raised

Node sales break in four places. Every time.

You're asking someone to spend real money on an abstract commitment: the right to run software on a network that may not fully exist yet. No product to demo. No service to evaluate. A whitepaper, a roadmap, and a community.

Most node sale sites respond by adding complexity. More information. More steps. More modals. The theory is that more information builds confidence. The data says otherwise.

A node sale isn't one product. It's four: a marketing website that needs to explain the vision and convert visitors into buyers; a checkout flow that has to earn trust at the moment of transaction; an admin panel that node operators use after the sale; and a desktop application where the license becomes an active node. In most Web3 projects these surfaces are built independently. The UX breaks at every handoff.

Datagram had a real product and a clear vision. What they didn't have was a unified UX architecture that could carry a user from first contact to running node without losing them in between.

Methodology

Timeline and Release Architecture

Treated testnet and mainnet as two distinct UX moments with different audiences and different stakes. The testnet is not a preview. It's a load-bearing part of the conversion story. A successful testnet gives the node sale something no marketing copy can manufacture: operators who'd already run the software.

Testnet: invitation-only, free licenses, proof of concept before any money is on the table

Mainnet node sale: paid licenses, broader audience, the actual revenue event

Competitor Analysis

Mapped the full information architecture of competing node sale sites. Pattern was consistent: sites built by engineers for engineers. Long technical explainers before any value proposition. Checkout flows that assumed the user had already decided to buy. No clear path from new visitor to confirmed buyer. The baseline was low.

Sitemap: Three-Audience Architecture

The site had to serve three user states simultaneously: Discovery, Evaluation, Activation. Each requires different information, depth, and CTAs. Designed the sitemap so each had a clear path — not a convergence point where all three audiences compete for the same navigation.

Discovery: "What is Datagram?"

Evaluation: "Should I buy a node license?"

Activation: "I bought — what now?"

Wireframes with Functional Copy

Every wireframe built with real copy. Not placeholders. In complex technical products, copy is part of the information architecture. UI designers received frames that were content-resolved — they could focus on visual execution, not content problem-solving.

Testnet Onboarding: Highest-Stakes UX

The testnet had no checkout. Licenses were free and invitation-only. The challenge: get an invited user through registration, into the admin panel, through license activation, into the desktop software, and to a running node — without support. Each step confirmed the previous one.

Registration

Admin panel entry

License activation

Software launch

Stats visible and updating

Admin Panel: UX Redesign, Not Just UI

The brief was UI design for an existing panel. I looked at what was there and redesigned the UX instead. The complete operational loop: receive key, store, manage, connect, share resources to network. Every break point in the existing flow resolved. Then we built the UI on top of that.

Original: broken UX, users could not store or connect keys

Redesigned: receive key, store, manage, connect, share resources to network

Desktop Node Software: Out of Scope, Done Anyway

The desktop software was not on my list. I looked at it during the admin panel work and saw two categories of problems: the logic was off, and the UI communicated it poorly. I brought it to the client: here's what's wrong, here's what I'd do differently, here's why it matters. They said yes.

Every node state (connecting, running, error, idle) made self-explanatory

No documentation required to onboard

Client appreciated the initiative

Node Sale Checkout: One Screen, One Action

One product, one price, one action. 3D product visual, three key specs, price, quantity selector, Buy Now button. Progress bar for visible scarcity. No comparison tables. No package selector. No friction between "I want this" and "I bought this."

Art Direction and Team Coordination

Directed full UI execution across the project: reviewing concepts, setting visual direction, aligning multiple designers to a single quality standard. Coordinated the team throughout — maintaining alignment, tracking timeline, and keeping handoffs clean across all workstreams.

Webflow Development Coordination

Coordinated all Webflow development for the marketing website. Not code review — architecture review. Making sure the development output matched the UX intent, not just the pixel mockup. The admin panel and desktop software were built separately outside of Webflow.

From brief to running node.

End-to-end UX across four product surfaces: marketing website, testnet onboarding, node sale checkout, admin panel, and desktop software. All shipped within a single coordinated release cycle.

Marketing Website

Full sitemap, wireframes with functional copy, art direction, Webflow development coordination. Three-audience architecture: discovery, evaluation, activation.

Node Sale Checkout

One screen. One product. One price. One action. A progress bar for scarcity, specs for confidence, Buy Now for clarity. No comparison tables. No friction.

Admin Panel

Full UX redesign, not the original brief. Rethought the entire key management flow: receive, store, manage, connect, share resources to network. Then UI on top. Referral tracking as a separate flow.

Desktop Node Software

Not in scope. I identified UX logic problems and poor UI communication, proposed a redesign, client agreed. Every node state (connecting, running, error, idle) made self-explanatory without documentation.

100,000 node operators in four weeks.

The node sale was the funnel. The running node was the product. Most node sale UX treats the checkout as the endpoint. Get the user to pay. Done. That's wrong. The checkout is the beginning of the operational relationship. Every operator who doesn't successfully connect their node is a support ticket, a refund risk, and a negative signal in the community. The testnet launched and filled fast. 10,000 signups in the first 24 hours. The architecture worked as designed: every surface handed off to the next, no dead ends. Four product surfaces, one UX thread, zero broken handoffs.

Key achievements

100,000 node operators signed up at testnet launch. 10,000 in the first 24 hours.

Admin panel redesigned beyond the original brief. Operational loop built from scratch: receive key, store, manage, connect, share resources to network.

Desktop node software redesigned without being asked. UX logic problems identified, solution proposed, client agreed, delivered.

Four product surfaces shipped as one unified UX thread. Zero broken handoffs between website, testnet onboarding, admin panel, and desktop software.

Node sale checkout reduced to one screen, one product, one price, one action. No comparison tables, no package selector, no friction.

100,000+

node operators signed up

10,000+

signups in first 24 hours

350,000+

video views

$4M

pre-seed raised

Strategic note

Node sales are a capital formation mechanism dressed as a product launch. The UX determines whether the mechanism works.

I've seen this pattern repeatedly in Web3: technically legitimate projects that fail to convert because the purchase experience signals doubt instead of confidence. A checkout that makes you read three paragraphs before you can proceed. An admin panel that requires a support ticket to navigate. A desktop app that silently fails with no explanation.

The Datagram project was an opportunity to build a node sale experience that worked as a unified system — not four separate products held together by hope.

What I designed: a single UX thread that carried a user from first contact on the marketing website through the purchase, into the admin panel, and out the other end with a running node. Each surface handed off to the next. No dead ends.

10,000 signups in the first 24 hours. 100,000 node operators in four weeks. That's the number. The architecture is what made it possible.