← Portfolio
Digital stable
Case study · Concept

Digital stable

Three ways to tell the story of dairy cow nutrition, built to be tried, not described.

What it isThree navigable concepts for an animal nutrition studio
RoleAnalysis, design, development
StackStandalone HTML · three.js · model-viewer · SVG
StatusPublic demos, anonymized data
The starting point

A website, a calculator, and four phases

A dairy cow nutrition consultancy — calf weaning, heifer growth, dry, lactation — had a showcase website that had been stagnant for years and a homemade calculator: a spreadsheet turned into a web page to estimate how much milk is lost with the summer heat and how much is recovered with a supplement.

Before writing a single line: a check of the existing site and an analysis of the calculator, formula by formula. Then, instead of a single mockup, three complete concepts to open in the browser — it is better to choose by using rather than looking.

The four phases around which all three concepts revolve, with the durations that the console uses for its curves.
The three concepts

Same data, three experiences

Each concept is a complete page that opens in a new tab. The company names, contacts, and the product are declared placeholders: everything else is as it was presented.

01

Growth console

The herd in 3D, phase by phase

A three-dimensional model of the cow that changes with the phase, growth and lactation curves recalculated based on the farm's numbers, supplements that shift the curves, and the economic return below. Three variants of the same concept: the three-column console, the non-scrolling app shell, and the tab bar version designed for the phone.

02

3D interactive stable

A barn to explore, zone by zone

An open-air barn designed in three.js: seven zones including calves, heifers, dry, lactation, the milking robot, the product shelf with the calculator, and the mailbox that opens contacts. Cows, troughs, and robots are geometry generated by code — no images loaded — and day and night switch with a single slider.

03

Classic site

The simple version, requested over the phone

Six pages on a single file, the contact form at the end of all of them, the calculator in a collapsible section. No external dependencies, zero inline styles, zero inline handlers: it fits into a strict security policy without rewrites. The visual register is that of a precision tool — grotesque titles, monospace numbers, light and dark themes.

The calculator

The client's spreadsheet, reread formula by formula

The original calculator estimated heat stress using the temperature-humidity index (THI) and derived the liters lost and recovered. The analysis found two objective errors — the discomfort index calculated with humidity being a hundred times larger, and a perceived degrees formula used outside its domain of validity — plus a field that did nothing.

  • CorrectThe two errors, and the perceived degrees, show the actual temperature outside the formula's domain.
  • ConnectedThe days of calculation: they were an inert field, now the result actually uses them.
  • UntouchedThe commercial coefficient and recovery brackets: a client calibration, not my choice.

On the starting values, the results coincide with the original up to the last decimal: corrections change the wrong cases, not the right ones.

The calculator's THI scale: the four thresholds are those of the code, and at 30 °C with 50% humidity the needle marks 79, severe stress.
The product decision

Choosing by using, not by reading

Anyone who has never bought software does not choose between three slides: they choose between three things that open on the phone, are touched, and are taken to the stable. Each concept has real domain data, a contact form that simulates sending, and only one named product; the rest of the price list is declared as placeholder, because inventing names would have made the comparison less honest.

The cycle was short: the first console was «too full», the second became an app that doesn't scroll, the third moved navigation to a tab bar on the phone. Three variants published, none deleted: iteration is part of the work.

The console's growth curve: from 42 kg at birth to 590 kg at the first calving at 24 months, the same points that draw the graph in the concept.
Under the hood

One file, no server

A single HTML file

Each concept is a standalone document: it opens from a link, it is sent, it is printed. The server does nothing but deliver it.

3D without images

The cows, the milking robot, and the barn are built from code; the herd model in the console is the only 3D file loaded, and it comes with a loading image.

Declared security

Demos live under a prefix with a dedicated security policy: the third-party libraries they serve are listed one by one, and everything else is blocked.

Weather with consent

The calculator can read temperature and humidity from the location: the note next to the button says what comes out of the browser, where it goes, and that typing the two values manually gives the same result.

Light and dark theme

In the barn, the theme changes the sky and turns on the streetlights; in the classic site, it is a set of variables, no duplicated rules, and printing always reverts to light mode.

Signed

Each concept carries visible credit and author markers that survive copying and minification, with a cryptographic commitment that demonstrates authorship without revealing anything.

In numbers

Counted, not estimated

3concept, a single request
5demos that open in the browser
4farming phases
3SVG dials in the calculator
2errors found in the original sheet
0images uploaded to the 3D stable
Declared limits

What it is, what it is not

They are concepts, not a production site: company data are placeholders, forms do not send anything, the price list has only one demonstration product and the calculator formulas are the client's, reported faithfully and not validated by me from a zootechnical perspective.

The herd's 3D models weigh tens of megabytes: the console loads them only when needed, but on a slow connection the loading image remains for a long time.

From concept to site

The next step is already designed

The chosen concept becomes a site on its own domain, with the calculator rewritten to fit into the platform's presentation engine and products managed by a panel, not by code: adding a product to the calculator's logic is a data change, not a rewrite.

The same path applies to any activity with a homemade tool to be made part of the site — with a dedicated quote.

Open the concepts, then let's talk about it

They are public demos: they open without registering, from a phone or a computer. If you have a business to tell, the best way to decide is to try.