A studio site where the free demo is the whole offer.

01 · The brief

A design studio selling websites to small businesses in Bengaluru has a hard problem on its first screen: everyone it talks to has already been quoted by three other studios, and nobody wants to pay half up front for a site they have not seen. The answer this studio sells is unusual — build the demo first, let the client look at it, then talk about money.

That is a good offer with a bad default. Most agency sites put a portfolio first and mention the process somewhere below. Here the offer had to be the first thing a stranger understood, because it is the only claim a competitor cannot copy in a week.

02 · What I built

One page per job, hand-coded, no page builder. The same build also runs from a Vercel deployment for previews. The home page opens with the offer as a headline, then the four services, the three-step process (brief, demo, launch), the five case studies, a short pricing table and a contact form.

The written parts are short on purpose. Each service gets one paragraph about who it suits rather than a feature list, and the pricing table states the three tiers and what each includes, so a visitor can decide whether they are in the right range before they message.

03 · What’s on the page

• A red-on-white palette with one accent, so the “free demo” line is the loudest thing after the headline
• Numbered sections, so the page reads as a sequence rather than a pile of blocks
• A WhatsApp button in the header and again at the bottom: the one action the studio actually wants
• A form that asks for a project type and a budget range, so the first reply can be useful
• Service and case-study pages that carry their own title and description for search

04 · What I’d fix next

The sitemap lists nine addresses: the home page, services, work, process, pricing, about, contact, FAQ and blog. It does not list the four service pages, the five case studies or the blog posts, so the pages that answer specific searches are the ones search engines are least likely to find. That is a ten-minute fix and the first thing I would do here.

The other cost is the logo. It is served as a 464 KB PNG, displayed about 40 pixels tall, and it is the single heaviest file on the page — roughly 60% of what a visitor downloads. The same mark as an SVG, or as a WebP at the size it is drawn, would be a few kilobytes.

Measured with Lighthouse on mobile throttling, the home page takes about 8 seconds for its largest element on a slow connection, which is the sort of number that is invisible on a fast laptop and expensive on a phone.

Neither is a design problem. Both are the sort of thing that gets skipped when a site is finished in a week.

05 · What it means for your site

An offer that is genuinely different deserves the first screen, not the fourth. If your differentiator is “you see it before you pay”, “fixed price” or “live in a week”, say it above the fold and put the proof directly under it. Everything else on the page is there to answer the objection that follows.