Hinterland harvest raw forest honey in the hinterlands of Mindanao. Small batches, real forest, a product with a story worth telling properly.
The site we built is a single scrolling page designed to be read like a short film, and it puts the product in front of the price.
Live site. Scroll and click inside it. Switch between desktop and mobile.
The brief
Small producers usually end up with one of two websites. Either a marketplace template that makes something hand harvested look mass produced, or a builder site so heavy it takes several seconds to appear on the mobile connection most of their customers are actually using.
Hinterland wanted neither. The direction was dark and cinematic, deliberately unlike the cream backgrounds and watercolour bees that every other honey brand reaches for.
The approach
We built one page with a deliberate rhythm: a hero film, the origin story, what makes the honey different, the three varieties, the harvest journey, and finally a reservation form. The reader arrives at the product having already understood where it comes from.
Movement carries a lot of the storytelling here, so it had to be handled carefully. Everything the page needs is bundled with the site rather than fetched from elsewhere, which keeps it quick and keeps the experience smooth on a phone.
The photography
The client’s photographs are genuine: their own jars, shot in daylight, with Mt. Apo behind them. Honest, and not cinematic, which was a problem for a cinematic design.
Rather than replacing them with stock images of someone else’s honey, we graded them to sit inside the darker palette. The photographs stay true to the product and stop competing with the design. For a small producer this is almost always the right call, and customers can tell the difference.
Built for the owner to run
Every piece of text and every image on the page can be changed from one clearly labelled panel in WordPress, with each section named for what it is on the page rather than what it is called in the code.
Nothing can be broken by clearing a field. Empty values fall back to what was there before, so the site stays presentable even mid-edit.
The results
Zero blocking time is the figure worth noting on a page that moves this much. It means the site keeps responding to taps and scrolls while the animation runs, which is where most heavily animated sites fall down on a mid range phone.
Mobile performance sits at 85. The hero film costs about a second of load time, and that is a trade the design earns rather than an oversight. Trimming it is scheduled work, and worth saying out loud rather than leaving out of the summary.
