A micro-business drowning in its own success.
"The Celebrant" ran SariSari Snaps the way a lot of Filipino home businesses run: entirely through Facebook Messenger. A customer would send a photo, ask the price, get talked through the options, send four more photos, change their mind on the colour, and — somewhere in that thread — the engraving text would get lost. Every order was a manual conversation, and the busier the shop got, the more orders slipped.
The product itself is lovely: a matte magnetic frame that holds four photos, personalized with a name or short message, engraved free. The problem was never demand. It was that the ordering experience didn't match the care of the product — and it didn't scale past the owner's own thumbs.
The interface should be loud. The product should be quiet.
The instinct with a fun, giftable product is to make everything colourful. But the frame sits against someone's actual photos — a wedding, a baby, a barkada trip. If the product colours are saturated, they fight the photo. If the interface is timid, the brand feels generic and the "add to cart" moment never lands.
So I split the colour into two collections that never mix: a baddie interface, and a quiet product.The constraint that answered everything else
This one decision resolved almost every downstream question. The UI could be as expressive as the brand wanted — magenta selection, honey CTAs, a lime promo chip — because none of it ever touches the rendered frame. The five frame colours stayed deliberately matte, tuned to flatter a photo rather than shout over it. Each interface accent is a frame colour at the same hue with the chroma cranked up — so the two systems feel related without ever clashing.
Locked law: frame colours stay matte, permanently. Writing the rule down kept later additions from drifting the two collections back together.
Four rules that made every other decision easy.
Four steps, no dead ends.
The whole Messenger conversation compresses into a locked four-step path. Each step does exactly one job, shows progress, and lets you go back without losing anything. Personalization — the thing that used to get lost in the thread — gets its own dedicated step, with live character limits so nothing ships too long to fit.
(mobile-first)
Small decisions that carry the brand.
The button that stamps. The primary CTA is Honey fill on Ink text — a 9.5:1 contrast ratio, so it's both the loudest thing on screen and fully accessible. Its signature is a hard 6px offset shadow with no blur: Ink at rest, Selection Magenta on hover, and on press the offset collapses to zero so the button physically stamps down like a rubber stamp. A tiny piece of tactility that makes committing to an order feel good.
Naming the field "Your text." "Inscription" and "Engraving" tested as intimidating — they made people feel they needed something profound. "Your text" gave permission to be casual, and casual is exactly the tone that gets orders finished. The label is a UX decision, not a copy afterthought.
Voice, all the way into the errors. Most design systems let the brand voice evaporate at the system messages. Here it's the opposite — the errors are where the warmth matters most, because that's where people feel stupid.
Struck-through line = the default system message. Below it, the one that shipped.
The inbox stopped being the storefront.
The configurator turned a one-person, always-on operation into something that runs while the owner sleeps. Orders now arrive complete and correct — the frame, colour, engraving, and quantity already assembled — so the studio spends its time making, not decoding threads.
Directional outcomes framed from the design goals of a personal project, not audited business metrics.
The lesson I keep from this one is that a single, well-named constraint does more than a hundred pretty screens. "Loud interface, quiet product" wasn't a visual flourish — it was a rule that answered colour, contrast, typography, and even copy questions before they came up. When the constraint is right, the design system almost writes itself, and everyone building on it stays in tune.
If I took it further, I'd add a photo-upload preview inside step three so customers see their actual images in the frame before checkout, and I'd instrument the flow to see exactly where — if anywhere — people still hesitate.
Made to keep.SariSari Snaps · brand line