Skip to main content
HeartieeWEB
← All work
FMCG2024

Corral Feed

Wholesomenutrition,premiumsite.

A fast-growing feed brand whose product is confident and whose old website wasn't.

Corral Feed — desktop preview

Stack

  • Next.js
  • TypeScript
  • Tailwind
  • Motion
  • Responsive

Results

0.046
CLS
11 SKUs
Catalogue
3
Categories
EN · HI · PA
Languages
100%
Bespoke pages
0
Templates used

The brief

Problem

The feed category is an arms race of identical sites — same hero image of grazing cattle, same tabs, same tired product cards. Corral's brand platform is 'wholesome nutrition,' but the old site treated that as a tagline rather than a design brief. They needed a digital face that a B2B buyer could forward to a new dealer without apologising.

How we built it

Approach

Bold, unapologetic type. Confident product photography treated as the lead, not the afterthought. A unified catalogue at /products with persistent category filters (Calf & Heifer, Milking Feed, Transition & Dry) and a live detail pane — so a buyer researching a milk booster surfaces the transition-care option two taps away, without losing the comparative context. Contact paths designed for distributor reality: we know the dealer-inquiry form gets filled on a phone in a mandi, so it's short, sticky, and doesn't punish a flaky network.

Feature showcase

The bits worth zooming into.

Corral Feed — Product catalogue
01 · Page type

Product catalogue

Single-canvas catalogue: every SKU surfaced on /products with category filters (Calf & Heifer, Milking Feed, Transition & Dry) and live detail pane.

Corral Feed — About
02 · Page type

About

Confident product photography treated as the lead — not decoration grafted on top.

Corral Feed — Blog
03 · Page type

Blog

Structured as a field manual for dealers, not a press-release archive.

Corral Feed — Contact
04 · Page type

Contact

Distributor-first flow — short, sticky, tolerant of a flaky mandi connection.

Decision log

What we decided, and why.

01

Why the product photography leads

Every competitor in the feed category opens with a pastoral cattle shot. Corral's differentiation is the product itself, so product photography carries the hero — not a hero banner. The result is a site that looks visually adjacent to a premium FMCG brand, not a technical supplier.

02

Why a single catalogue page with category filters

Splitting catalogue by species (separate cattle-feed and buffalo-feed pages) felt structurally tidy on paper but added clicks for buyers who actually wanted to compare options across species in one session. We collapsed everything into a single /products surface with persistent category filters and a live detail pane — every SKU stays one click away, regardless of where the buyer started.

03

Why the distributor form is short and sticky

The realistic context for a dealer enquiry is a phone in a mandi with a flaky connection. The form is three fields, stores partial state locally, and reconciles on network reconnect. The longer 'full enquiry' flow lives on a separate page that buyers opt into after first contact.

Common questions

What buyers ask before signing.

Q01How do you differentiate a feed brand's website in a saturated category?
By refusing the category's visual clichés (pastoral banners, generic stock). Corral leads with product photography, confident typography, and a copy stance that treats buyers as operators — not as consumers to be sold to.
Q02What's the content model for a catalogue like this?
Each product is a typed record with formulation, species, lifecycle stage, and related-product relationships. The site reads from that data model, so editorial changes don't require template tweaks and new SKUs inherit the system automatically.
Q03How does the site handle dealer onboarding vs consumer enquiry?
Two paths. Consumer / brand enquiries route through the main contact flow. Dealer onboarding (pricing, MOQ, territory) is a gated path with a separate form and a follow-up cadence designed for a B2B sales cycle.

Like what you see? We've just started.