How do you structure product information for a category that's this technical?

Product pages lead with the formulation logic (who it's for, why this mix, at which lifecycle stage) before the pack shot. Technical specifications sit below the narrative, not above — dense data is easier to read once the reader knows why it matters.

What performance budget works for rural / on-the-move users?

Seventy percent of traffic is mobile, much of it on patchy 4G. The build leans on aggressive image optimisation (AVIF + responsive sizes), aspect-ratio locks for zero layout shift, and a lean critical path — so the first meaningful paint lands fast even where the connection doesn't.

Do you handle multilingual content in this kind of build?

Yes — Nutricana ships in English and Hindi, sharing one content layer through locale-aware routing. The site structure is designed so adding a third language (Punjabi is planned) is a content-production problem, not an engineering one.

← All work

FMCG2024

Nutricana Feed

Dairynutrition,shippedpremium.

A research-driven cattle-feed brand operating across 10+ states, given a site that respects both the science and the farmer.

Visit live site

Stack

Next.js
TypeScript
Tailwind
Motion
Blog/CMS
Responsive

Results

CLS

16 SKUs

Product range

Lifecycle stages

EN · HI

Languages

17 yrs

Research

Templates used

The brief

Problem

Seventeen years of formulation research, ten states of distribution, five hundred dealers — and a web presence that read like a brochure scanned in 2009. Nutricana's buyers are dairy farmers and distributors who make high-trust, repeat-purchase decisions. Generic FMCG template sites don't build that trust; they flatten product nuance (calf starter vs transition care vs milk booster is not a cosmetic difference) and bury the dealer-finder behind five clicks.

How we built it

Approach

We rebuilt product IA around the lifecycle — calf, heifer, milking, buffalo, specialty — not around marketing buckets. Each product page leads with the formulation logic (why this mix, for which animal, at which stage) before the pack shot. A farmer-friendly tools section sits alongside the catalogue, so dealers can pull ration calculators and digestibility references without emailing the sales team. The blog is structured as a field manual, not a press release archive. Copy switches Hindi-English cadence deliberately — the way the team actually sounds with buyers.

Feature showcase

The bits worth zooming into.

01 · Page type

Homepage

Editorial homepage leading with the 17-year credibility story, not the catalogue.

02 · Page type

Product catalogue

Architected by animal lifecycle — calf, heifer, milking, buffalo, specialty — not by marketing bucket.

03 · Page type

Story / About

Scientific formulation reframed as brand narrative, not a corporate boilerplate.

04 · Page type

Contact + dealer-finder

Designed for distributors on a mandi phone — short, sticky, flaky-network tolerant.

05 · Page type

Dealer portal

Gated ordering + inventory tools for the authenticated dealer flow.

Decision log

What we decided, and why.

Why lifecycle-first IA, not marketing-first

A dairy farmer's question is 'what do I feed a fourteen-day-old calf?', not 'what's in your flagship category?' Reorganising the catalogue around animal lifecycle — calf, heifer, milking, buffalo, specialty — cut the distance between question and answer to a single click, and the site's own search data confirmed the old category structure was mostly being ignored.

Why Hindi-English cadence in the copy

Nutricana's buyers don't read corporate English; they don't read pure Hindi either. The way the team actually sells in the field blends both, and the site now reflects that. This is not a translation problem — it's a voice problem, and solving it raised time-on-page and blog-read depth measurably.

Why the dealer portal is gated, not public

Distributor ordering tools were scoped as a separate authenticated experience (User Login). Mixing dealer pricing + bulk ordering into the public storefront would dilute both the brand story for first-time visitors and the operational workflow for the dealer. Two audiences, two experiences.

Common questions

What buyers ask before signing.

Q01How do you structure product information for a category that's this technical?: Product pages lead with the formulation logic (who it's for, why this mix, at which lifecycle stage) before the pack shot. Technical specifications sit below the narrative, not above — dense data is easier to read once the reader knows why it matters.
Q02What performance budget works for rural / on-the-move users?: Seventy percent of traffic is mobile, much of it on patchy 4G. The build leans on aggressive image optimisation (AVIF + responsive sizes), aspect-ratio locks for zero layout shift, and a lean critical path — so the first meaningful paint lands fast even where the connection doesn't.
Q03Do you handle multilingual content in this kind of build?: Yes — Nutricana ships in English and Hindi, sharing one content layer through locale-aware routing. The site structure is designed so adding a third language (Punjabi is planned) is a content-production problem, not an engineering one.