Making the Invisible

Network Visible

// Overview

The world's largest decentralized wireless network existed—but nobody could see it. I transformed terabytes of coverage data into an intuitive visualization.

Duration

5 Months

Role

Contract Designer

Industry

Web3, Telecom, DePIN

Business Model

B2C

Focus

DataViz

// Context

Why I was
brought in.

950,000+ hotspots.
Zero visibility.

Helium Foundation operates the world's largest decentralized LoRaWAN network. Their Explorer was hastily built "in a couple weeks" when Helium launched on Solana—it needed a complete redesign.

I was a Contract Product Designer via Matcha Design Labs. Led Explorer redesign end-to-end, partnering with 4 engineers over 5 months to transform technical complexity into delightful experience.

CROSS-FUNCTIONAL TEAM I COLLABORATED WITH

Sr. Technical Director

Frontend Developers

Protocol Team

// Who Was Affected

Three user types. One broken experience.

Users assumed wireless coverage was binary. But LoRaWAN uses signal propagation with overlapping zones—this mismatch caused widespread confusion across every user type.

Network Operators

Enterprise teams deploying sensor networks at scale.

"Do I need to install my own gateway, or will existing coverage work?"

Amazon Shoppers

First-time buyers who purchased sensors without checking coverage.

"I bought a $200 sensor. Will it even work in my area?"

Hotspot Owners

Network contributors monitoring performance and earnings.

"What value am I actually adding beyond token earnings?"

950K+

Hotspots globally

10K+

Network participants

50/50

Mobile / Desktop split

8+

Tools visited per session

// Pain Points

Four barriers to understanding.

Coverage Confusion

Users assumed binary coverage. LoRaWAN uses signal propagation with overlapping zones.

Discovery Friction

Finding coverage info required 12+ minutes across 8 different tools and sites.

Privacy vs. Accuracy

Exact hotspot locations risked privacy (some in homes). Vague locations were useless.

Value Blindness

Network value was invisible beyond token earnings. No way to see contribution impact.

67%

Couldn't verify their coverage

340+

Support tickets per month

$45K+

Monthly support cost

"

I have devices deployed but I literally cannot tell if they have coverage. It's like being blindfolded in my own network.

– Network Operator

// Process

20 weeks of iteration.

From wireframes to production.

01

W1-2

Discovery

PRD deep-dive, personas, competitive analysis

02

W3-6

Lo-Fi

Hexagon systems, IA exploration, bi-weekly validation

03

W7-12

Hi-Fi

Visual system, mobile patterns, stats dashboard

04

W13-20

Build

Polish, dev partnership, WebGL optimization

Map as Hero

UI gets out of the way. Map tells the story.

Minimum Lovable

Find emotional core. Every pixel earns its place.

Progressive Disclosure

Complexity when needed, simplicity when not.

// Options Tested

Traditional maps couldn't solve it.
New paradigm needed.

⚠

⚠

Critical Technical Constraint

Critical Technical Constraint

"Dots show where hotspots are. Users need to know where their sensors will actually work."

Surfaced in the first weeks of discovery. Exact hotspot locations risked privacy, since many sit in people's homes, but vague locations were useless. Helium's H3 hexagon grid at resolution 8 (about 460 m edges) let us show coverage area instead of addresses. This shaped the whole approach: hexagons as information containers, not dots on a map.

Rejected

Full Data Display

All metrics visible at once

→ Cognitive overload

Partial

Tabbed Information

Separate views for each data type

→ Lost map context

Selected

Progressive Hexagons

Layers reveal on interaction

→ Best of both worlds

Design Challenge

Hexagons aren't just shapes—they're information containers revealing complexity progressively.

// What We Built

Spatial hierarchy.
Context at every zoom level.

01

Default

Color gradient shows signal strength

at a glance.

  • Red → Green gradient

  • Beautiful at every zoom

02

Hover

Quick metrics without committing

to full dive.

  • Hotspot count & RSSI

  • Last update time

03

Click

Complete information panel,

API access.

  • Full hotspot list

  • Third-party links

Design Exploration

explorer.helium.com

explorer.helium.com

Mobile Bottom Drawer

Bottom sheet pattern — expandable without losing map context.

25%

Collapsed

75%

Expanded

Signal Strength Colors

Stoplight convention — universal mental model, zero learning curve.

Weak

Medium

Strong

ALSO SHIPPED

ALSO SHIPPED

Stats Dashboard Redesign

