Microsoft
Client
Technology
Industry
Web Design
Project Type

Best by Chefs Website

Best by Chef is an interactive online experience for food lovers, designed to showcase Internet Explorer 10.

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.

best by chefs website photo

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.

best by chefs website ui design

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

microsoft best by chefs microsite code

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.

best by chefs website design elements

The Result

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.

best by chefs website design

Experience it live

Tell us about your next project and receive a free consultation

Through a short initial consultation, we can help you create detailed requirements for your digital project. Our experts can help you save costs, avoid common pitfalls, and utilize the best methodology to achieve your objectives. Get in touch to discuss your project today.

Thank you for contacting us. We will reach out to you within 24 hours.
Oops! Something went wrong while submitting the form.