By the Lovable Build Desk Filed from the workshop · April 2026

I. The Drive Home

It's a foggy Tuesday morning in Daly City, and Roy — known to nearly everyone in the South Bay simply as Kuya Roy — is in the passenger seat of a sedan that doesn't belong to him. The student behind the wheel, a high-school senior, has just nudged the brake a half-second too late at a four-way stop. Roy doesn't flinch. He never does. He talks her through it the way an old chess coach talks through a missed opening: calmly, specifically, with the patience of someone who has done this five hundred times before.

That patience is the entire product. It's also, until recently, the only part of the business that worked the way it should.

Because while Roy was building a near-perfect record on the road — a 98% DMV pass rate, a quietly mythic reputation across Daly City, San Francisco, San Mateo, El Cerrito, and Redwood City — the digital front door of Kuya Roy's Driving School was telling a very different story. The site looked dated. The "Inquire Now" form quietly dropped leads into the void. The blog hadn't been touched in months. And the admin panel, where Roy and his team were supposed to manage everything, felt like a filing cabinet built by committee.

This is the story of what we changed, why, and what it took.

II. The Brief

The mandate was disarmingly simple, and quietly enormous:

Keep everything that works. Rebuild everything that doesn't.

That meant preserving the existing photography, the testimonials, the pricing structure, the location list, and — most importantly — Roy's voice. What had to change was the wrapper: the visual design, the editorial tone, the conversion architecture, and the entire content management experience behind the curtain.

The reference points the client gave were instructive. Linear.app for the chrome. Monocle for the typographic confidence. Ghost CMS for the editor. The North Star: a website that looked like a premium SaaS product had a baby with a design magazine, then sent that baby to driving school.

III. The Front of House

A new visual language

The old site leaned on conventional cues — stock-feeling gradients, friendly-but-anonymous sans-serifs, the standard "hero photo plus three feature boxes" rhythm of a thousand local-business templates. The redesign threw all of that out and replaced it with a deliberately small, deliberately confident system:

• A warm off-white base (#F8F7F4) — the color of good newsprint.
• A deep charcoal (#0F0F0F) for headings and dark sections — structural, not decorative.
• A single accent: burnt orange (#E8500A) — used sparingly, on CTAs and hover states, as the only voice raising its hand in a quiet room.

Typography became the load-bearing wall. Inter, set heavy and large, does most of the visual work. Headlines run two or three lines deep, with intentional line breaks that read more like a poem than a tagline:

Drive with Confidence. Learn with the Bay Area's Most Trusted Instructor.

Editorial rhythm, SaaS bones

The page was rebuilt section by section to feel like a magazine spread that happened to convert:

• A slim, always-solid navbar that never goes transparent — grounded, confident, with animated underlines sliding in from the left on hover.
• A full-bleed hero with GSAP-staggered word reveals and a dark marquee strip below, scrolling the service-area cities like a stock ticker.
• A full-width charcoal stats band — 500+ Students · 98% Pass Rate · 5 Bay Area Locations · DMV Test Ready — with numbers that count up as they enter the viewport.
• A magazine-profile spread for Kuya Roy himself: portrait left, pull-quote and bio right, with a small badge anchoring his credentials.
• A six-card "Kuya Roy Difference" grid in the SaaS idiom — line icons, taut copy, a whisper of lift on hover.
• A typographic locations list in place of the old map — just bold names separated by hairline rules, with a quiet footnote about Redwood City pricing.
• A testimonials section anchored by a single oversized pull-quote, then a card grid set on a warm gray (#F0EDE8) to gently distinguish it from the rest of the page.
• A dark final CTA, two buttons, no noise.

Throughout: scroll-triggered fade-ups via Intersection Observer, magnetic hover on the CTAs, a custom dot-and-ring cursor, and a smooth scroll feel that makes the whole document behave like a single, well-tuned instrument.

IV. The Phone That Wasn't Ringing

Midway through the rebuild, a problem surfaced that had nothing to do with aesthetics. Roy mentioned, almost in passing, that the contact form hadn't generated an email in some time. The notify-new-contact edge function — the piece of plumbing responsible for telling the school that a new student wanted to book — showed zero invocations.

A quick audit revealed the cause was upstream of the function entirely: a missing gsap dependency was silently breaking the production build. The site that prospective students were seeing wasn't the site anyone thought they were seeing. The form wasn't broken. The form simply wasn't there.

The fix was a one-line addition to package.json. The lesson was larger: a beautiful frontend that doesn't ship is just a screenshot. From that point forward, every meaningful change shipped with a verification step attached.

V. The Workshop

A Ghost-class editor for a working instructor

The admin panel was the half of the project nobody outside the business would ever see, and arguably the half that would matter most over the next two years. Roy doesn't want to think about CMS schemas. He wants to write a post about parallel parking on a Sunday afternoon and have it look right.

So /admin/blog was rebuilt around a single principle: the editor should disappear. The model was Ghost CMS — distraction-free, opinionated, generous with whitespace.

The new editor, built on TipTap, gives Roy:

• A borderless title field that behaves like a headline, not a form input.
• A drag-and-drop feature image zone that takes over as a wide banner on upload.
• Slash commands (/heading, /quote, /image, /divider, /callout, /code, /embed) that turn the keyboard into the only UI he needs.
• A floating bubble menu on text selection — bold, italic, link, highlight — that appears where his eye already is.
• A collapsible right-side settings drawer with everything that used to live on a separate page: URL handle, publish date, status, featured toggle, author.

SEO without the spreadsheet

The settings drawer also absorbed an entire job-to-be-done that previously lived in Roy's head: search optimization. Each post now has dedicated fields for meta title and description (with character counters that turn red at the limit), an OG image with a fallback to the feature image, a canonical URL override, and a no-index toggle for posts he doesn't want crawled.

Above all, two live preview tabs — a simulated Google search result and a simulated social share card — update as he types, so he can see exactly how the post will look in the wild before it ever leaves his desk.

VI. Behind the Glass

Hardening the front door

With the form working again, attention turned to making sure it could withstand the internet. The contact pipeline was migrated off direct database inserts and routed through the notify-new-contact edge function, which now:

• Validates input server-side — names, email format, length limits — so a malformed submission never reaches the database.
• Rate-limits by IP to one request per minute, neutralizing the most common form-spam pattern without inconveniencing real students.
• Inserts via the service role, allowing us to drop the public INSERT policy on the contacts table entirely. The front door is no longer a side door.

The roles table, done right

User roles were moved into a dedicated user_roles table with a SECURITY DEFINER has_role() function — the pattern that prevents the recursive RLS pitfalls and privilege-escalation vectors that come from storing roles on the profile record. Admin status is now checked server-side, every time, with no client-side trust required.

VII. The Test Drive

The proof of any redesign isn't in the comp — it's in the way the thing behaves under a real finger on a real screen. The new site loads with the chrome already settled. The hero headline lands one word at a time. The stat counters tick upward as they cross the fold. The contact form, finally, sends an email. The admin panel opens to a writing canvas that looks more like a notebook than a dashboard.

Roy, for his part, has not commented on the color palette. He has commented, twice, on how easy it is to publish a blog post.

That is, in this line of work, the highest possible review.

VIII. What Shipped

IX. The Last Mile

There is a particular kind of small business that runs on something a website can't quite capture: a person. Kuya Roy is one of them. The redesign didn't try to replace what he does in the passenger seat — it just tried to make sure the people who need him can find him, book him, and read what he has to say between lessons.

The car still belongs to the student. The patience still belongs to Roy.

The website, for the first time in a while, belongs to the brand.

Built on Lovable. Powered by Lovable Cloud.