rifa.ai marketing site

I built rifa.ai to make the product easy to grasp before a sales call: a US and an India edition on one codebase, and a way to hear the agent at work before committing to a call.

Role: Lead Product Designer
Timeline: 2025 – 2026
Team: Engineering; Compliance

rifa.ai is live. Visit the site and talk to the agent yourself.

The problem

Framer had high hosting costs, visitors in India met a US-only site, and buyers had no way to try the agent without booking a sales call.

Context

rifa.ai is where buyers find out what Rifa's AI agents do, and ask for a demo. I built version 1 alone in Framer, and it had three problems.

It cost too much

Framer charged a lot, and testing a new idea was hard.

It spoke only to the US

Visitors in India found a site written for the US market.

Its live call broke

“Talk to Rifa AI” connected visitors to an agent not yet ready.

Rifa's compliance team wrote what the agents say; engineering built the call backend, booking and India routing.

I named the company: Rifa comes from an African word for knowledge.

What I shipped

Today's rifa.ai is two editions, International and India, on one codebase. I designed both and built most of their front end: 22 pages.

Four pages have an India twin; the rest are shared.

Calm on a phone: no scroll reveals, and a demo picker on one screen.

The portrait is the call's customer. For collections, no face: it would read as the debtor.

Even the 404 is a dropped call: "This line isn't connected."

Leaving Framer

Framer got expensive, and new ideas were hard to test in it. So we moved to Next.js on Rifa's own Cloudflare, and I rebuilt the site on my own.

Prototyping with Claude Code was much faster. The site kept growing: analytics, recorded calls, a live demo, an India page.

Trade-off: no visual editor any more. Every change, down to a word, went through code.

An India edition

Visitors in India were landing on a site written for the US. So I designed an edition for Indian lenders, insurers and hospitals, on the same codebase.

Its four pages use Indian terms (₹, EMIs, RBI, IRDAI, DPDP) and Indian scenes. Its live demo speaks Hindi, Marathi and Tamil.

The same situation, in three scripts.

Visitors in India land on it automatically, and a footer switcher lets them out.

Trade-off: two editions to keep in step. A missing India text falls back to the US one.

Hearing the agent

Let buyers hear the agent before a sales call. Version 1's live call broke in four ways, so version 2 played recordings instead.

Visitors asked random questions, asked for a human, or never allowed the microphone. The agent answered with delays and silences.

four ways to break a demo, all found live

Recordings never stumble. They also never answer back.

Once the agents improved, I brought the live call back in version 3. It first says who you'll be and what you'll be asked, then asks consent.

The agent's face went from a flat gradient to a glossy sphere to a WebGL orb that moves with its voice.

Check out the voice orb I built. It's open source.

One button

Seven button heights, all for one job. I audited the calls to action on nine pages and found no shared button.

45, 46, 48, 49, 50, 51 and 56 pixels, all for one job

Now there's one Button in three sizes, and a rule: primary only for a page's main asks.

Seven heights for one job, then one Button.

Motion got the same treatment: 110 one-off transition values in 38 files became four tokens.

Four tokens, with reduced motion handled in one place.

Impact

A site sales could send people to. About 25 demo requests came through its form, and a few became pilot opportunities, mostly in healthcare and insurance.

~25demo requests through the form, plus cal.com bookings
2 editionsInternational and India, on one codebase

Then visitors said the site was slow and laggy. I removed the smooth scrolling, loaded fonts once and moved analytics after page load.

I added that smooth scrolling myself, in January

On a build measured before release, the home page's mobile Lighthouse score went from 71 to 85. Films went from about 10 MB to 0.45–1.1 MB each.

The speed pass: largest paint from 11.0 s to 4.1 s.

Reflection

Measure from the first version, and put the polish through a slow phone.

Test the polish on a slow phone. The smooth scrolling trailed the mouse by over a second. Visitors noticed before I did.

Measure from day one. Analytics arrived partway through version 2, so I can show how each version looked, not how much it changed.

See it live at rifa.ai, and talk to the agent yourself.