Dagelijkse Kost: 2.000 recepten & 10.000 ingrediënten

Hoe maak je een webapplicatie voor Dagelijkse Kost die elke Vlaming leert koken en wegwijs maakt in 2.000 recepten en 10.000 ingrediënten?

Al tien seizoenen kookt Jeroen Meus zijn Dagelijkse Kost op Eén. Maar slechts enkele jaren geleden werden ook de digitale ambities van dit populaire kookprogramma scherper gesteld. Samen met VRT ging Wieni op zoek naar hoe we de beste kookwebsite in Vlaanderen en Nederland konden maken.

Wat waren de voornaamste uitdagingen in dit project?

  • Meer dan 2.000 recepten doorzoekbaar maken en de inspirationele zoektocht ondersteunen

  • De algemene laadsnelheid en gebruiksvriendelijkheid van de website opkrikken voor mobiele gebruikers (we zagen een actief gebruik tijdens het winkelen in de supermarkt)

  • Een krachtige backend-tool waar een redactie snel en eenvoudig recepten & ingrediënten kan invoegen

  • Zoekverkeer optimaliseren om in Google hoger te scoren bij veelgezochte recepten

  • Maximaal inzetten op personalisatie en zo een eigen selectie maken van de hoeveelheid content  

  • Opvangen van bezoekerspieken in bvb de dagen voor Kerstmis

dagelijksekost.een.be - home

Wat hebben we nodig?

Zoals in de keuken van elke topchef, is ook bij het ontwerpen en ontwikkelen van een digitaal platform de voorbereiding cruciaal. De belangrijkste vragen die we in de voorbereidingsfase stellen is: “Wat hebben we nu en wat kan er beter? Maar vooral: voor wie en waarom?”. Zonder dat we de gebruiker begrijpen, zetten we namelijk geen stap verder.

Het creative lab van VRT had al een kwalitatief onderzoek gedaan in de keukens van enkele tientallen Vlamingen. Hoe gebruiken zij de website als hulpmiddel tijdens het koken?

Verder hebben we de gebruikerscijfers op Google Analytics grondig onderzocht, heat- en klikmaps bestudeerd via Hotjar en een gebruikersbevraging opgesteld op specifieke pagina’s van de website.  

Enkele weken later kom je met dit onderzoek op interessante resultaten:

  • Ik vind niet wat ik zoek. De zoekfunctie moet krachtiger worden uitgewerkt.

  • In de winkel heb je met je smartphone slechts een klein scherm en trage dataconnectie ter beschikking. Snelheid en mobiele gebruiksvriendelijkheid moet omhoog.

  • Elke werkdag vanaf 16-17u zien we een serieuze piek in de zoektocht naar inspiratie.

  • Kerstmis is een topseizoen voor de website. Hier moet er maximale uptime garantie zijn.

  • Ik wil het aantal personen kunnen ingeven voor mijn recept.  

  • Mooie, aantrekkelijke foto’s zijn cruciaal in een zoektocht naar het juiste recept.

  • Recepten worden nog vaak afgeprint. Hoe kunnen we dit gedrag vertalen in ons online platform?

De interface: niet mobile-, maar touch-first

Als je in de winkel staat om de ingrediënten van je recept op te zoeken of in de keuken om aan de bereiding te beginnen, zit je op een detailpagina van een recept. We zijn dus ook met de layout en functionaliteiten van die pagina begonnen ipv een home- of zoekpagina. Deze pagina wordt vooral op smartphones en tablets bezocht dus zouden we de interface ontwerpen voor zogenaamde “touch-gestures”: geen mouseovers, geen overbodige animaties en snel scanbare pagina’s.

Dit leverde mobile prototypes op waarmee we de volledige user journey konden gaan meten en optimaliseren: van een recept naar gerelateerde recepten, van de homepagina naar de zoekpagina, etc...

dagelijksekost.een.be - recept
dagelijksekost.een.be - recept zoeken

De backend: Drupal 8 als content management system

De redactie van Hotel Hungaria, het productiehuis achter het televisieprogramma, geeft dagelijks de ingrediënten van elk nieuw recept dat wordt uitgezonden. Omdat gebruikers op de website zelf kunnen kiezen voor hoeveel personen ze een recept maken, moet elk ingrediënt en haar hoeveelheden zorgvuldig worden ingegeven. Zo moeten we rekening houden met meervouden van elk ingrediënt, maar ook met hoeveelheden. Want als je voor 8 personen spaghetti bolognaise wil maken ipv voor 4 personen, heb je niet dubbel zoveel zout of peper nodig. De frontend van de website moet dus in bepaalde mate rekening houden met de backend, maar ook zelf berekeningen kunnen doen.

Dat vraagt om een gebruiksvriendelijke beheerstool, op maat gemaakt voor een redactieteam dat snel en secuur moet werken. Een backend waar inhoud proper getagd en geklassificeerd kan worden om automatische gerelateerde content op te bouwen, en het zoek- en filtersysteem kan voeden met de juiste termen.

CMS dagelijkse kost

Backend CMS in Drupal 8 voor Dagelijkse Kost

Technische setup: software meets hardware

