Modular, scalable and future-friendly Chef.se

Chef is a modern media company that is responsible for the creation of the Nordic region’s largest magazine on leadership, both in digital format and in print. Each month, Chef reaches more than 300,000 executives through digital channels and 153,000 executives through the print version of the magazine.

However, it doesn’t stop there. Chef also organizes several major events every year, holding networking events for executives and constantly develop new types of editorial content and new media businesses on different platforms.

Over the last two years (before Äventyret became its digital partner), Chef was the recipient of several awards. The most recent was in March 2017, when Chef.se was awarded the accolade of being one of Sweden’s 100 best sites. So obviously, the task was super exciting for Äventyret: Why waste time on simple challenges when you have the opportunity to work with Chef and makes something that is already good, even better?

Summer 2016 — Sealing the collaborative deal

When Äventyret first met Chef  they were looking for a digital partner rather than a new website. However, they also had a handful of bug fixes that had to be fixed for the interface of their site at the time, but the main ideas were around new functionality. We initially chose to address the needs of Chef in the following order:

1. Fixing interface bugs in the website at the time
2. Develop new strategies and concepts in collaboration with Chef

However, after loading/submitting the old site, we added plans.  The project Website Bug Fix needed to grow in order to address the following needs:

• Greater editorial freedom for Chef to administer its own website
• Implementation of low-hanging fruit for conversion and user personalization
• A refresh of the design and style
• A module-based interface (to facilitate rapid iterations and implementations of future functions)
• Code releases and a well-thought out work flow for developers
• Better performance

No one wanted to divide the work into two phases any longer (bug fix and concept/strategy work) as we initially thought. Instead, it was reasonable to collaborate on development and concept work in a series of projects and iterations, where the launch of the new Chef.se website was the first in line.

Fall 2016 — Free range vision

Äventyret and Chef used the fall season to draw up and plan the Chef.se of the future.  Chef had many clear ideas and questions about new features.  Äventyret placed no restrictions on the work so that it would be able to build in a first launch.  Instead, we placed value on understanding what would be reasonable in two-three iterations, irrespective of budget and initial aspects of time. There were several advantages to this:

• Some features were taking advantage of other features from the perspective of implementation.  If several features required similar solutions, we may choose to add features earlier or postpone the addition of related features.
• This would make it possible to plan sub-projects, versions and iterations.
• The project gets a clear visionary direction, irrespective of whether all means are in place to implement all ideas at once. The first iterations of a product or service are the most important, as these form the foundations.  Some extra time must be taken, while the smartest features can spice up the foundation work later. But keeping the buzz alive in the work group required the vision of the full product from the start.  

The deliverables above were all from prototypes in Html+Css+Js, Invision-click-through-outline-prototypes, old school raster images and wireframes. Together, they would provide a vision of interaction principles, communication concepts and form styles for the new Chef. se.

Spring 2017 — Growing pains, a.k.a., the “Scope Document”

In order to be able to launch a new site at the end of May, we needed to take a step back from the brainstorming meeting in March and outline and reflect on how to prioritize the new features.  Technical planning had been started in parallel with development of the vision and now required a defined scope.

Äventyret produced a specification of what should and could be managed before June, on the basis of the earlier offer made and development of the vision. Chef and Äventyret revised the specs together on two separate occasions prior to sign off. With this behind us, it meant that the project could take a new turn and head to Production!

Cause and effect

In parallel with a new website, Chef, Äventyret and Odyssey planned the management of the Chef user data. The goal: Chef will collect all customer data in a master database, which will provide even better customer service in all points of contact between Chef and its subscribers.

The launch 31st May 2017

The new website was launched with the following new features:

• More efficient sign-up flow for account creation and purchasing products
• Stable development flow in which it is easy for developers to iterate, hand over and monitor coding work.
• It will be easy for Chef to leave Äventyret (if Chef so wishes). The code base is easy to take over and is not staff/agency-dependent in the same manner as it was previously. Chef now has editorial options for the creation of content without having to ask Äventyret for help, which is a benefit for both Chef and Äventyret. Example: CV School, where Äventyret was asked to create a movie list page, but instead we developed a system enabling the creation of lists and content population in the manner desired.
• Easy to set up measurement points yourself
• Dedicated events site
• Easy to set up campaign sites
• Communicating and personalized paywalls
• New advertising format
• Layout-agnostic modules make it easy to create templates based on content.
• Revitalized form

Each of the points above have been well worth implementing, but the biggest gain from the launch is that overall, the points above provide a good base for the iteration of new sub-projects, to efficiently drive and reflect Chef’s digital development.

Technical solution

Summary of the technology that made the new Chef.se possible: 

• Herokus Pocus: Äventyret’s own boilerplate and deployment solution for WordPress with Git and Heroku as the linchpins.
• Development, staging and production environments on Heroku.
• Composer: To guarantee the same development environment, we wanted to release all plugins and WordPress versions via composer (and therefore, Git).
• Jaws DB: The database solution that we eventually chose for Heroku.
• Comet Cache Pro: Cache-plugin with support for SALT and logged in users.
• Proprietary plugin for Apsis and Titeldata. For example, Chef manages it subscriber versions and offers via Titeldata. To sync with Chef.se, we need to retrieve the current offers from Titeldata in WordPress admin, for Chef to choose when they want to communicate these. The plugins also manage the paywall logic.
• Auth0: SSO with support for WordPress. The solution was used for a long time, but was dropped as it caused trouble for the most important Chef.se sign-up flow with Titeldata.
• Network sites for richer event pages
• ACF Pro: Dynamic content fields and repeaters make it easy for Chef to create layouts for the interface of the building blocks itself that we had planned together.  The building blocks can be thought of as like a Lego kit – they are constructed so as to fit together, irrespective of order.  The contact largely determines which module will be used.
• Formable: A proprietary product by Äventyret for building and distributing forms. Cloud-based solution.
• Amazon S3: To manage media on Heroku. The images are managed in the Chef theme with the proprietary Äventyret plugin Make it Srcset to support the srcset attribute sizes and be able to manage images outside the_content() and the_post_thumbmail().
• We use Cloudflare as CDN.
• Migration plan for old content: The site was moved from a stationary server to Heroku, where all deployments create new instances.  This also places requirements on the managed of uploaded media.  All content is stored on Heroku in an external database. With WordPress, it is usual for the files to be stored on the local server, and so the solution was also on the previous Chef site version.  The solution was to relocate all media to a CDN. Unfortunately, it is harder to update the content that links to this media in thousands of posts and many years of published content. For old media, we used a simple URL rewrite rule (.htaccess), which forwards requests (301 redirects) to the newly migrated media library in the Chef CDN.
• Amazon proxy: For getting the IP number for Heroku. When we pointed CNAME at Heroku, the Chef DNS provider had not provided support for pointing to only one name. After a tricky patch, we solved the problem in this way.
• Profile Cloud: A tracker service from Apsis that resolves personalization for users that are not logged in, and connects data for users that are still not logged to their accounts once they create one.  Configured by Odyssey.
• Global menus via switch_to_blog(): We thought about using the WordPress rest-API for this, but it was easier to do a comparison to site a user was on, change blogs, echo the global menu and then switch back. It can be done in this way as the menu on the main site is always inherited by network sites.