Olam International - Code Web Development

Olam International

Olam International is a leading agri-business operating from seed to shelf in 70 countries, supplying food and industrial raw materials to over 16,200 customers worldwide.

The Brief

To redesign and manage Olam International's global website. To provide new architecture and roll out across mobile, tablet and desktop devices. To create an engaging and interactive experience in line with the company's new brand and personality.

Our Solution

We overhauled the CMS, and provided a custom built, modular system to allow content managers to reshape pages and add and amend elements. We redesigned the interactive components to give them a modern, engaging feel and implemented custom code to reduce page load times. We implemented custom Google maps to show the breadth of the company in an interactive way, and reworked the highly trafficked resources area with a new JavaScript driven system that delivers a wealth of content in an enticing experience.

The Result

The new Olam website is a huge success! Popular with visitors and content managers alike, it offers a wealth of information delivered across devices in sub second load times. It makes use of a wide range of modern development techniques to showcase this global brand.

Ben and his team at Code have supported Olam for a number of years, initially redesigning and launching a responsive site fit for our global business, going on to reskin it with the new branding and working with us to ensure ongoing maintenance and improvements.

The team offer a reliable and personable extension to our in-house small team, they’re a pleasure to work with and always have a solution to our challenges, irrespective of scale, complexity or timeline.

Suzanne Harvey, Global Brand Marketing Manager

Example Pages

1/4

Home Page

We needed to keep the home page clean and clear, but get across a lot of information. We added a classic slider, a realtime share price feed and some attractive teasers to encourage further investigation.

2/4

Key Facts

If you've had a chocolate bar this week, chances are you have eaten an Olam product. With statistics as great as these, we needed to provide a way to get them across in an engaging way. Olam can manage all aspects of colour and text via the CMS.

3/4

Investor Relations

The IR page is crucial, so includes a more detailed share price feed, and lots of easy to access key information.

4/4

Timeline

Olam has a storied history, so to celebrate their 25th Anniversary we put together an interactive version of their company timeline for web site visitors to read.

Over 3 phases, we took the existing site and reduced the average load time by over 90%, while increasing the functionality many times over.

Layering Functionality

1. Solid Architecture
On top of the already excellent WPEngine hosting service, we added a hand built completely custom theme, with updates and changes to improve the admin interface. We then increased page speed even further by caching the output of common database queries. We built the page layouts on the skeleton css framework to enable responsiveness to be easily added.

2. Custom Post Types
Using Advanced Custom Fields we created a variety of custom post types for Olam and a unique Content Modules interface which enhances the WordPress widget style of administration to allow for custom content to be used across multiple pages from within the page editing interface.

3. Modular Interface
On top of this modular system we created the ability to add Content Pods on a page by page basis. Like traditional widgets, these pods are instanced versions of content, but can be configured during the page editing experience. These can be re-ordered and moved at any time, for an extremely flexible CMS.

Developers
Corner

Olam's website is reasonably large, spanning many thousands of pages. The nature of the website hierarchy means we need to load hundreds of links into the top navigation regularly, which was slowing the site down. Speed was key to this project, so on top of WPEngine's built in caching system we implemented a method of saving key bits of rendered HTML in the WordPress transient cache as well, so that instead of recreating those items every time, we only created them when they changed. We then implemented actions in the admin system that automatically deleted the relevant transients whenever an update occurred. This allowed us to load the HTML for a 300+ item menu is less than a few hundredths of a second, but not restrict the content managers from easily updating their site.

WordPress

We made use of WordPress's built in set_transient and get_transient functions, extended by our own function to get/set just the transients for a specific post dynamically. Then on update, we used delete_transient to ensure the cache never got stale.

Deleting transients on update

In the functions PHP file, we added an action to the save_post and deleted_post hooks, to call our custom transient deletion function

// clears the menu and updates cache whenever a post is saved or deleted
function delete_cache_transient( $post_id ) {
	// Delete 'site-wide' transients
	delete_transient( 'cached_all_cwd_pages' );			
	
	// Delete post/page specific transients
	$transient_name = 'cached-tr-post-' .$post_id;
	delete_transient( $transient_name );
}
add_action( 'save_post', 'delete_menu_transient' );
add_action( 'deleted_post', 'delete_menu_transient' );