Mokabon
- Klant
- Mokabon
- Gebouwd met
- Shopify
- Doorlooptijd
- 1 sprint
- Diensten
- UI/UX design, Webontwikkeling, Grow
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 na de levering gebeurt: een brouwgids met timer, een proefgids, en recepten die Mokabon zelf beheert in Shopify. Geen extra apps, geen tweede abonnementssysteem. De nieuwe pagina staat naast de oude, dus elke koffie verhuist wanneer die klaar is.
- Koffie wordt verkocht op smaak en methode, maar de productpagina toonde alleen een zak en een prijs.
- Elke koffie heeft zijn eigen recept: dosis, water, maalgraad, zettijd, druk, temperatuur. Daarvan stond niets op de site.
- Recepten in het theme zetten betekent een developer voor elke wijziging. Met 40 koffies wordt één aangepast brandprofiel 40 aanvragen.
- Ze draaiden hun abonnementen al via Seal Subscriptions, maar op de productpagina was dat aanbod makkelijk te missen.
- De bestaande productpagina herbouwen zou 40 live producten tegelijk op het spel zetten.
Een pagina gebouwd rond wat er na de bestelling gebeurt
Mokabon brandt sinds 1937 koffie op de Donkersteeg in Gent. Hun webshop verkocht de bonen, maar niet het vakmanschap erachter. We bouwden de productpagina opnieuw rond het zetten zelf: een zetgids met een live timer, een smaakgids, en een live cafeblok. Geen extra apps, geen tweede abonnementssysteem, en geen big bang.
01 Zetten
Een gids met een live timer
Filter en espresso krijgen elk hun eigen tab. De receptregel komt rechtstreeks van het product, en de timer telt door de schenkstappen met de waterhoeveelheden per koffie berekend.
02 Smaak
Vier stappen, één taal
De smaakgids is vier stappen, gelijk voor het hele assortiment en aanpasbaar in de theme editor, zodat elke koffie op dezelfde manier beschreven wordt.
03 Cafe
De zaak, vanuit de webshop
Een live 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.
Alles wat Mokabon aanpast zonder iemand iets te vragen
Elke zetwaarde is een Shopify-veld, dus een receptwijziging is een aanpassing en geen aanvraag.
Een tweede productpagina, geen herbouwde
Het nieuwe sjabloon staat naast het bestaande. Mokabon zet producten één voor één om, en terugschakelen is één dropdown. In beide richtingen gaat er niets verloren, en veertig live producten stonden nooit samen op het spel.
Hoe we werkten
- Eén sprint, één feedbackronde, vaste scope.
- Geen enkele extra app of abonnement aan hun stack toegevoegd.
- 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 onderbouwing van elke wijziging en elke keuze, in gewone taal.
40
Koffies in het assortiment
11
Nieuwe productvelden
1
Sprint, vaste scope
0
Extra apps toegevoegd
Hoe we er kwamen
De beslissingen die dit project vormden, in de volgorde waarin we ze namen. Klap er een open om te zien wat die oploste.
De live productpagina verbouwen betekent dat één fout meteen 40 producten raakt. De nieuwe template staat ernaast, dus Mokabon beslist per product wanneer die overgaat. Werkt iets niet zoals verwacht, dan zet je het sjabloon terug en staat de oude pagina er weer. In beide richtingen gaat er niets verloren.
Recepten in de code betekent een developer voor elke wijziging. Nu past Mokabon een getal aan in Shopify en staat het live. Bij veertig koffies is dat het verschil tussen één aanpassing en veertig aanvragen, elke keer dat een brandprofiel verandert.
Als vrije tekst aanvaardt een veld letterlijk alles: "28 s", "ongeveer een halve minuut", "1000 seconden". Door er getallen van te maken konden we grenzen opleggen, zodat richttijd enkel 15 tot 60 aanvaardt en een typfout geweigerd wordt vóór ze op de site staat. De eenheid zit in de website, dus "s" wijzigen naar "sec" is één aanpassing voor het hele assortiment.
Bij vrij typen komen "medium fijn", "Medium-Fijn" en "MEDIUM FIJN" onvermijdelijk door elkaar op dezelfde site te staan. Met een keuzelijst kan dat niet meer, en invullen gaat bovendien sneller.
Een tweede abonnementssysteem betekent twee plekken om abonnees te beheren, twee soorten facturatie en twee dingen die stuk kunnen. De nieuwe toggle zit bovenop de bestaande app: de weergave is van ons, de abonnementslogica blijft van hen.
