Intelligent Life is a bi-monthly cultural premium magazine published by the Economist Group, describes its coverage as "the arts, style, food, wine, cars, travel and anything else under the sun, as long as it’s interesting".
The Intelligent Life digital presence was failing to do the print edition justice and it took multiple amounts of effort to create each individual piece of content for 3 different types of devices. The project aim was to mimic the style and grace of the print edition online without it being a real challenge for The Economist team to create content. The site also needed to provide the functionality for the editors to manage the web and app back-ends as one. Also, we had to provide the possibility for the editorial team to publish great imagery on web and app similarly to the print edition, as this is a key element of both their print and online presences. By creating a fresh, modern UI and optimising the structure, our aim was to increase the number of visitors and foster longer periods of engagement with the content.
The Economist has been using Drupal for a long time, including for the previous version of the Intelligent Life magazine website. Besides being committed to Drupal, the editorial team's familiarity with Drupal CMS that ensured they learned to interact with the new site quickly, in spite of a total rebuild.
From a development point of view, the power, flexibility, and amount of “out of the box” features meant Drupal was the prime CMS candidate for this project. Intelligent Life has a lot of content, required traditional user authentication, and needed to be easily altered by using contributed modules. Drupal had the capabilities of meeting all the client's requirements, including custom editorial workflows, custom publishing options and web features, and provided a solid base for future website improvements and maintenance.
Optimising website structure
We started the development with a team-wide meeting, including the Intelligent Life editorial and digital department. We discussed the project aims, current website statistics, brand definition, and painful points of the previous solution.
After reviewing the existing IA structure and investigating existing content types, we started to work on the new, optimised structure of the website. Our focus specifically was on creating more intuitive user experience and content management workflows for the future website and the app.
Workflow
The editorial team for the Intelligent Life magazine were previously preparing the digital content no less than 3 times: once each for their website, tablet app and mobile app. With the new website, Drupal is used as the primary source for all digital content, publishing it to the website and making it available as a separate app through PugPig.
Content is formatted using CKEditor, then delivered to the app using a custom theme we built using the HTML and CSS provided by Kaldor. A separate fully responsive theme is used for content displayed on the website.
Using Drupal’s flexible permission system, we developed a simple workflow to allow the team to have content published for the app, while having the ability to delay publishing to the website at a later date.
Design and UX
In print, the Intelligent Life experience is a rich immersive one, where the extraordinary quality of the writing and photography are reinforced by the luxurious design and feel of the magazine.
To match the high-end reading experience of the magazine, our designer created a modern, mobile-first design. The designer used atomic design with a focus on beautiful imagery to ensure a pleasant user experience, regardless of device or screen size.
For the web theme we used some of the best practises from the front-end world: we used a Gulp-based workflow with Sass for our CSS, and used Hologram and SassDoc for our documentation.
Migration
A full data migration was necessary in order to fully replace the old site with keeping the content. However, since it was a standard Drupal migration from a previous version, we encountered several challenges. The legacy system had been loose on structuring content. The new system applied special fields that were merged before into large texts - including hardcoding links and in-site resources.
We wrote a custom HTML parser engine to be able to transform the old WYSIWYG text to the new version: for example, it would grab snippets out of the text for the new dedicated content fields, and fixed the leftover HTML. This saved content editors a lot of time by ensuring they would not have to amend legacy content.
Project outcome
As previously mentioned, the editorial team would have to format content three different times, making content creation an onerous process. The new Drupal website addresses these challenges by making all site content available as a separate app through the Pugpig mobile publishing platform.
Key benefits of the project:
- App and web content are managed as one
- Cross-platform development
- Greatly enhanced imagery
- Mobile first, fully responsive website
- More engaging user interface
Our initial core team consisted of a designer, a Drupal developer, a Lead Drupal developer, QA tester and a Project manager, but we also had some extra site builder and themer resource for the last sprints. During the whole development lifecycle we worked closely together with the Intelligent Life Product Owner, editorial, adops, analytics and digital team of The Economist. In case of Pugpig integration and app development tasks we collaborated with the Kaldor team.
