Kopi Calf
From Linktree
to Full Web.
Designing a complete brand website for Kopi Calf — Indonesia's fast-growing affordable premium coffee chain — replacing a generic link aggregator with a full digital presence.
The Problem
A national brand
with a placeholder
website.
Kopi Calf
Start from The Simple Ways
linktr.ee/kopicalf
With 100+ outlets across Indonesia, Kopi Calf’s only digital presence was a Linktree with three buttons. The brand’s digital experience failed to match its physical scale.
Zero Brand Storytelling
The brand's identity and 'affordable premium' mission were completely absent from the digital experience.
Invisible Product Catalog
Six distinct drink series with unique identities remained hidden behind a single 'Order' button.
Passive Ordering Experience
The lack of a built-in outlet finder forced users to leave the site and manually search for locations on external apps.
Missing Trust Signals
A generic link aggregator signals low investment, creating a credibility gap for a brand of this scale.
Design Approach
Bold, editorial,
and unapologetically
blue.
Every decision connects brand storytelling with real user action—pairing Calf’s bold identity with a clear, conversion-focused experience.
Storytelling Architecture
A three-page structure—Home, Series, and Menu—organizes the brand experience from discovery to product selection.
Frictionless Ordering
A 3-step modal flow (city → outlet → platform) connects users directly to GoFood, GrabFood, or ShopeeFood.
Visual Identity First
Extends Calf’s blue identity into a cohesive typographic system pairing editorial serif headlines with clean body text.
The Design
Three pages.
One cohesive
experience.
The homepage leads with a full-bleed hero — "Affordable Premium Coffee" — then flows through brand storytelling, a nationwide outlet finder, and clear contact channels.
An aggregated editorial showcase of Kopi Calf's Instagram feed — each series curated and presented as a browsable collection, so customers don't have to dig through social media to discover what's available.
A filterable product catalog organized by series tab, featuring clean typography and photography.
A clean footer carrying the Calf wordmark, brand tagline, social links, and support contacts — consistent across all pages.
The User Journey
A seamless
ordering experience.
Rather than a separate page, we designed a frictionless modal overlay that stays in context, guiding users to their coffee in three rapid steps.
Location Intelligence
The flow starts by narrowing down the region. Large, tappable cards ensure ease of use on mobile.
Outlet Discovery
Real-time filtering allows users to find their nearest Calf outlet quickly.
Direct Conversion
The final step deep-links directly into delivery apps for instant recognition.
The Impact
From a placeholder
to a destination.
Transforming a passive Linktree into a structured experience designed for discovery and action.
Structured Navigation
Replaced scattered links with clear paths for product discovery, outlet finding, and brand storytelling.
Guided Ordering Flow
A three-step sequence—city, outlet, and platform—removes the friction of manual searching in delivery apps.
Elevated Brand Clarity
A cohesive visual system replaces the generic placeholder, building immediate trust and professional recognition.
Direct Conversion Paths
Deep-links to GoFood, GrabFood, and ShopeeFood ensure every interaction leads users toward an order with intent.
Like what you see?
Let's work together.
This was a speculative concept project. If you're looking for a designer who can bring this level of craft to your brand, I'd love to chat.