Laadsnelheid op mobile boosten en maximale uptime garanderen met honderdduizenden gebruikers per dag, vraagt om een aparte aanpak. Dan begin je niet met een overload aan features te bedenken of grafische schetsoefeningen te doen. Dan denk je na over softwarematige stack waarbinnen je ontwikkelt, hoe je caching in combinatie met personalisatie gaat aanpakken en hoe je cloud architectuur er idealiter uit ziet.

De volledige site plaatsen (HTML, Javascript, CSS, images, fonts) we achter de CDN (Cloudfront) waardoor we voor de content via de Cloudfront edges zo dicht mogelijk bij de gebruiker brengen. Dit heeft als 2de voordeel dat de load (zeker bij grote pieken) wordt opgevangen en verspreid overheen deze Edges. 

Voor het gedeelte waar de gebruikers zelf lijstjes kunnen aanmaken van recepten, werken we volledig via React in de frontend. Er worden API calls gedaan vanuit Javascript om specifieke informatie op te vragen of aan te passen.

Voor al de requests die wel door de CDN komen en de API calls hebben we 3 frontends staan die de requests opvangen. Elke van deze frontends heeft zijn eigen read only MariaDB database en eigen Redis ter beschikking. Bovendien staan deze 3 frontends in verschillende Availability Zones waardoor we zeer hoge uptimes kunnen garanderen. 

Inspiratiegevoel opkrikken: inspelen op de seizoenen & visueel maximaal ondersteunen in een design sprint

Nu we de basics goed hadden - een gebruiksvriendelijke mobiele interface en een degelijke software- en hardwarestructuur - konden we beginnen met het visuele, esthetische en het inspirationele aspect.

Een van de belangrijkste touchpoints bij de start van je zoektocht naar kookinspiratie, is de homepage. Deze hebben we dus gebruikt als basis van de brainstorm en fundamenteel onderdeel van onze design sprint.

De design sprint voor deze fase bestond met een team van 5 designers,

  • briefing opstellen met de klant

  • research

  • quick prototyping

  • feedback verzamelen van de klant

  • visual design uitwerken

  • implementatie in browser prototype

We wisten dat goede foto’s belangrijk waren in het inspiratieluik, dus daar wilden we mee starten. Niet met dummy- of stockfoto’s maar met echte stills uit de video’s van het Jeroen Meus televisieprogramma. Zo gebruiken we altijd liefst echte content om een zo reëel mogelijk beeld te schetsen, én om eventueel zelfs feedback en richtlijnen te geven naar het productiehuis over hoe fotografie op de website anders werkt dan op televisie.

Daarnaast ondervonden we dat de homepagina idealiter regelmatig nieuwe recepten naar boven mochten brengen. We hebben uiteraard elke weekdag een nieuw recept op de homepagina, maar we konden ook meer gaan inspelen op de seizoenen:

  • barbecue recepten bij een hittegolf

  • aspergebereidingen in april en mei

  • gerechten met pompoen rond Halloween

  • feestmenu’s rond kerstmis en nieuwjaar

  • wildgerechten in de herfst

  • ….

Custom designed icon-set

Deze seizoensaanpak of meer ingredient-gerichte focus, leende zich idealiter tot een icon-set in de stijl van Dagelijkse Kost. Fotografisch materiaal werden gebruikt voor de recepten, maar we hadden dus nog andere visuele elementen nodig om het thematische aspect te benadrukken. Hiervoor ontwierpen we een hondertal SVG-icoontjes die flexibel op de homepage kunnen gebruikt worden.

thema icons

Custom designed icon set voor Dagelijkse Kost

Personalisatie: user testing & laagdrempelige onboarding

In de research-fase hadden we vastgesteld dat veel mensen nog steeds recepten afprinten, daarna perforeren en in plastic mapjes bijhouden. Daarvan verschoten we dus, wij als digital designers en developers in ons papierloos kantoor. Uiteraard is dat geen probleem dat moet worden opgelost (integendeel: we hebben de print-versie van een recept daarom nog beter gemaakt), maar als duurzaam en ecologisch bedrijf wilden we hier toch ook een digitaal alternatief voor bedenken.

Wat onderzochten we hier vooral?

  • Willen gebruikers bepaalde recepten liken, favoriten, of starren?

  • Doen ze dat bij recepten die ze al gemaakt hebben, of omdat ze die nog willen maken?

  • Willen ze ook extra eigen annotaties toevoegen bij recepten, zoals ze op papier doen? En willen ze dat bij elke stap in de bereiding doen, of eerder algemeen?

  • Willen ze hun persoonlijke selecties van recepten delen met vrienden of familie?

  • Willen ze graag verschillende lijstjes als persoonlijke selectie maken, of is 1 algemene favorietenlijst voldoende?

Hoe meer acties we willen aanbieden, hoe complexer de interface uiteraard wordt, en hoe groter de uitdaging om de interface zo clean en simpel mogelijk te houden. Dus het is hier zaak om een goede balans te vinden tussen enerzijds maximale flexibiliteit voor de gebruiker en anderzijds een consistente eenvoud.

