I redesign how
design gets done.

The mess I inherited

Our design system lived in more than fourteen Figma files, each publishing its own slice — logos in one, colors in another, fonts, effects, grids, forms, each in their own. Changing something in file 01 cascaded into 02, 03, 04, and 14; each had to receive the update, then re-publish to every working file. A criss-cross of dependencies that turned a logo tweak into an afternoon. For a lean team shipping fast across Indonesia and the Philippines, this was an architecture designed to slow us down.

Change one: architecture

I restructured the entire system around Atomic Design, with one direction of flow: the MUI base publishes atoms, molecules, and organisms into a Components file, and Components publishes into working files. Updates trickle down, and nothing criss-crosses. Then the second layer: Common files — DTC Common and Kahoona Common house everything market-agnostic, documented once rather than re-drawn by different designers and slowly drifting apart.

Change two: a shared language

I brought MUI into every revamp and new build, and this was the game-changing leverage. Design and frontend suddenly spoke the same words — a component spec could be one sentence, "This is an MUI Autocomplete field with multi-select and search", and nothing more. My favorite proof: one of our Product Managers used to write component interaction behavior into every user story. After MUI came in, she stopped — simply because she didn't need to anymore.

Change three: never design one extra pixel

Figma files exist for developers, not for decoration — so we drew unique states only. Error states drawn once; a twenty-field form gets one full-frame reference, and every variant after that is just the form. The same rule ended wireflows: our Philippines motor Policyholder form explodes combinatorially — Individual or Corporate, documents now or later, leased, assigned — and no arrangement of arrows survives that. So instead, a matrix: one reference frame, then a table of scenario deltas. Logic goes into user stories, flows into flow diagrams, and Figma is design specification reference.

Change four: content sheets

Designers fill Figma with placeholder copy, stakeholders review it as if it's real, and the churn hits three times: review, QA, UAT. So we stopped pretending. Once a flow locks, the designer prepares a content sheet — a plain spreadsheet the copy owners fill in, with two small columns doing the real work: char count and char limit. Copywriters write long because more words sell; legal writes long because more words cover risk; the designer sets the limit, and the limit is part of the brief.

The payoff I'm proudest of: two landing-page templates with content sheets let Marketing spin out 23+ SEO pages across two countries with zero design involvement. And near the end of my time there, I built a Claude project connected to Figma over MCP that generates these sheets at roughly 95% accuracy — a one-to-two-day designer task became nearly free.

What the numbers mean

Less duplicate design work, no re-publish cascades, no interaction guesswork, files that explain themselves, and copy churn designed out of review, QA, and UAT — each change removing a different kind of friction between a design decision and shipped code.

The setup

GCash's GInsure marketplace had a problem with travel insurance: too much of it. They didn't want another one on the shelf, so Oona and GCash built something that didn't exist yet — Infinity Travel with Smart Flight Delay, travel insurance and flight delay coverage folded into one product. Under the hood the two are completely different animals: travel insurance wants destinations, dates, and people; flight delay wants a flight number many buyers don't even have yet. Underwriters, Product, and Design whiteboarded our way through it together.

The mystery

Once live, the funnel bled — customers dropping off before they even reached traveller details. The PM's hypothesis was a reasonable one: the flight-delay step, optional but heavily promoted, was confusing people. A design problem, in other words, and design problems get fixed in the UX.

The investigation

I didn't start in Figma. I started in PostHog — session recordings first, then funnel data, then a December sales spreadsheet, cross-referenced by hand in a notebook. Two numbers refused to sit still: journeys that started as a family initiated payment at 4.89%, while individuals initiated at 14% — nearly three times the rate. Why would solo travellers be that much better at buying insurance?

The reveal

It turned out they weren't better at all. When I cross-referenced actual applications, the "better-converting individuals" were the same families — dropped out, then re-entered as separate individual purchases with the same last name, the same destination, and the same dates. One family drop-off was becoming two, three, sometimes four individual conversions. The UX wasn't confusing anyone — the pricing was. Group journeys carried additional loading beyond two people, so families did the math, and split the purchase.

The outcome

The analysis went up to the Chief Underwriting Officer, and the product construct changed: loading removed for couples and groups, and the journey redesigned to ask, simply — Solo, Couple, Family, or Group?

Two countries, two problems

Indonesia and the Philippines ran separate frontend codebases on different frameworks — similar design language on paper, wildly different products in hand. Indonesia's agents were overwhelmingly on mobile, but their dashboard was an old single-column layout that wasn't great on mobile and looked worse on desktop. The Philippines skewed desktop, so its team had decided single-column was good enough. And past the dashboard, every page made up its own rules: sidebars here, none there, different responsiveness, different navigation logic.

The overhaul

The redesign gave both countries one structure everywhere. A collapsible sidebar drives the L1 pages — Dashboard, Policies, Renewals, Network — and anything deeper opens as an L2 focus state on top. You always know where you are, on any screen size. The dashboard became modular — a bento box, essentially: which modules and numbers an agent sees depends on their market and profile, while the design language never changes. And underneath it all, the two codebases became one MUI-powered responsive build — design once, build once, adapt across.

How I know it worked

Three signals, in ascending order of how much they still make me smile. First, Product Managers, Agency Leaders, and developers all gave the redesign strongly positive feedback — rare unanimity for a replatform. Second, the channel data: month after month, the Kahoona slice of policies issued grew while Agency and Broker held comparatively steady. And the best one: the frontend foundation was so clear that developers started building a new module — the Admin Panel — with the same DNA, before design had even started on it.