24Kitchen is one of the most popular platforms on food, cooking and lifestyle. LimoenGroen en SchaapOntwerpers were contracted to create an entirely new online experience for 24Kitchen, allowing for quick access to thousands of healthy recipes and inspiring cooking. With FOX News Network and The Persgroep Netherlands backing this pan european TV format, it was a feast work on this project.

24Kitchen serves 5,1M viewers and approx. 650K website visitors each month. Through its popular TV channel, its website and social media, 24Kitchen inspires many people with daily recipes, healthy lifestyle and cooking. It was paramount to maintain these loyal viewers and visitors, while the website itself got completely redesigned. With the new design, a giant leap forward with regards to user experience was achieved. Also, the ability for content editors to enrich the huge video tutorial database daily highlights was a massive improvement.

Video: https://www.youtube.com/watch?v=fTKfSb7knaw

Jamie Olivier cooking
Why Drupal was chosen: 

The previous 24kitchen.nl website relied on Drupal and the contractor preferred to stay with the familiar CMS and its capabilities. In our pitch we presented some of the community modules relevant for the 24kitchen.nl website, such as Search API SOLR (for related recipes), Fast Autocomplete (for a fancy and user-friendly search dropdown) and Paragraphs (for flexible landing pages).

Describe the project (goals, requirements and outcome): 

Using the open source content management framework Drupal, the clever search capabilities of Fast Autocomplete combines the extensive database of video’s with the recipe’s database. Thousands of recipes can be retrieved, which are enriched with relevant suggestions based on preference and user parameters. No user data was lost, so existing users maintained their preferences and were able to continue bookmarking favorite recipes.

By linking with Fox’ Electronic Program Guide (EPG), the browsing experience is seamlessly integrated with the 24Kitchen TV channel, cross channeling fans from the website towards corresponding TV shows, and back. Integrating advertisement features within the new website, allows for Fox’ marketeers to cross-sell partnering content alongside their own. This way 24Kitchen evolved into an up-to-date marketing platform for Fox, delivering added value to retail partners (e.g. Plus supermarket franchise).

By using Paragraphs for flexible lay-out components, new pages and formats are created by content editors without our help. One other highlight is how we disclosed the high value content through smart widgets, allowing other websites to directly query AND present content from the 24Kitchen within their own website. AD Koken & Eten, the cooking part of an important Dutch news website, is the first platform to daily reach potentially 12M people. The widgets enable those people to search for something delicious to cook, right from the news website.

The new website integrates seamlessly with the 24Kitchen television format, which is beneficial to its marketing- and sales. There is new room to work with partners on campaigns and cross-selling through multiple national news and lifestyle websites. The Recipes API opens new possibilities for content syndication and serving content to users when relevant (e.g. The Widgets and Facebook recipe bot). The new website has turned a gradual decrease of pageviews: after 3 months it already achieved a 15% improvement over its previous year. 900.000 food lovers are now responsible for 3 million pageviews. By shifting focus from recipes to a broader food lifestyle content palette, 10% of its pageviews make up for side-stories and inspiring people on a daily bases.

For six years 24Kitchen inspires people in The Netherlands and in Europe with good food and everything related. The renewed 24Kitchen.nl makes it super easy for people to find the most delicious dishes and helps them prepare them with clear tutorials, videos and recipes. But there is so much more on the website when it comes to cooking, such as interviews with the master chefs, useful tips and cooking techniques. That’s why 24Kitchen.nl still is the no. 1 website for food lovers.

Kirsten Gelissen, Channel Director 24Kitchen, Fox Networks Group

Technical specifications

Drupal version: 
Drupal 8.x
Why these modules/theme/distribution were chosen: 

We use search extensively. The combination of Search API, Search API Solr, Search API Autocomplete, Facet API, Facets Pretty Paths and Fast Autocomplete proved to be a great way to offer an amazing search experience. To be able to find a good recipe from 5000+ records is challenging, but Search API offers a lot of configuration. We created some custom Views Contextual Arguments to show relevant recipes based on matching taxonomy terms and ingredients. These are used as flexible argument for the More Like This feature of Search API Solr.

Paragraphs is used to create an amazing editor experience. The possibilities of this module, in combination with the full media set (Media Entity Browser, Crop API, Breakpoints, Inline Entity Form, offers the editor amazing flexibility. We created several paragraph types, such as ‘Text’, ‘Text with Image’, ‘Video’, ‘Link list’, ‘Image carousel’, ‘Embed code’ and more.

Apart from Drupal we also used Ember.js on specific parts of the website to create the search dropdown on top of each page, and for the search filters on the search results page. For example, when you search on water, you will see a mix of 4 things: first 3 autocompletions for water (e.g. watermeloen), then 3 recipes with water, then 2 inspiration pages and finally 1 tv-program. This order (3 autocomplete / 3 recipes / 2 inspiration pages / 1 tv-program) is always displayed like this. At last, a button to the complete search results is shown. While the display is created in Ember, the results are fetched from Drupal. For the first part, we used Search API Autocomplete. For the other parts we used the Fast Autocomplete module. This module, developed by LimoenGroen, caches search results in JSON on the file system, making recurring searches super-fast.

The search box powered by Ember and Fast Autocomplete

A combination of Flag and Voting API is used to bookmark and vote on recipes. Visitors can register themselves and use the platform to make their own list of recipes.

Future development of the platform involves personalisation based on user profiles, better suggestions and integrations with local retailers (to order ingredients needed for a recipe).

Community contributions: 

During the 24Kitchen project, a core patch was addressed, allowing contrib modules to use node revisions without loading the full node. In order to make Facets Pretty Paths compatible with Redirect, we patched it accordingly. We also release a module to make it easier for editors the find referenced content using an entity reference field widget, called Smart Entity Reference Selection.

For previous projects we contributed modules such as Twig Field Value, Extra Field, Fast Autocomplete, Config Exclude, Real AES and many others.

Organizations involved: 
Project team: 

Team members who cannot be referenced: Sutharsan, Marty2081 and BarisW.

Our friends seanB and Martijn Eerens helped us with this project with their knowledge of Content Migration and Ember.js. The design is done by our partner SchaapOntwerpers.

Also part of the team were FOX News Network and De Persgroep Nederland.

The 24kitchen homepage
The 24kitchen recipe detail page
Sectors: 
Community
Entertainment
Media
Publishing