De uiteindelijke assumpties hebben we omgezet in clickable prototypes en voorgelegd aan een 6-tal gebruikers, samen met de expert digitale toegankelijkheid Marc Walraven van VRT.

De schermen en functionaliteiten die het best aansloten bij de wensen en noden van de gebruikers, werden verder gefinetuned en geoptimaliseerd.

dagelijkse kost - lijstjes

On-boarding met het VRT gebruikersprofiel

Als laatste onderdeel van deze fase was uiteraard het onboarding-proces. Want om een site te personaliseren en je gegevens over verschillende toestellen beschikbaar te maken, moet je uiteraard geregistreerd en ingelogd zijn. Het doel is daar om zo snel en gemakkelijk mogelijk gebruikers ingelogd te krijgen.

Gelukkig konden we gebruik maken van het algemene VRT profiel voor een eenvoudige registratie- en loginprocedure, maar toch was het hier nog een belangrijke oefening om te kijken wanneer in welke stap op de website van Dagelijkse Kost exact gingen personaliseren:

  • Kan je bijvoorbeeld een recept bewaren, zonder ingelogd te zijn?

  • Toon je op de website de persoonlijke functionaliteiten voor niet-ingelogde gebruikers?

  • Hoe toon je elke bezoeker van de website wat de voordelen zijn van in te loggen?

  • Hoe voorzie je op verschillende plaatsen van de website voldoende triggers om in te loggen zonder frustratie op te wekken bij gebruikers die niet willen registreren?

SEO - Beter scoren op Google

Last-but-not-least: Search Engine Optimization.  

Een site visueel en technisch in elkaar steken is één ding. Bezoekers trekken is iets anders. Daarom namen we de specialisten van Wiseo onder de arm om ons hierin te assisteren.

We stelden vast dat er door middel van React-javascript en client-side rendering verschillende stukken content niet zichtbaar waren voor zoekmachine crawlers. Hierdoor telt deze content dus niet mee voor SEO en worden bepaalde links niet gevolgd. Dit zijn voor Google geen links die gevolgd kunnen worden om linkwaarde door te geven.

Daarnaast ontbraken er nog specifieke themapagina’s. Eens een gebruiker op de website zat, vond hij z’n weg wel, maar we lieten nog een heel potentieel aan gebruikers liggen die themagericht gaan zoeken op zoekmachines. Er wordt bvb gezocht op woordcombinaties “pasta recepten”, “vegetarische recepten”, “ovenschotel’, etc...

We hadden wel seizoensgebonden thema’s zoals wildseizoen, veggie, pasta,... waarvoor we de iconset hadden ontwikkeld. Maar die werden niet allemaal ontsloten op een vaste plek, waardoor Google deze dus ook niet allemaal indexeerde.

Daarom implementeerden we een thematische footer onderaan de website, waar directe links staan naar deze thema’s.

Dagelijkse Kost | SEO Footer

Dagelijkse Kost | SEO Footer

Een andere factor die de clickthrough-rate op Google bepaalde was het ontbreken van een foto bij elk recept. Een klein stukje code aanpassen kan ervoor zorgen dat ook in de content teaser een foto van je recept wordt getoond. Ook daar hebben we dus onmiddellijk impact op gezien.

dagelijkse kost search results Google

Zoekresultaten: nu met foto, verwachte kooktijd en gerelateerde zoekresultaten

Samenwerking tussen Wieni & VRT

Bij projecten van deze omvang en met deze ambities, heb je de juiste partijen nodig. Wieni is hierin natuurlijk maar een deel van het geheel: je hebt de belangen van VRT algemeen, de ambities van zender Eén specifiek, en de content van het productiehuis Hotel Hungaria die met Jeroen Meus het programma effectief maakt.

Daarom heb je een goede Product Owner nodig die het eindproduct bewaakt, maar ook het proces faciliteert. Een centrale figuur die brainstorms opzet waar nodig, die business opportuniteiten ziet van het digitaal product, die overleg regelt tussen de verschillende partijen, die de algemene kwaliteit bewaakt, die briefings en backlogs opstelt, en die de sprint-planning mee opvolgt.

Die product owner is Ward Meremans, en gelukkig voor ons is hij altijd de juiste man op de juiste plaats. Iemand met relevante ervaring in digitale projecten, en vooral in dit project een meerwaarde. Iemand die een duidelijke jaarplanning maakt, duidelijk meetbare doelen opstelt, en vooral ons als agency beschermt tegen "iedereen met een leuk idee".

En wat denkt Ward zelf over dit project?

Toen we met Dagelijkse kost bij Wieni kwamen had ik één hoofddoel, de performantie verbeteren op mobiele toestellen, want die was echt erbarmelijk. Ze zijn hier onmiddellijk mee aan de slag gegaan en hebben de afgelopen jaren verder gewerkt op usability, accessibility, SEO... We hebben nu een product waar we fier op kunnen zijn, en ik hoop dat we de komende jaren elkaar kunnen blijven challengen op de verdere productontwikkeling, want daardoor krijgen we een steeds beter en performanter product. Bedankt top team!

Ward Meremans - Product Owner Dagelijkse Kost