The existing dashboard had 47 disconnected metrics with zero narrative. We restructured around key hero metrics with supporting data revealing progressively—turning numbers into decisions.

explorer.helium.com

// Design Choices

Key decisions validated by stakeholders.

01

Customer Validated

Indoor vs. Outdoor Coverage

"Take this technical thing and distill it for everyone—talk about indoor vs outdoor coverage expectation."

— Senior Technical Director

02

Internal

Hexagon as Container

"I like the direction. Some things are not as important as I thought, seeing this put together."

"I need to see what's happening under

the hood."

— Senior Technical Director

03

Customer Validated

Third-Party Integration

"We want to support third party analytics. Have a little 'open in Helium Geek' with a logo."

"Can I just approve all

at once?"

— Senior Technical Director

04

Customer Validated

Stats as Narrative

"The dashboard tells a story now, not just numbers. My investors finally get it."

— Network Operator

// Design Architecture

The system I delivered.

The core architecture solved the original problems: hexagon-based coverage visualization, progressive disclosure, and stats that tell a story. These patterns established the foundation for production and continue to serve millions of users.

Hexagon Coverage Model

H3 hexagonal grid visualizes signal propagation zones instead of binary "covered/not covered." Resolution 8 (~460m edges) balances accuracy with privacy.

Progressive Disclosure

Three-layer information architecture: Global stats → Regional breakdown → Hotspot detail. Each level reveals more without overwhelming.

Stats That Tell a Story

Network health isn't just numbers—it's narrative.

Metrics organized by what users actually need to decide: coverage, density, growth trends.

Final Design Screens

explorer.helium.com

explorer.helium.com

explorer.helium.com

The Guiding Principle

"Simple by default, powerful on demand." New users get a clean, approachable interface. Power users toggle on data layers to reveal the full complexity. Both audiences served, neither overwhelmed.

// Final Designs

Production-ready designs.

The redesigned Explorer shipped and serves millions of users daily across Mobile and IoT networks. The core concepts I established—hexagon coverage model, progressive disclosure, stats narrative, keyboard-first search—are the foundation of the production experience.

// Impact

Comprehension transformed. $380K saved annually.

47%

↑ Comprehension

68%

Use all 3 features

$380K

Annual savings

400%

↑ API calls

Understanding

Coverage ID

Manual steps reduced by 73%, SE involvement minimized

33% → 80%

Manual steps reduced by 73%, SE involvement minimized

Time to insight

Manual steps reduced by 73%, SE involvement minimized

12m → 90s

Manual steps reduced by 73%, SE involvement minimized

Tickets

Manual steps reduced by 73%, SE involvement minimized

340 → 110

Manual steps reduced by 73%, SE involvement minimized

Ecosystem

API calls

Manual steps reduced by 73%, SE involvement minimized

10K → 50K

Manual steps reduced by 73%, SE involvement minimized

Integrations

Manual steps reduced by 73%, SE involvement minimized

+23 apps

Manual steps reduced by 73%, SE involvement minimized

Growth

Manual steps reduced by 73%, SE involvement minimized

18% QoQ

Manual steps reduced by 73%, SE involvement minimized

Engagement

Session

Manual steps reduced by 73%, SE involvement minimized

3.5m → 5.2m

Manual steps reduced by 73%, SE involvement minimized

WAU

Manual steps reduced by 73%, SE involvement minimized

20% → 65%

Manual steps reduced by 73%, SE involvement minimized

Mobile

Manual steps reduced by 73%, SE involvement minimized

15% → 42%

Manual steps reduced by 73%, SE involvement minimized

// Learnings

Four lessons to share.

Minimum Isn't Minimum Enough

Users wanted even simpler. MLP means ruthless prioritization.

Test at 10x Scale

Beautiful at 1K hexagons, struggled at 100K+. Test early.

Mobile-First Always

42% mobile vs 25% projected. Desktop users don't stay desktop.

Education is Product

Web3 newcomers needed guidance. Interface is one piece.

//

More Projects

(2024) ∙ Monks.Flow

Visual AI Orchestration Platform

SaaS

AI/ML

Workflow Automation

B2B

CONFIDENTIAL
In Progress
AppleAppleApple
Case Study Coming Soon
65% documented
SID.PORTFOLIO.APPLE.2025

(2025) ∙ Apple

Hardware Version Control System

Enterprise

Supply Chain

Hardware

Tools

(2025) ∙ Cast AI

Assignment Rules Suggestions

SaaS

AI/ML

DevOps

B2B Enterprise