Nick Haley is Principal at Adaptive Lab. Previously, he was Director of User Experience at the Guardian News & Media.
IA Summit 2015
Topic(s): case studies, content modeling, and responsive design
The information architecture of almost all news sites has remained the same for a long time, the formulaic approach often reflecting the internal structure of an organisation rather than how people actually think about content. In addition typically a homepage or section page will present content in a way which mirrors the navigation.
When the time came to redesign The Guardian’s core website and apps we challenged ourselves to think of new ways to improve the discovery and promotion of our content, not just on the homepage, but all our section pages, articles, live blogs, galleries and video pages.
Through a process of rapid iteration we came up with our innovative new container model and what we call “blended content” a radical approach to IA for the Guardian. Our blended approach has freed our content to appear anywhere in any combination.
Nick Haley: This is Malcolm McLean, and he was the inventor of container shipping or what’s known as containerization. In 1956, the first shipping container left the port in Jersey bound for Houston. From that moment forward, his invention led to a revolution in shipping. He changed the way that people thought about moving large amounts of goods around the world.
What I’m going to talk about today is “The Guardian’s” container model and blended content concepts have changed the way that we think about content and how we manage the huge amounts of content that’s created on The Guardian every day.
Rather than cargo, we have content, and we write a lot of content every single day. On an average day, we write around 500 pieces. The constant challenge when you’re a news organization is how do we promote all of this content effectively and get people to find and discover all of those different pieces of content, both on and off the site and for new and existing users.
This is where we’d got to in 2012. This was our solution to the problem three years ago. Like a lot of news organizations, we had a separate desktop and mobile site. There were different navigation systems. The mobile site didn’t even have the same content that was on the desktop site, and neither were particularly easy to use.
It was a very inefficient way to operate. Everything had to be built twice. Nothing could be reused. There were no consistent design patterns across the two sites. Both of the sites were expensive and also broke a lot.
Famously, our mobile site, during our reelection of Obama during 2012, just fell over and crashed before the result had been announced, which from a user experience perspective, is not the best experience you could hope for from a news site.
Also, we could see that the world is changing. Like a lot of media sites, we could see the huge shift to mobile that, in fact, everybody else could see, as well. We were slightly behind. I think the BBC were probably ahead of us in terms of their shift to mobile.
Back in 2012, we were still around 70 percent desktop traffic, but we could see the direction of travel, and we could see when that point was going to switch. Actually, last summer, in July, we switched to becoming a mobile-first organization.
Back in 2012, we made the decision to go responsive and also create a new suite of smartphone and tablet apps. At the start of the project, we started looking at user needs. We really wanted to identify why do people come to The Guardian at different times of the day on different devices in different contexts.
We did a whole series of interviews, looked at lots of analytics, brought lots of people into our UX lab at The Guardian. We boiled this research down into what we call modes of consumption. These aren’t separate personas. They’re not different people, they’re just different ways in which people approach our site at different times of the day.
We call them update, extend, and discover. Update can be summarized by this, I need to know what’s happening right now. I want to feel connected to what’s going on in the world. It’s a quick, focused, often quite habitual behavior. It’s easy and accessible, and it often ties into people’s fears of missing out.
A classic update scenario would be when you grab your phone in the morning and quickly check the news headlines.
Extend is the complete opposite to that. Rather than just knowing what’s happening, the extend mode is about an understanding of a specific story. It’s finding out more information about a specific topic or story and wanting to feel well-informed.
The difference here is that whilst update is about knowing, as I said, this is about understanding. It takes a long time to get to that level of understanding, but it’s ultimately more rewarding.
Our third mode is discover. This is about I want to be shown something new about the things that I’m interested in. This is very much related to personal interest, but there’s often that need, also, for unexpected relevance. This is also if people are bored at work. BuzzFeed have absolutely nailed this mode of consumption. People wanting a break. It’s not urgent. It’s often unfocused.
There are our three modes. After we’d done the research, we moved into the concepting phase of the redesign. It’s safe to say, if anyone here’s worked on a responsive redesign, it was a difficult birth. Our early concepts were incredibly traditional. It was very much based on a legacy way of working and, for The Guardian, a legacy way of thinking.
It was very much based on what had worked before on desktop. A column of news on the left-hand side, more columns on the right-hand side with all of the topics you would expect, sport, and comment, and analysis, and technology. We were trying to please everyone at this stage and really pleasing no one. I think that was our classic mistake.
We went back to the drawing board, decided to come up with some new concepts. Actually, what we ended up doing was just going round and round in circles. We did lots and lots of iterations and lots of different explorations. In fact, I’m not even sure you can call them iterations, because we weren’t making any decisions. We were just going round in circles.
We had three or four concepts, and we weren’t really happy with any of them. As anyone who’s worked on a responsive web design project knows, getting the hierarchy right across desktop and mobile is really hard, and it’s really painful. There are so many moving parts that as soon as you get into it in any detail, everything starts to work against everything else.
This is the point in responsive design that Frank Chimero says is the point at which in the circle of hell where they light the soles of your feet on fire. I know where Frank’s coming from. We felt that pain. We also shot ourselves in the foot by deciding to design the home page first. It wasn’t my decision, and I fought quite hard against it, but we made that decision.
Pro tip, I think, when you’re redesigning any site, never do the home page first. It’s a total disaster.
As part of our redesign process, we’d often spend time talking to other people, other design industries, other people in the business. Information architects worked with our Director of Digital Strategy, Wolfgang Blau, when he was the editor of Zeit in Germany. They came in for a couple of days in 2013, and we took them through the concepts that we’d been working on.
We were just chatting about the things that we liked and things that we didn’t. They saw one of our concepts, and they said, “You’re doing containers.” We were like, “What?” They talked through what they called their containerist principle or the contain theory that they’d developed when they’d worked on the redesign of the Freitag e-commerce site.
They’d never done it for a news site, and there was this moment of excitement where almost accidentally one of our concepts had aligned with one of their concepts, and we started to crystallize our thinking.
Those conversations with information architects, with Oliver Reichenstein and with Konstantin Weiss, gave us confidence in one of those initial directions. We quickly came up with what we now call the container model. The anatomy of a container is as follows. You start with a single item, a single piece of content, 1 of those 500 pieces of content a day.
You build up items into slices, and you put slices together to make containers, and containers can appear anywhere. This way of building is also very dev-friendly, because it’s very, very flexible, and it cuts down on the amount of code that’s needed to maintain it.
There are four main principles in the container model. A container is a full-width, horizontal element which contains a collection of content. Pages on the site hold a series of containers which are stacked on top of each other, just like on a ship, just like on Malcolm’s ship. The most important at the top, and the least important at the bottom.
Containers are self-sufficient. Again, that’s part of the naming convention, just like on a container ship. Because they’re self-sufficient, they can easily appear anywhere in any combination. Effectively, we’d removed all of the columns from our website.
As we were working responsively, as the screen size adjusts or as you use a different device to access the content, it’s the container itself that’s responsive, not the page. Once you start thinking about containers, it’s actually a completely different way to start thinking about websites. You can apply the container model to anything. You can apply it to a section page.
You can see here, this could be our fashion page with five containers, but it also works for article pages, as well. It also works for video pages, for live blog pages. You stop thinking about pages and how you can desperately fill them with content, which is the very traditional, old-school way of designing news sites.
You just think about content, and you think about what’s important for the page that you’re designing at that time. It’s effectively a list, a super simple list. The really nice thing about the container model is it’s very easily understandable by the business.
When the music editor comes to you and says, “I want to redesign the music page,” you say to him, “Write me a list of the things that you think are important for that page, the most important at the top and the least important at the bottom.” You understand the business needs, and then you can also validate that with users.
The other thing about the container model is it gives us this very flexible, reusable design system, which we really felt could help us achieve that engaging content discovery experience that we were looking for.
Here’s an example from our live site that I took yesterday. This is our headlines container on the home page. The headlines container is made up of two slices, a slice at the top and a slice at the bottom. The bottom slice has eight stories in it or eight items.
We had our container model. We threw away all of the other concepts, and we were pretty excited. This was defining our responsive layout, but at the same time, we also wanted to start thinking about our content strategy, as well. Obviously the two work hand-in-hand. You can’t separate the two.
Like any good UX team, we did our competitor analysis. We looked at “The New York Times.” We looked at the BBC. You quickly see, when you look at these sites, what I call the grid of compromise, which is effectively, on the home page in particular, an area of the site, pretty much under the main stories, where every single editorial desk has got their own piece of real estate on the site.
It’s hard-won. The US is more important than politics internally, so they get more prominence. From an editorial perspective, they think that if they get this, this is going to solve all of their problems. This is going to enable everyone to discover all of their great content, but I am not convinced.
The key thing when you have this grid of compromise is effectively modules and content on the site just reflect the main navigation, and you’ve got that duplication of content.
I’m going to talk a little bit now about what we call blended content, and its birth was very much a happy accident. Some of the team had been sketching out a home page, I think, in this example, and I’d been in a separate meeting. I came back into the room, and I said, “OK, what have you been doing? Update me on where you’re at.”
They said, “We’re just trying to work out the different containers we want to put on this page.” I said to them. “What are those squiggly lines? Why haven’t you filled them in?” They said, “That’s going to be sport, and culture, and tech, and the same old stuff.” I thought, “Hang on. What about if we do something different? What about if we try to push this a little bit further?”
We’d thrown out columns and gone for rows on the website with the container model. What if we threw out that idea of just replicating the primary navigation on any website page? That’s where the concept of blended content came to life. Rather than just having news, and sport, and comment is free, and tech, and money, you go for something slightly different.
Content isn’t organized and pigeonholed by the way it was commissioned. It’s organized in a different way, and it’s organized in a way that makes the most sense to the business but also to our users. It’s organized in a way that we hoped would actually get them to promote and discover new things.
We knew from our research that people make choices about what to read based on personal relevance, not where that content is originated from. They don’t actually care. That’s where blended content came into play. A container filled with blended content can appear anywhere and can aggregate content from across the whole of The Guardian.
In effect, blended content frees your content from the shackles of where it was created. It can appear anywhere in any combination. We had our container model, and we had blended content. We went quickly into our idea validation. We created some very rough, early wireframes. We created some first-pass designs.
We took those concepts into the lab. We’re really lucky at The Guardian. We have our own UX lab. We wanted to just validate those two concepts and see if they made sense to people before we went through all the energy of actually building them and deploying them onto the site.
The key question here was, do users want to consume news in this way? Did it actually make sense? It made sense to us, but we were far too close to it by this stage. Another thing we wanted to test was could this model be supported by editorial? Did they even want to think about content in a new way?
We also wanted to see whether containers and blended content would support those modes of consumption that we’d identified, and also whether it would improve our ability to promote and enable the findability of the content that we create.
The initial results were really positive. People said that they liked what they saw. Lots of people just said that they felt it was familiar, which we thought was great. Lots of the time, they didn’t even notice that it was different.
The key thing that people said was when you pitted the old concept versus the new one was that people felt that there was a bigger variety of stories, and they felt that they were being exposed to content they had never seen before. We’d broken them out of that very familiar way of thinking about a news site.
People were really open to the change. It wasn’t a silver bullet, though. The one key thing when you detach the navigation system from the modules on the page is the navigation needs to work a lot harder.
For somebody who’s coming to the site who just wants to go to football, the only way now is to go in through that navigation, so we needed to make the navigation very prominent.
We also did some live data trials, as well. We pitted non-blended against blended content and ran a test for a couple of weeks. I think we ran a test for each week for about a month. The great thing was blended content and containers outperformed their old existing mobile site.
The click-through rate on blended content, in particular on the home page, was higher, and that was great for us. We felt we now had enough validation, both from a qual and quant perspective, to push these changes live and push them onto the site.
We finally launched the site in January 2012. It took quite a long time. There was still a lot of pain along the way, a lot of fire that was held to feet. There were a lot of issues around information density and around the navigation. That’s probably another talk for me.
The core concepts of containers and blended content are still intact, and I’m really proud of the work that our team did in pushing beyond the obvious, pushing beyond a lot of the inertia that you get in a huge editorial organization to just do things the way we’ve always done them.
Which is always a bit of a paradox, because that way of doing things is always based on print, especially when you have a print organization like The Guardian.
In terms of outcomes in the future, it’s coming towards the end now, we’ve seen huge growth in the last year. I think all news sites have seen a huge growth in the last year, a lot of it down to Facebook. 90 percent of our growth was on mobile last year, and that really justified our decision to go responsive and also to roll out our new apps and new smartphone apps.
The key thing that the containers give us and blended content — I think this is the fundamental thing that I’d take away from it and I’m still excited about — is our ability to experiment, as an organization, is limited only by our ability to think of new and interesting ways to curate and present our content.
As soon as we can come up with an idea, we can quickly test it. We do lots and lots of AB testing at The Guardian, and we find out what works. We have tracking and analytics on every single container on the site. We can change the order automatically. We can move things around. If a container isn’t working, we just get rid of it.
Because of the nature of containers and the way that they stack together with others, when you remove a container, the rest of the site just works. You don’t need to worry about having columns and everything fighting together.
This flexibility really gives us the ability to create the best possible experience, we feel, for our audience on any device that they choose. We’ve also seen other sites start to use containers, as well. The London media digital organization is pretty incestuous. Everyone who works for The Guardian has also worked at the BBC. People at the BBC have worked for the FT.
I used to work for the BBC. I can see Paul laughing. The new “Financial Times” site has containers. It uses containers, which is a great validation for us. “The Atlantic,” which launched last week, also uses containers. All of the elements from the new Atlantic site are 100 percent width, and as you scroll down the page, you can see the containers start to come to life.
The new BBC home page has also started to experiment with blended content. They now have a People in the News container which is very similar to ours. We’re not annoyed by this. Actually, we’re quite excited. It’s a great thing for us. The Guardian is very open about sharing all of its knowledge, sharing all of the data that we use. I think it’s great that these guys are doing that.
I’m pretty much at the end now. I’m not saying in this talk that containers might work for you, but I think it’s something that if you’re looking at a new redesign, it might be something that you want to try out. If you’re working on a site that has a huge amount of content, is incredibly content rich, it’s a fun exercise to try.
Because containers are effectively a list, it’s a really fun exercise that really anybody can play with. Thank you.