MoonOneMoonOne

Product design case

0

MoonOne · Product design · Web SaaS

Fifty thousand machines, one screen.

MoonOne is a cloud platform for automating, monitoring and managing mining infrastructure: live fleet telemetry, firmware and pool control, auto-generated repair tasks, scheduled power management and trigger-based automation, on sites running tens of thousands of ASICs. I built the product from zero: its modules, its states, and the design system that holds them together.

50,000+devices at once 5 sdata refresh 8product modules

MoonOne is a product I built from zero. The facts and every screen on this page come from the product's own source file, its documentation and the live portal. The research instruments listed below are the ones the project actually ran.

The product

Eight modules, one console.

A cloud platform for monitoring ASIC miners and running mining operations: data centres, hosting providers and mining hotels, from fifty machines to fifty thousand.

UPTIME99.7%

Fleet uptime held by automatic recovery

OUTPUT4.5×

Productivity against manual operation

REPAIR

Faster repair from kernel-log analysis

REACH30+

Mining data centres already connected

01

Real-time monitoring

Hashrate, consumption, temperature and anomalies over the whole fleet as they happen.

02

Bulk actions

Firmware, reset, reboot and pools applied across tens of thousands of devices at once.

03

Power scheduling

Schedules per device model, so peak tariff hours cost a plan instead of a night shift.

04

Task manager

Tasks opened automatically with the fault, the device and its location already filled in.

05

Kernel-log analysis

System logs read automatically, so a task names the cause rather than the symptom.

06

Automation

Trigger-based scenarios over fleet events, recovery that runs with nobody on shift.

07

Staff, roles and audit

Who may do what, and a log of what was actually done, across shifts and client fleets.

08

Regulatory reporting

The quarterly filing generated from data the platform already holds, not collected by hand.

Research

Five instruments, twelve operators.

Desk audit through to usability testing, on three kinds of site: a data centre with night shifts, a hosting provider invoicing client fleets, and an owner who walks the aisle himself.

006platforms

Desk research and competitive audit

0112operators

Semi-structured interviews

024shifts

On-site shadowing

0390days

Alert and kernel-log analysis

0416sessions

Usability tests, two prototype rounds

Screens

Five screens the fleet is run from.

One screen at a time, each with the modal that carries its decision: exported from the product source file, not redrawn for the case.

01 / 05Page

Fleet dashboard

Hashrate against the 24-hour average, a live activity feed, and the whole fleet as one table. Three and a half thousand machines narrowed by state down to a single unit.

  • Hashrate 1D / 3D / 1M / 1Y
  • Real-time · Avg 24h · Max 24h
  • Imported / Unimported
  • Active · Lowhash · Overheated · Hanged · Offline
  • Sparkline per row
  • Pool, worker, uptime, firmware
  • Recent activity
02 / 05Page

Task manager

Repair in flight across six columns. Every card carries its index, due date, priority and assignee, so a shift change never loses the thread.

  • To do · In progress · On hold
  • Review · Blocked · Done
  • Index, due date, priority
  • Assignee avatar
  • Drag between columns
  • Empty state per column
  • Board / table view
03 / 05Page + modal

Workflow builder

Statuses, transitions, and the fields each transition demands. The operator reshapes the repair process without waiting for a release.

  • Canvas of statuses and transitions
  • Screen attached per transition
  • Field list: required / unique
  • Inline new-field form
  • Staff, roles, custom fields
  • Watchers links and settings
04 / 05Page + popover

Clients

One row per client fleet: machines by state, tasks by kind, bills, and the manager who answers for it. The task bar opens its own breakdown on hover.

  • Miners bar by state
  • Tasks bar with breakdown
  • Basic · Maintenance · Farm
  • Service · Logistic
  • Bills per client
  • Manager and role
  • Contact and messenger
05 / 05Page

Facility map

Rooms, racks and shelves drawn as they physically stand. A fault gets an address (room one, rack seven, shelf four) instead of a row number.

  • Room → rack → shelf
  • Cell colour is device state
  • Occupancy 23 / 30 per rack
  • Hashrate per rack
  • Straight through to the unit
01 / 05

Design system

One Foundations kit under eight modules.

Colour, type, spacing, rhythm, radii, icons and every breakpoint live in a single Foundations library. Each surface the console draws is assembled from it, so a new module arrives looking like the product, and the numbers below are the whole of it.

Colour

#96C79E#E7DB9B#F0B979#E98C86#C9D2DF#3F7BD9

Six roles, and the five fleet states are the only thing allowed to carry hue. A row marker, a status chip and a shelf cell all say Lowhash in the same #E7DB9B.

Typefaces

HashrateFleet overview542.77 Ph/s · 99.7%

One family, Open Sans, in two weights. Headings are 600, body 400, labels 600 uppercase at .12em, and every number is set in the same face with tabular figures, so the hashrate column reads down instead of dancing.

Spacing

