Network Nation
Product & Design Advisor · November 2025 to March 2026
Designing two products, one white-label design system, and a research-backed roadmap, embedded with a four-person founding team.
Network Nation is a utility management platform that lets network managers accurately bill tenants based on real consumption data across buildings, estates, and independent networks. When I joined in November 2025 as a contract consultant, the company was two founders, a CTO, and two developers. They had a product vision and a technical stack, but no design foundation, and an investor deadline in early December to demonstrate progress on the tenant-facing app. Two simultaneous products needed to exist: a SaaS dashboard for network managers to operate the business, and a white-label consumer app for tenants to manage their balances and usage. The risk was obvious. Build the wrong foundations and every sprint that followed would pay for it.
I was brought in by one of the founders to provide senior design support that could think strategically and also be hands-on across the full delivery of both products. My role covered three things running in parallel: defining a multi-phase product delivery roadmap, building the Network Nation Design System (NNDS) as the foundation that made both products possible, and running the end-to-end product design and research for the SaaS dashboard and the tenant app.
My first move was a Priority 0/1/2 framework to cut through the feature list. Priority 0 was the design system. Without a shared foundation, every design decision would generate technical debt or visual inconsistency across both products. Priority 1 was the phased build sequence: what does a network manager actually need on day one versus day ninety? Priority 2 was everything else.
That sequencing gave me the brief for NNDS. I built it in code first, not in Figma. After researching the stacks available, I chose Radix UI, Next.js, and Tailwind, a combination that gave me accessibility-ready primitives, a production-grade frontend framework, and a token-friendly styling layer. I proposed it to the developers. They agreed, and I vibe-coded the system over three days before spending two more days building the Figma library from the code. NNDS went from nothing to production-ready in one week. The tokens, components, and interactive states were real from day one, because they were literally the code running in the developers' local environments. Accessibility standards came largely for free from the Radix primitives, which mattered given the user base includes vulnerable and low-income tenants.
3 days
From nothing to vibe-coded NNDS
Two more days for the Figma library. One week total.
On the SaaS dashboard, a focused session with the founders revealed three distinct capability layers: see the data (the information layer), act on the data (operational workflows like moving tenants in and out, changing meters, adjusting tariffs), and model the data financially with AI (reporting, forecasting, and the real feature differentiator). I pushed back on the instinct to build the modelling layer first. Research backed me up. The phased roadmap, See it, Act on it, Model it, became the strategic direction the founders took to investors, and the sequence they committed to.
Research that shaped the build
I ran exploratory and evaluative research across both user groups to ground early product decisions in evidence. For the SaaS dashboard, interviews with network managers and landlords surfaced the manual workflows that the product would need to replace: moving tenants in and out, reconciling meter health, managing accounts for vulnerable tenants, and handling the small but critical cash payment flow. I ran card sorts with four network managers to define where six categories of actions (Property Units, Customers, Meters, Accounts, Networks, Tariffs) should sit in the information architecture. The results shaped Phase 2 (Act on it) of the roadmap, and stopped us from bolting actions onto the data layer in ways that would have confused operators.
For the tenant app, I ran semi-structured interviews with three end-users after an early version was live. The goal was to understand whether the app was earning trust in a category where trust is the product. It was. One user told me 'I've got control of my money.' Another said 'I'm feeling like I can trust you guys.' A third said 'It's one less worry.' The more difficult findings, confusion around kWh terminology, a balance-update delay that was logging users out at payment, and the desire for an in-app support chat, went straight into the next iteration.
Trust
"I've got control of my money"
End-user research, 3 semi-structured interviews
One finding carried more weight than the others. Interviews with network managers revealed a consistent offline workflow: some vulnerable tenants don't have bank accounts or cards, and pay rent in cash to staff on welfare visits. The manual reconciliation afterwards is error-prone and creates financial risk for both the tenants and the network manager. I designed a dedicated cash payment logging flow into Phase 2 of the dashboard. It's a small feature in the context of the whole business, but it solves a real problem that wouldn't have been surfaced without primary research.
The methodology
NNDS was my first serious attempt at vibe-coding a design system. The tools at the time were ChatGPT and Codex, which were good enough to build the foundation quickly. The workflow that emerged: prompt the model to scaffold a component using the chosen stack, review the output against real technical constraints, iterate in the developers' local environment using an MCP server to plug changes straight back into the codebase. When the library was production-ready, I exported the token architecture as JSON and reconstructed the components in Figma so the system worked both ways, code to design, design to code.
The speed was the headline. Three days to a functional design system is orders of magnitude faster than traditional Figma-first workflows, and the components came with accessibility and real technical behaviours baked in. But the method has a failure mode I've had to learn. Vibe-coding rewards clear design intent and punishes ambiguity. If you prompt without a clear definition of what you want, vibe-coding quickly becomes vibe-debugging your own bad ideas. The quality of the output is a direct function of the quality of the direction going in. My workflow has become more methodical since. I now start with concept and vision defined clearly in Figma before any code generation. NN was the project where I learned the method by doing it.
Explore the prototypes
Two interactive prototypes built during the engagement. The Simple User App for tenants to manage balances and usage, and the Network Manager App for operators to manage utility networks.
What I learned
I used to see the product triangle (Product Owner, Designer, Developer) as three separate roles, each with distinct responsibilities and clean handoffs between them. Working on Network Nation with AI-augmented tooling changed that for me. I'm now convinced that an empowered designer who thinks strategically about outcomes rather than outputs can operate across all three roles, not by doing everyone's job but by collapsing the gap between design intent and production reality. That shift has shaped how I've approached my work since, on Moon, on this portfolio site, and on what I'd pitch for the next role. I think it's the shape of what a senior product designer actually does now.
Some project details are confidential. Visuals and specific product screens are available on request under NDA.
