Mokabon

Een productpagina die je leert hoe je de koffie zet die je net gekocht hebt.

Mokabon brandt al sinds 1937 koffie op de Donkersteeg in Gent. De webshop verkocht de bonen, maar niet het vakmanschap erachter. We bouwden de productpagina opnieuw op rond wat er gebeurt nadat de bestelling geleverd is: een brouwgids met live timer, een proefgids, en recepten die Mokabon zelf aanpast in Shopify. Geen extra apps, geen tweede abonnementssysteem, en geen big bang.

De uitdaging

Koffie verkoopt op smaak en methode, maar de productpagina toonde enkel een zak en een prijs

Elke koffie heeft zijn eigen recept. Dosis, water, maalgraad, richttijd, druk, temperatuur. Daar stond niets van op de site

Recepten in de code zetten betekent een developer voor elke wijziging. Bij 40 koffies wordt één aangepast brandprofiel 40 aanvragen

De abonnementen liepen al via Seal Subscriptions, maar op de productpagina was het aanbod makkelijk over het hoofd te zien

De bestaande productpagina verbouwen zou 40 live producten tegelijk in gevaar brengen

Wat we bouwden

Een tweede productpagina, geen verbouwde De nieuwe template staat naast de bestaande. Mokabon zet producten één voor één over, en terugschakelen is één keuzelijst. In beide richtingen gaat er niets verloren.

Brouwgids met live timer Filter en espresso krijgen elk hun eigen tabblad. De receptregel (dosis, water, maalgraad) komt rechtstreeks uit het product. De timer loopt door de schenkstappen, met de waterhoeveelheden per koffie berekend. Voor espresso rekent een ratiocalculator 18 g om naar 36 g bij 1:2, met een schuifregelaar zodat de bezoeker zijn eigen dosis kan uitrekenen.

Proefgids Vier stappen, gelijk voor het hele assortiment, aanpasbaar in de theme-editor.

Abonnementsblok bovenop Seal Het blok haalt zijn prijs uit het gekoppelde abonnementsproduct en volgt dus automatisch mee als die prijs wijzigt. Niet gekoppeld in Seal? Dan verdwijnt het blok vanzelf. Eén abonnementssysteem, één plek om abonnees te beheren.

Live café-blok Toont of de zaak op de Donkersteeg nu open is, met het sluitingsuur van vandaag en een routeknop. De webshop en de winkel verwijzen eindelijk naar elkaar.

Elf nieuwe productvelden, met grenzen Elke brouwwaarde is nu een Shopify-veld met een toegelaten bereik en een korte uitleg. Richttijd aanvaardt enkel 15 tot 60. Maalgraad is een keuzelijst, zodat "medium fijn", "Medium-Fijn" en "MEDIUM FIJN" niet langer door elkaar op de site kunnen staan. De eenheden zitten in de website, niet in de data, dus "s" veranderen naar "sec" is één aanpassing voor het hele assortiment.

Hoe we werkten

Eén sprint, één feedbackronde, vaste scope

Geen enkele extra app of abonnement toegevoegd aan hun stack

Niets aangeraakt buiten scope: prijzen, voorraad, bestaande productpagina's, checkout en e-mails bleven exact zoals ze waren

Opgeleverd met twee documenten: een handleiding om de nieuwe pagina te bedienen, en een geschreven verantwoording van elke wijziging en elke keuze, in gewone taal

Wil jij dat je productpagina's verkopen wat er achter het product zit? Boek een call