A four-point base and seven stops, space-1 through space-7. Nothing sits on a number that is not on the ladder, so a table dense enough for three thousand rows still breathes on a settings page.

Radius

Three steps only (control, card, panel), so nesting never invents a fourth.

Vertical rhythm

One row is 56, compact is 44, the header 44. Everything vertical is a multiple of four, so a table, a board column and a settings form line up without anyone nudging them.

Adaptive

1920144012801024768360

Six widths, and each one is a decision, not a squeeze. The fleet table sheds columns by priority, the sidebar becomes a rail and then a drawer, and the facility map drops to one room per row before it ever asks for a horizontal scroll.

Fleet table Sparkline cell Status chip Bulk toolbar Filter bar Task card Board column Workflow node Rack grid cell Breakdown popover Form field Select Side navigation Empty state
Research
Desk audit, interviews, shadowing, log analysis, two usability rounds
Architecture
Eight modules, their states, and the navigation that holds them
Design system
Tokens, components and patterns built alongside the first screens
Interface
Every screen of the console, desktop first, from zero

UI kit

The system, not a picture of it.

The system the console is built on: colour, type, the spacing step, device states, controls. This is not a mock-up of a system: everything below is built from the same stylesheet as this page, so the sizes here are the library's sizes.

Гарнітури3 faces

Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd 0123

Space Grotesk

Роль
Заголовки, лічильники, числа в UI
Ваги
400 · 500 · 600
Набір
Кирилиця + латиниця + tabular nums
Трекінг
−0.045em на h1, −0.035em на h2

A grotesque with single-storey shapes and true tabular figures: a console screen is mostly numbers, and they have to sit in a column without dancing.

Аа Бб Вв Гг Ґґ ДдAa Bb Cc Dd 0123

Plus Jakarta Sans

Роль
Текст, ліди, мітки, кнопки
Ваги
400 · 500 · 600
Набір
Кирилиця + латиниця
Трекінг
0, і +0.18em на капіталізованих мітках

Wide apertures and a tall x-height, so a 12px label in a dense table is still readable. It is the interface voice; the display face does the announcing.

0123456789Ph/s · Th/s · 24h

JetBrains Mono

Роль
Айді, серійники, пули, значення
Ваги
400 · 500
Набір
Латиниця + цифри
Навіщо
Однакова ширина знака, колонка не їде

A serial number and a pool address are read character by character, and a proportional face turns a column of them into a ragged edge.

Типографікаlive specimens

H1clamp(42px, 7.6vw, 104px)lh 1.0 · −0.045em · 500

Пʼятдесят тисяч машин

H2clamp(30px, 4.4vw, 58px)lh 1.04 · −0.035em · 500

Один кіт Foundations під вісьмома модулями

Ledeclamp(16px, 1.5vw, 19px)lh 1.78 · Plus Jakarta 400

Хмарна платформа моніторингу й керування

Body17pxlh 1.75 · міра 68 знаків

Кожна поверхня консолі збирається з однієї бібліотеки

Mono12.5pxJetBrains Mono 400 · tabular

KRA1-982-…-0345-R2-1 · 542.77 Ph/s

Label11px+0.18em · uppercase · 600

СТОРІНКА · МОДАЛКА · ПОПОВЕР

Простір8pt grid

8pt step. Nothing lands between values: s1–s4 do spacing inside components, s7–s10 do the rhythm between sections.

s1
s2
s3
s4
s5
s6
s7
s8
s9
s10

Адаптація375 → 1920

The sizes are fluid, not stepped: one formula covers 375 to 1920, and the table shows what it gives at each width.
формула37576814401920зараз
H17.6vw
H24.4vw
Lede1.5vw
Bodyфіксовано
Поле сторінки4vw
Секція8vw

Window width right now:

There are deliberately no phone frames here: the product is behind a login at portal.moonone.io, so a mobile view would be a drawing of a screen I have not opened. Yulia's and Darya's sites are public, so theirs are real renders.

Колірmeasured

bg#050608основа
bg2#0A0C11поверхня
ink#FFFFFF21:1
body#C9D2E714.6:1
mute#8892A66.0:1
acc#7CADEB9.7:1

Стани пристрою5 tokens

Device state is the product, so the five states have tokens of their own. Colour never carries the meaning alone: in the table each one is always labelled.

active#97C6A711.5:1
lowhash#F9E8AB17.0:1
overheated#FFC56F12.9:1
hanged#F78F888.6:1
offline#8892A66.0:1

Контролиreal states

Кнопки

Живий продуктdefault
Живий продуктhover
Документаціяghost
Документаціяfocus
Живий продуктdisabled

Поля

Пул
Воркер
СерійникНе знайдено пристрою з таким SN

Глибина і фокус

спокій
−2px + тінь
2px, офсет 3

Every value here is taken from the Foundations library and from this page's own code. The contrast ratios were measured rather than eyeballed.