The billing app I designed and built to run my design studio.
- Role
- Digital systems design · Brand, design system, product UI
- Tools
-
Designed in
- Figma
- Adobe Illustrator
Built with- Next.js
- React
- TypeScript
- Tailwind CSS
- Framer Motion
Why Amango
Mangoes paid my school fees, and fed me when the fees ran late. Now Amango keeps my studio paid.
Amango means mango in Twi. When I was young, my mother and I sold mangoes and saved what we made for my school fees. In senior high school, when the fees ran late, I was sent out of class. I'd wait under a mango tree, its fruit my lunch and its shade my shelter, until classes ended and I could return to the dormitory.
So when I built the tool that bills my clients, the name was already waiting. Amango carries those memories and the same ambition: to be paid for the work I went to school to learn. The look ripens like the fruit, from leaf green to gold to mango orange.
The Problem
My studio's money lived in three places: spreadsheets, notes and WhatsApp. Cedis and dollars shared the same columns, and part payments, the way most clients here pay, were tracked from memory.
What Amango Had To Be
-
01
Quiet By Default
A minimal interface that shows what's collected and what's owed at a glance, then gets out of the way.
-
02
Honest With Money
Cedis and dollars side by side, never added together. Every instalment is tracked from deposit to paid in full.
-
03
Private, And Worth Sending
One person behind the door. Branded invoices, receipts and reminders a client is happy to open.
The Brand
A mango mark, drawn from the fruit. Four colours, Leaf, Mango, Gold and Cream, and one typeface, Plus Jakarta Sans.
The Process
-
01
Discovery & Design
How I actually get paid, mapped first. Then Figma: the mango mark, four colours and one typeface, a design system of glass cards, mesh tiles and squircle corners, and wireframes taken to high-fidelity screens for desktop and phone.
-
02
AI-Directed Development
From the final wireframes, I directed the development with AI to build Amango in Next.js, screen by screen against the Figma files.
-
03
Iterate & Polish
Using it on my own studio's work, then refining: motion, contrast, the small details that make an invoice worth sending.
-
04
Security Testing & Deployment
Before the first real invoice went out, a full security review: a hidden entrance, a sign-in code by email, data that answers only to my account, and a few locks that stay private on purpose. Then it went live.
The Real Devices
The Approach
One calm screen. Soft glass cards, blurred mesh tiles in mango tones, squircle corners, and figures that count in as the cards arrive. Cedis and dollars sit side by side and are never mixed. Loyal clients earn mango rewards (Ripe, Golden, Mango Tree). It installs as its own app on desktop and phone.
Paid In Parts
Across Ghana and much of Africa, clients usually pay for creative work in parts: a deposit to start, the rest as the work moves, the balance at handover. Any invoice in Amango becomes a plan in one tap (50/50 or 40/30/30, or my own split). Every part has its own due date and is tracked as paid, pending or overdue from the payments I log.
Reminders That Send Themselves
Every morning Amango emails a friendly note a week before a part is due and a firmer one if it's late, in the tone I've set for each client (personal or formal). It never sends the same reminder twice, and reminders can be switched off per client. Branded receipts are ready to send when the money lands.
Desktop
Phone
After Dark
In Motion
The Outcome
Amango is the tool I run my studio on. Add a client, invoice in cedis or dollars, send a branded PDF, log payments as they land, and see what's collected and owed, on laptop or phone.
Everything shown uses invented demo data.