2026 · Lead Designer & Developer
Pawa
Live prototype. Try itA prepaid power-sharing app for Nigerian apartment buildings, for landlords generating their own electricity and the tenants who buy it from them.
The brief
Design an app for a power generator.
That was the entire brief: eight words from a leading African fintech.
Reading the brief
For me, when I read “a power generator,” my mind didn’t drift to the mechanical generators commonly used in Nigeria. It drifted toward a solar power generator.
A power generator could be a mechanical generator, a solar generator, which is becoming common in Nigeria, or a hydroelectric generator.
I went for solar because it is a growing industry in Nigeria, and where nobody has built the management layer yet. Diesel has decades of informal practice around it. Solar doesn’t.
Finding the real problem
I spoke to a friend, a solar engineer who built his own system at home and started supplying excess power to his tenants. I asked him how he was managing it, and where he was facing the highest friction.
His answers started with his tenants. Power would cut off at the worst possible moment: in the night, while cooking or working, during a work call, with no warning. They’d have to call him to reconnect, sometimes after already making payment. Many also felt their balance was draining faster than expected with no way to verify it. On his end, managing multiple apartments, sometimes remotely while monitoring the solar system, had become exhausting.
The infrastructure existed. The management layer didn’t.
This wasn’t a generator management problem. It was a trust and anxiety problem: tenants living with the constant low-level stress of not knowing where they stood with something as basic as power in their own home.
From sketch to shipped
Hand sketches
Claude Code + MCP
Paper designs
React build
Vercel deploy
The product was designed and built end to end with AI, from the first sketch to a live interactive prototype. Designs were created in Paper via MCP, converting hand-drawn sketches into structured UI, then built in React and deployed.
The decisions that shaped it
Prepaid over postpaid
Charging tenants at the end of the month means the landlord chases debt from people he lives next to. Prepaid removes that tension entirely. The money moves before the power does. This is also how Nigerians already think about electricity. NEPA meters run on tokens. Tenants aren’t learning something new.
Auto-disconnect and auto-reconnect
When balance hits zero, power cuts automatically. When a tenant tops up, it reconnects automatically. No call, no WhatsApp, no waiting. The disconnected screen says one thing: “Top up to reconnect automatically. No action needed from your landlord.” A low-balance alert fires at 20%, so reaching zero is a choice, not a surprise.
A 200 kWh max balance
The cap exists for the same reason prepaid electricity meters always have one: a solar system has finite capacity, and without a ceiling, one tenant can hold more than the system can serve. It also keeps the gauge meaningful. Without a fixed maximum, the arc has no reference point.
Hours alongside kilowatt-hours
The gauge shows kWh as the primary reading, the technical truth. But beneath it sits “Approx. 2.4 hours remaining.” The kWh is accurate but abstract. Hours are what most tenants actually understand. Both are always visible: one gives the fact, the other gives the meaning. The arc shifts from indigo to amber to red as balance drops. Urgency is in the colour, not in a label.
The circuit breakdown
Tenants reported not knowing why their balance dropped faster than expected. The “What’s drawing power” panel shows consumption by circuit in real time: Air Conditioning, Lighting, Kitchen, Other, as a segmented bar with live kW values. It answers the question before it becomes a complaint.
A three-step top-up flow
Amount → Payment → Confirmation. A tenant running low at 11pm is not reading instructions. The amount screen converts as they type: ₦1,500 is 17.6 kWh. Payment is via stored card through Paystack Vault, with bank transfer as an alternative. The confirmation screen says “You’re back on,” not “Payment successful.”
A simple style guide
I wrote a short guide, not a design system. Enough rules that every screen had to pick a side. Terracotta is for power. Primary buttons are black pills.
Nunito carries the interface. It is round enough to feel human at 11pm, and heavy enough to hold a kWh figure. The number is bold. Everything else is regular.
Nunito · Regular 400 · Bold 700
Nunito
27%
2.4 kWh remaining
Regular
You’re back on
UI, labels, body
Bold
36.4 kWh
Balance, percent, hours
Ink
#1C1816
Text and primary actions
Terracotta
#D37153
Power, logo, live
Alert red
#B50027
Disconnected only
Stone
#F6F3F1
Surfaces
Paper
#FFFFFF
Background
Two iterations
01 · First build
The first React build was functional but generic. Balance displayed as flat text, no visual weight, no urgency. The layout was clean but the AI tooling showed: everything was competent, nothing was distinctive. Individual craft wasn’t visible in the output.
Feedback
The prototype leaned on AI-generated defaults, making it harder to see individual visual craft and interaction design judgment in the work.
02 · The rebuild
So I went back. The disconnected state became a concept. No power means the app feels dead. The gauge shows X marks (dead eyes), the button turns black, the stat cards grey out. The goal was for the app to communicate absence through its entire visual state.
The top-up flow moved to a bottom sheet. The confirmation screen builds sequentially: payment confirmed → kWh added → power reconnected.
Every button has a 95% scale micro-interaction on press.
1/5
The gauge
The home screen is the gauge. When there is power, the arc fills from empty to the current balance, with an ease-out so it settles like a physical meter. 59% is not a label. It is a remaining amount you can feel.
When there is no power, the same object does the opposite. The arc goes grey. Two X marks sit where the percentage was. The button turns black. The stat cards lose colour. The goal is for the page to feel dead the moment someone opens it, the same as the apartment.
A zero can still look like a reading. An X cannot. It says the meter is not running. While there is power, the arc carries the urgency: red at 20% or below, amber from 21 to 40, green above that.
Empty. X marks replace the reading.
Low. Red at 20% or below.
Mid. Amber from 21 to 40%.
Healthy. Green above 40%.
Directional top-up
Amount → Payment → Confirmation was already the right sequence. What was missing was direction. The flow now lives in a bottom sheet, so going forward and going back feel different. A tenant topping up at 11pm should feel like they are walking a short path, not swapping static slides.
Nothing selected
Amount
Payment
Confirmation
Confirmation, in order
The confirmation screen does not appear all at once. Checkmark first, heading second, balance card last. “You’re back on” lands before the kWh figure, because the feeling comes before the receipt.
Interactive prototype
The tenant app is live in the frame. Switch to the landlord dashboard for generation, battery, how load is spread across units, and what needs attention. The view he needed when he was fielding calls at night.
On a phone, both open full screen.
What I took from this
AI tools lower the barrier to building but raise the bar on authorship.
When a tool can generate a working interface in minutes, the question becomes: where is your judgment visible in the output? If the answer is only in the case study write-up and not in the product itself, that’s a problem. The craft has to show through the thing, not around it.
Interaction is where design judgment becomes legible.
A gauge that loads at its value and one that fills from zero hold the same data and say different things. Static screens can hide the absence of a decision. Motion cannot.
Copy carries more of the trust work than the interface does.
“You’re back on” does more for a tenant at 11pm than any layout choice on those screens.
What comes next
Pawa assumes a smart relay per apartment receiving disconnect and reconnect signals from the server, with a current transformer per circuit feeding live consumption data. The solar inverter exposes metrics via Modbus or API. Building or certifying that relay module alongside existing solar installers in Nigeria is the path from prototype to infrastructure.
Before that, three things need live validation: whether tenants actually hold back from calling after top-up; whether the gauge and banner prompt action early enough; and whether the “Needs attention” section stays useful once real alerts come in. Those answers shape what gets built next.
The prototype was shared with the landlord and two tenants. Both tenants grasped the app’s purpose without guidance, and the landlord confirmed the product reflected how he currently manages the system.