Kaldi Roast Co. (DTC Coffee Brand)
Editorial-style product landing page for a premium specialty coffee brand. Subscription-focused design with warm typography, product storytelling, and conversion flow built to drive first-time subscribers and showcase direct-trade sourcing.
A slow-scroll storytelling page for a direct-to-consumer coffee brand, built as a concept project.
React and TypeScript on Lovable, structured to be Shopify-ready, designed to move a visitor towards a subscription rather than a single bag.
What was in the way
Direct-to-consumer coffee is a crowded category where the product is genuinely hard to differentiate on a page.
Everyone has origin notes. Everyone has a roast date. Everyone has a tasting wheel. A visitor comparing three roasters sees three versions of the same information, cannot tell them apart, and buys on price or on whichever brand they already half recognise.
There is a second, harder problem underneath it. A one-off bag is a bad outcome for a coffee business. Acquisition costs the same either way, but a subscriber is worth many times a single purchaser, and a page optimised for add to cart quietly optimises for the wrong thing.
So the page has two jobs: differentiate on something other than the product spec, and make subscription feel like the obvious choice rather than the upsell.
Six parts, each with a reason
Origin storytelling before the ask
Sections that build the case for craft before requesting the sale.
The differentiation has to come from how the story is told, because it cannot come from the beans. A visitor who has read why a roaster chose a farm is buying something a tasting note cannot convey.
Brew method selector
Which doubles as product guidance and as intent segmentation.
Someone selecting espresso has different needs and a different buying rhythm from someone selecting pour over. The selector helps them choose while telling the brand what kind of drinker arrived.
Social proof woven through
Distributed across sections rather than parked in one testimonial block.
A single testimonial row is read as marketing and skipped. Proof placed next to the specific claim it supports is read as evidence.
A note on this one
This is a concept project, not client work. No real brand, no real orders, no results to report.
It exists to demonstrate narrative commerce structure and the subscription-first argument. For live Shopify storefronts I have built and run, see Synful Novelties and Adaptive Automate.
Seasonal roasts
Framing the catalogue as something that changes rather than a fixed range.
This is the structural argument for subscribing. A static catalogue invites a single purchase, because nothing about it suggests coming back. A rotating one makes a subscription the natural way to engage with it.
Subscription as the destination
Every section pulls towards it rather than towards a single purchase. The one-off bag stays available, but it is not what the page argues for.
The engineering underneath
React with TypeScript, Tailwind CSS and Framer Motion, built on Lovable.
The motion work is doing real work rather than decorating. A slow-scroll narrative needs pacing, and the scroll-linked transitions control the rate at which the argument is delivered. Without them the same copy reads as a long page that the visitor scrolls past.
It is structured to be Shopify-ready, meaning the product presentation, collection structure and cart entry points map onto Shopify concepts rather than being bespoke. A concept page that cannot become a real store is a design exercise, and the point of this one is that the structure survives contact with a real catalogue.
Hire me for this
Shopify Store Management & VAFrom $10/hrAmazon & Ecommerce VAFrom $10/hrFull-Stack Web DevelopmentFrom $14/hrProjects like this
Hollow Creek Farmstead
Rustic ecommerce landing page for a full-ecosystem family farm selling fresh produce, pasture-raised meats,...
D.R.E.A.M Week by Live Joe Dreamz
Event landing page for a 5-day personal transformation program. Designed to drive registrations through clear...
Summit Roofing Co. (Landing Page)
High-converting lead generation landing page for a premium Austin-based roofing contractor. Built with a...
I build software, and I measure whether it works.
The same questions I research are the ones I ask on client builds: is it reliable, is it fast, is it easy to use, and is it secure. Those four drove satisfaction in my ICT portal study, and they shape how I scope and test every project.