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

Nutri-Cow

AI assistant

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 — and a 'Nutri-Cow' AI assistant fields feed, farming and product questions in plain language, day or night. 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

Product catalogue

Architected by animal lifecycle — calf, milking, buffalo, specialty — so a farmer reaches the right feed for a fourteen-day-old calf in one tap, instead of guessing a marketing bucket.

02 · Page type

Product detail page

Each product leads with the formulation logic and a plain nutritional-values panel (crude protein, fat, fibre) — the science first, the pack shot second.

03 · Page type

Nutri-Cow AI assistant

An on-site AI assistant — 'Nutri-Cow' — answers feed, farming and product questions in plain language, with quick links to products, the feed calculator and contact.

04 · Page type

Featured products

A homepage product shelf (Milk Edge and friends) that leads with the daily-yield benefit a dairy farmer actually buys on.

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.