Hotspotty

Client
Hotspotty
Role
Principal Product Designer
Category
Web3 · Product & Design System
Year
2021–2022

Outcome

100k+active users, up from 18k
~10partner companies selling radios on commission
~60%faster to hand screens to developers, using Spottywind
1 → 4from solo designer to a team of 4
A laptop showing the contact payments page, under the title "Everything a Helium hotspot owner needs in one place".

Helium is a wireless network run by its own community. People buy a small radio, put the antenna on their roof and earn crypto (HNT) for the coverage they provide. Hotspotty gave those owners one place to see how their hotspots were doing, plan where to put new ones and pay the people hosting them. It was a startup, a messy one, and I designed it from the inside.

01

The Problem

Owners were juggling blockchain explorers, spreadsheets and chat groups just to answer basic questions. Is this location worth it? How much did I earn? Who do I owe? On top of that, the founders were all developers and wanted the product to feel like the tools they used every day: dense, technical, a bit like GitHub.

02

My Role

I joined as the only designer and became the design lead. I hired a UX designer, a UX researcher and a graphic designer, led all UX work, ran usability tests with our researcher, managed the Discord community and tracked how people used the platform.

03

The Solution

Spottywind, a design system built on Tailwind UI so it spoke the same language as the developers' code. And a web app that turns hotspot data into decisions: earnings, location planning, line-of-sight and profitability simulations, commissions and payouts.

From one to a team

Building a design team while shipping

I started alone and hired a UX designer, a UX researcher and a graphic designer one at a time as the product grew. We learned from users in three ways: the Discord community, which was the main one, usability tests and tracking on the platform.

Timeline from solo designer to a team of four: solo designer, then a UX designer, a UX researcher and a graphic designer; below, three channels to users: Discord community, usability tests and page tracking.

Spottywind

A design system the engineers already understood

The founders wanted a dense, technical interface, so I built the design system on Tailwind UI, the same building blocks they were already using in code. It has 11 families of components, from page sections to pop-ups. Designers and developers ended up calling things by the same names.

Map of the Spottywind design system, built on Tailwind UI: eleven component families, page sections, elements, feedback, application shells, headings, data display, lists, forms, navigation, overlays and layout, each with its components listed.

Color palette

  • HNT Purple #9546EA
  • Gray 800 #1F2937
  • Gray 900 #111827
  • Ink #111111
  • White #FFFFFF

Typography

Type specimen of Inter: the word Inter in Extra Bold, the alphabet, numerals and the weights Normal, Medium, Semibold and Bold.

Inter, Tailwind UI's font, with 54 text styles starting at 12px.

The product

Everything a hotspot owner needs in one place

Dashboards for earnings and hotspot health. Location planning with line-of-sight and profitability simulations. And the payments side of managing many hotspots with hosts and partners.

Mosaic of Hotspotty web app screens in perspective on a dark background: earnings charts, hotspot cards, a calendar, rewards widgets and purple action panels.

Payouts

Paying hosts and partners without a spreadsheet

Laptop showing the Hotspotty contact payments page for a contact, with the total paid and a table of payments by date, amount, currency and context.
Payments by contactEvery payment to a host or partner in one table, with currency, context and notes.
Hotspotty commission report screens in perspective, listing contacts with their commission details.
Commission reportsCommissions are calculated and reported per contact, so even large portfolios stay fair and easy to check.

HNTScan

A search engine for the Helium blockchain

HNTScan, powered by Hotspotty, lets anyone look up anything on the Helium blockchain. It got its own identity: a purple sun crossed by scan lines.

HNTScan explorer page on a dark purple background with a search field over a horizon, framed by floating purple spheres.

The film

Hotspotty, live

Hotspotty’s official explainer video.
“Thiago Leite is an incredible senior UX designer and it has been a pleasure to work with him. He consistently delivers top-notch designs and never fails to impress with his ability to improve the user experience.”
Daniel Spillere · Co-Founder / CTO, Hotspotty

Up next

Kind words

Thiago approaches every project with a meticulous and user-focused mindset, and his keen eye for UX problem-solving results in thoughtful and beautiful solutions. Thiago is not only a skilled designer but also a dedicated and hard-working team member who brings energy and enthusiasm to every project.
Photo of Adelina Green Adelina GreenProduct Design Manager, GoDaddy