Best by Chefs for IE Arabia

Overview

Best by Chefs, the product of a collaboration between Al-Bayan newspaper and Internet Explorer Arabia, is an interactive online experience for food lovers, designed to showcase the beauty of the new Internet Explorer 10.

This was a project we were involved in at every step, from initial creative strategy to curating the site content, designing and developing the bilingual HTML5 site, and incorporating social media elements. The initial challenge was to create a highly-engaging online experience that would showcase and promote IE10.

Strategy

We came up with the idea of an online lifestyle app that would have broad appeal for target groups in the Middle East, including UAE, KSA, Qatar, Egypt and Morocco. We wanted to wow users with a simple-to-use yet impressive demonstration of the new qualities and possibilities of the browser – fast, fluid, perfect for touch – but also create an app that would also be a meaningful addition to the online user's daily life.

Content

The curation of the site content (recipes and images) was a major aspect of the project, requiring 500+ recipes. We managed this by partnering with Shamlola, a leading cooking site in the Middle East. Users can also submit their own recipes and images so new content is user-generated.

Development

The HTML5 site was delivered in both English and Arabic, and deployed to a further 6 microsites for partner media outlets Al-Bayan, Alriyadh, Al Sharq, Ahram, Hiba Press, Emarat Al Youm. This called for a carefully coordinated programming effort and quality assurance plan to ensure the app worked perfectly across all sites.

The Design

The Result

We designed a highly interactive experience which taps into current lifestyle trends – primarily food but also visual communications and social media sharing.

The site is designed to be a 'game-changer' on all levels. As a recipe site it's a departure from the way recipes are usually presented. As an interactive IE10 experience it's a first that is designed specifically for the Arabic markets.

Geometric panels

Geometric panels that display the functional elements in a distinctive way without detracting or distracting from the focus of the page.

The swipe bar

The swipe bar which allows the user to move smoothly forward or back through the recipe steps.

Iconography

The chef iconography used in site graphics and other creative assets.

How it works

The Result

Users can access the site via the specially created Facebook tab at IE Arabia's Facebook page, and a banner link at partner homepages.

Users select Arabic or English and can then navigate (drag, drop, swipe, click and tap) through the site to:

Browse recipes from Shamlola or 'Community Chefs'
View recipes in full or step-by-step
Like, Tweet, email, bookmark, print or send recipes to a calendar
Heart (vote for) favorite recipes
Post comments to Facebook via a site tab, that will show in the Facebook tab
Submit recipes
Share the site
Download IE10

The process— technical notes

Technical Notes

We began by building the interactive grid animation central to the overall concept.

We used CSS3 to rotate the page and to animate content with hardware accelerated transitions, for better performance than standard transitions. The site uses AJAX to load pages, with an option provided for users without JavaScript enabled to reload pages without AJAX. This way the site can be accessed by all users but is still optimized for search engines.

The Result

More than a benchmark site, Best by Chefs is a 'game-changer' digital experience that successfully achieves multiple objectives.

The site supports both global and local marketing strategies and further positions Internet Explorer Arabia, Al-Bayan and all brands involved as engaged, innovative and 'in-touch' global leaders.