Kawa Moka Coffee
A Direct-to-Consumer Web Experience for Kawa Moka
Research
TODO: Heuristic audit of the existing site; five customer interviews with existing subscribers; a conversion funnel analysis in GA4. We identified three drop-off points: the origin story page (too long), the subscription selector (too many options) and the checkout (four steps for a registered user). Benchmarked against eight speciality coffee DTC brands for visual and UX reference.
Architecture
TODO: Reduced the subscription to a single three-step flow: choose origin → choose grind → choose frequency. Collapsed the origin story into a scroll-narrative section on the homepage. Rebuilt the checkout as a two-step process (address then payment). Defined the IA in FigJam with the client before touching design.
Design
TODO: Editorial aesthetic — large-format product photography, monoweight type, generous white space. The palette draws from the physical bag design: deep espresso, cream and a single amber accent. All interactions designed at 48 px minimum touch targets for mobile-first parity. Prototyped the subscription flow in Figma and user-tested with six participants.
Build
TODO: Built on Laravel + Blade with a Stripe-powered subscription engine. AVIF images throughout; critical CSS inlined; fonts self-hosted. Lighthouse mobile score: Performance 94, Accessibility 98, SEO 100. Average load time on throttled 4G: 1.7 s. Deployed to Fly.io with automated backups.
TODO: Conversion rate moved from 0.8 % to 3.1 % within the first 60 days. Subscription sign-ups increased by 214 % quarter-on-quarter. Average order value rose by 18 % as the redesigned origin story pages encouraged customers to upgrade to premium single-origins.
- UX Design
- NxtCre8tives
- Visual Design
- NxtCre8tives
- Development
- NxtCre8tives
- Photography
- NxtCre8tives
Let's make something worth showing.
Tell us about your project. We reply within one business day — usually less.
Start a project