“Information Architects are some of the best digital user interface designers and web typographers I have met anywhere.”
— Wolfgang Blau, former Head Digital Strategy, the Guardian
Operating in the UK, US and Australia, The Guardian is one of the world’s leading news outlets both on- and offline. When they contacted us in 2014, theguardian.com counted more than 17 million readers per month. Their site was widely used and successful. They were planning a major relaunch and from speaking to users they knew that it could be easier to use. The problem their talented team wasn’t quite able to crack was how to build a responsive information architecture that—on one side—was able to cope with the end of the home page and—on the other—was flexible enough to support not only multiple viewports but different content prioritization depending on geography, audience, and time of the day.
When the Guardian started designing their site in 2013, they challenged themselves to think of new ways to improve the discovery and promotion of their content. All their section pages, article, live blog, gallery and video pages had to be reorganized to help users discover information they didn’t know existed but would interest them.
A central aspect of the redesign was that for most users, the main entry page was no longer the home page but an article page they discovered through Social Media or a search result.
Another aspect was that the Guardian had an English, an international, an American and an Australian edition that had to serve the same content with different prioritization to different time zones. Solving this kind of problem typically requires a view from outside, as internal teams, no matter how talented they are, often can’t see the wood for the trees as they feat getting caught up in political fights before thinking about simple solutions.
As part of the product discovery process, iA ran several ideation workshops with leads from editorial, design and commercial departments. Supporting the workshops, iA coded ad-hoc concept prototypes as proof of concept.
During these workshops, the Guardian’s new site structure came to life. At the heart of the structural reorganization was iA’s container model. The different solutions that came up were discussed and refined with the UX team. Then they’d be tested on the beta site that was running with different A/B instances in parallel with the old Guardian site.
Information Architecture: The Container Model
Visually, a container is a horizontal element that scales independently of the page it is on. Structurally, a container offers one closed block of information that can be combined into a page. Container elements that every Web designer knows are header and footer. We extend the principle behind header and footer to every element on a page. In consequence, every horizontal element on any page can be reused throughout the site, independent of layout.
In order to make this possible, containers span the full page width and scale responsively. The container model helps defining what appears on a new front, article or vertical page independent of visual design. Agreeing on a clear top to bottom prioritization speeds up editorial processes as there is no space for discussion about visual hierarchy. If the relative importance of content is clear, the audience will more easily understand the underlying logic.
With the container model we move away from thinking about specific pages on the site and how to “fill” their “layout” with “content”. Instead, we start with the most specific piece of information, which in the case of a newspaper is usually the article. Whether we were structuring the homepage, a section page like football, or a live blog, the article was regarded as the gravitational center through which readers came in and eventually left The Guardian.
The logic of placing teasers on overview pages followed a simple model of grouping and prioritization.
How containers can work across the homepage, fashion section and an article page.
The order of containers stacked one above the other follows a prioritization according to business goals and audience preference. To find the perfect balance between business goals and user expectation, we test, measure and optimize the efficiency of the prioritization.
The container model allows distributing content quickly and easily across multiple page types. A container such as “most popular” can appear on the homepage, an article or a live blog in different positions, however it only needs to be built once and it will work everywhere.
iA’s container model opened the doors to a flexible, layout independent information architecture. In the same way, that a UI library provides you with the design elements as modular building blocks to construct any visual structure you need, containers provide you with the architectural building blocks that a fluid medium like the Web requires.
Validation and Result
Do users want to consume news in this way? Does it appeal and have value for them? Can this model be supported by editorial?
The Guardian team set up multiple research activities, lab sessions using early prototypes in the UK and US, as well as a larger remote evaluation with 500 users. They did lab sessions with different pages, each time quickly iterating.
As a result, blended containers were a vehicle which exposed content that felt both unusual and interesting to the user, supporting both existing patterns of behavior and spurring new patterns.
iA’s container model is in place on the Guardian’s new site and apps, and blended containers give the Guardian’s editors more flexibility in how they think about their texts. By experimenting with what does and doesn’t work, the Guardian continuously improved the sites’ performance.
The Guardian’s ability to experiment with prioritization and structural modularity is almost unlimited. They believe this flexibility will allow them over time to create a great experience for their audience on any device.