[MUSIC]

[APPLAUSE] >> Good afternoon.

Just to check can everybody hear me okay?

Yeah?

Okay, cool.

So, I'm well aware of the fact that I work at The Guardian,

which is probably considered old media.

So it's not lost on me the fact that I am talking at Future of

Web Design about the future of web design from a newspaper.

That's okay.

But, as we just said I am literally the thing standing between

all of you and lunch.

I won't hold it against you if you pass out from hunger, if you leave or

if you go on Twitter's.

It's totally fine, don't worry.

So as I said I'm Chris Clark.

I'm mister_mister on Twitter.

Don't ask me why.

I was the UX Architect on theguardian.com, right up until the launch of the website.

And I now work on the mobile apps team on things like iPhone, Android,

iWatch, and so on.

I used to work at Yahoo Answers, GOSPAM.

And in my spare time I generally,

I like to say I do a lot of bouldering and things at the gym.

But I generally just find myself being a lot hurt, cuz I'm getting old.

[LAUGH] I wanna say a couple of big thank yous to some

of the people who are in the team when I worked on this project.

So Sam, Cecilia, and Theresa, Kat Stubbins, Alex Breuer, Chris Mulholland,

and Nick Haley.

Thank you to Veronica, she's in the room, no?

For taking a shot at me.

And yeah, anybody else who contributed to stuff, thank you very much.

So does anybody remember this site?

Does anybody prefer this site?

Doors over there, by the way.

[LAUGH] So we worked on a responsive website launch for

about the last two to three years.

In 2012, we had a separate desktop and mobile site.

This was really inefficient way to actually create our content,

to update our content.

Nothing could be reused across platforms.

You had to make everything twice.

This really famous moment in the Obama election campaign in 2012.

When the entire site just collapsed.

So it just didn't work.

So we fixed it.

Well, fixed it, we changed it.

[LAUGH] We launched the new site at the end of January.

And this was a single platform for our web apps, for our website.

We pooled everything, all of our CMS, all of our tools internally so

we could start to create our content really quickly.

We could update it quickly.

We launched the site anywhere between eight to ten times a day,

relaunched it with new stuff.

We're, yeah, we're going crazy.

So this talk is gonna be a lot about responsive web design.

This feels like it's a big shift for news organizations.

Producing everything on old platforms, doing it smartly.

But it made everything, it came at a cost.

So we've started to sort of get into a problem

where we were making everything bigger.

Hopefully this is what I'm going to talk about, to do with the news homepage.

I know a lot of you will think that, yeah, I just go from Twitter,

I go from Facebook, I go to articles, and then I just drop out.

We're not under any illusions that the home page

isn't as important to us as it important to you.

I mean a lot of people internally think it's this.

That's fine.

It's not going away.

We talk about the fact that 50% of our traffic now comes from this and

that's really important to us.

We wanna keep up with the times, but we can't forget about the fact

Less than 40% or 30%, but they still come from desktop.

There are a lot of our loyal readers from our sort of

all the generations of site redesign and so on.

Yes, we went from mobile first with our new site, but

we can't forget about desktops.

So a lot of the talk is actually gonna be about desktop.

I'm going to go a bit back in time to last summer, and

talk about something we call internally, density.

A term that we came up with,

we kind of amalgamated a number of things together and used density.

So all this responsive web design, all this new stuff that we were coming up with

was having an affect on this thing that we called density.

Which was larger images, larger font.

All sort of accumulates to the fact that users weren't being able to

get this overview of news.

And that's kind of a massive problem, right?

We want them to be sure that they can actually read the content

on any device they want.

When we spoke to the BBC, they called it information density.

So this wasn't a thing that internally we thought was just Important to us,

this was important to everyone.

And I mean by information density,

it's literally the amount of stuff we can fit into if viewport at any one time.

We're obviously not going to be able to fit everything.

We want to make sure that the design looks nice.

We're not just going to put basic type up there.

And what I want to talk about today is how we didn't solve this with design.

I wanna change your mind and reframe this problem using something which quite

interestingly that David Hurley was talking about.

And coming from the point of view of the user and

the point at the time that they expect to spend on a page.

So I'm gonna do a couple of recaps on some of the big news organizations.

How they're tackling responsive website design, how we did it.

How we admitted that we probably didn't solve it all the way,

we kinda went about halfway.

And then how we actually just took a big leap of faith and

did something complete different.

So which of the big news organizations are looking at responsive website design?

How are they actually all doing it?

We're not cut from the same cloth.

The New York Times, which quite interestingly,

is where the name of the talk came from.

Which is all about journalistic quality of the content,

that was actually coined in 1900s, called the Grey Lady.

This is what happens when you research.

[LAUGH] Pointless facts.

They went ahead and relaunched their article page, similar to us In 2013.

But they didn't do their homepage.

They kinda tweaked it, they kinda did bits of it.

They didn't do a full redesign of everything.

They just did their article page and they didn't do their homepage, just bits.

I tried to get a quote from them, but they wouldn't talk to me.

So I went around the internet to look for

people who were talking about home page responsive website design.

And this guy Alex was talking.

There was a number of people who were talking like this.

Who were feeling like it was definitely something that

the New York Times needed to do.

Where they needed to move in this direction for this redesign.

Does everybody remember this innovation report?

This leaked innovation report from, was it last year?

You can quite clearly see from, whether or not this is accurate, who knows.

The downward trend across their home page visits was huge.

Maybe they didn't wanna spend money, resources,

time all that effort on something no one goes to.

Obviously I can only speculate this, but maybe they're putting more effort into it.

Maybe it's all about the apps for them, and that's fine.

BBC News.

So BBC News have followed us en suite in the way that

they have completely redesigned their entire experience just for news.

I imagine the other parts of the sites are coming at some point soon.

They've done it on PC.

They've kind of done a little bit of a redesign tweak,

rather than a full-on redesign.

But I would fully expect them to go something much different

like The Guardian did.

When I looked into their feedback,

it's amazing how similar the stuff that they were getting from us.

It was like, less information to scan on the screen.

I have to scroll more to see different ad lines, image's too big, font's too big,

yada yada yada.

Three months later, no change to design at all,

people started sort of getting grasp of it.

Feel that it was something that they were kind of understanding,

because all the news organizations are going this way.

By the way if there is anybody in the room from the BBC thanks for the new users.

Because they seem to be going on a sort of tennis trip between us and them.

It's like we hate you Guardian forever, we're gonna go to the BBC.

And then we see in the BBC, we hate BBC, now we're gonna go to The Guardian.

You're like, guys, same thing.

The Financial Times, this is a leaked image from the Business Insider.

It's quite interesting to see.

This is all very early days.

They're looking at it.

They're trying some of the models that we've tried.

Not in the same ways but that's cool.

It's good to see a lot of the big places try and

really experimental and news responsive design.

And last but not least, Bloomberg that has got all the blue,

all the Helvetica, all the colors, big bold.

So we're all kind of doing bits and

no one really seems to know that we're going in exactly the same direction.

We're all sort of feeling our way in the dark.

And we dont know which way is gonna work best.

But we all know we want to do something responsively because having a responsive

site is more efficient.

It means we can get stuff onto mobile quicker.

It's all about this, right?

It's good for everyone.

It's good for the business.

So, our response to this whole page

responsive conundrum was something we call the container model.

And it

kinda seems like it's a bit of a silver bullet the first time you talk about it.

Because you go, oh yeah, this container model, it sounds fantastic.

We're gonna solve everything with this.

Yeah, it was great, but it came with its own problems.

I'm totally missing the end of that.

It does nothing.

Don't worry. It just stops.

It's really, really, yeah, it was a bit of a killjoy for that, sorry.

So rather than cargo we have content.

On an average day we create around 500 pieces of content, sometimes 600.

With the election coming up we're gonna go crazy.

There's no way to house all this content in a responsive way.

It becomes a constant challenge and we end up in a bit of a bum fight like we did

here, where we were just fighting for the top part of the page.

Because if we look at a heat map of the old Guardian, it drops off significantly.

So we need to sort of encourage people to scroll a bit more, we need to

encourage people to start looking around the site for different types of content.

Enter the container model.

Does everybody know who this guy is?

As I was deliberately putting this guy up rather than Oliver Reichenstein.

Here's the other guy, an information architect, Konstantin Weiss, and

he helped us and Oliver Reichenstein come into the Guardian for a two week sprint.

We looked at the home page.

We looked at ways that we could improve how we were displaying our content and

also make sure that we were doing something responsively.

And we weren't just getting into another old version of the home page.

So, he would talk about this idea of containers being independent of layouts.

100% width all sounds great, right?

This every container could be so for example,

the top container could be a header, then navigation and

you could take this across any section front you want.

If you went into an article you could reuse containers for

different types of stuff.

If you wanted to duplicate something across containers, so be it.

It was fantastic.

Right?

And an individual container is made up, in our heads, was made up of an item.

Each item would be then called into a slice.

Normally a container would either be made up of a single slice or

a number of slices, but it all sounds like it's coming together and

it's something that we could really, really produce independent nice

containers of content that are filled with either news or culture or people.

But we actually ended up with, with something that

was 100% width and started to get quite sparse and quite wide.

And so we looked at this in February and we thought,

we've gotta redo some of this stuff.

We've gotta make sure that the important stories are big enough and

the non-important stories are a bit smaller, so

we did that, we went even bigger.

We're like right, we've gotta look at this again.

This was in May, this screenshot in 2014.

We gotta look at it again, we gotta fix the branding, we gotta fix the type,

we gotta fix this, we gotta fix so on.

And we did the same thing again.

We were talking about density even at this point before.

We went in to a separate team in July.

And we could have went in to another meeting room.

And we could have solved it again by just saying, you know what,

we did it wrong that time cause we did something slightly wrong in the design.

We'll just go in to a meeting room, we'll sit down and we'll discuss and

solve it there.

We didn't do that.

The next gen.

God. [LAUGH] Which is dead now.

The next gen team who was responsible for

delivering the new website was made up of designers, developers, products,

editorial, we annexed a small part of that team.

So just five people.

We went into a separate room.

We sat down and our one outcome was to solve the problem.

Not actually come up or define the problem sorry, not solve anything,

not come up with amazing designs.

Just come up with a concept.

It's totally pressure free with six weeks and we were called Team Density.

[LAUGH] So the leadership team it was made up of like senior product people,

went away and gave us a time box challenge.

So they broke apart their, what they thought the problem was.

Cuz we weren't just gonna go into a room and just make up the problem ourselves.

They came with a bunch of requirements for us to come out of.

So they wanted us to, they assigned us a goal to be achievable in two months.

They wrote a series of assumptions whether we followed those or not was up to us.

We had initial sketch week, where there is no pressure at all.

Just think of anything you could, potentially what the problem could be.

And at the end come up with some defined input, so whether or not we actually make

recommendations, or whether or not we actually come up with designs.

Who knows? It was all up to us.

It was completely pressure free just think about it.

Leadership assumptions were as I guess as follows and

we kinda agreed on some of them.

Obviously these are comments those, the difficulty in understanding an overview

of articles or that sort of, I don't get this sense of an overview of news.

There's so much more scrolling and guessing involved in responsive design.

Obviously the old site reared its ugly head.

We weren't getting as much non content at the top of the page.

All of a sudden,

the whole top of the front page of the Guardian was dominated by news.

No non news whatsoever.

So we immediately thought, oh that's what we need to do.

That's how we fixed this problem.

And that's what we did the first time.

When we came in February and looked at that original design, we thought,

we know how to fix it, we just fixed this one bit of a problem.

And immediately off the bat, myself and the other designer in the team.

We're coming around this the same way.

We're not looking at this.

We're not talking about anything other than how we're gonna layout the page.

We're not actually talking about how people are actually consuming

the news on the page.

So we really needed to understand first off how people were

genuinely consuming our needs.

You would think immediately off the back of that.

Let's start with personas.

Cuz we can name a bunch of defined personas across all different use types.

But, against putting use personas, putting personas against a use agenda.

Is pretty much impossible to define.

You're talking about, I mean in one weekend that's just gone,

we've had an earthquake in Nepal.

Baltimore has declared a state of emergency.

And Keith Harris,

creator of Orville the Duck, literally just died like 30 minutes ago.

How do you, yeah I know.

But how do you design a user case for that?

It's impossible.

So what does an overview of news look like to an individual user?

Well it depends.

And it depends on when they're coming to the site, what their intentions are, and

this idea of modes of consumption.

Or I guess what is kind of a trendy term is jobs to be done.

So we all think about these things in terms of context and

we say yeah users come in for a commute and when they're at work and

when they're at home they're do different types of user understanding.

And we put those different types of contexts,

we actually applied three different modes of consumption against news consumption.

So update, extend, and discover.

Update is all about knowing, so just getting that top level skim of everything

that's happening right now, feeling like you're connected to the world.

Extend, you want to get a deeper understanding of a specific story.

So say from an update, you then come back to understand what's happened in Nepal.

Why has this happened.

Was it something underground?

Was it man made?

So on. And discover,

it's much more when you're like, when you're bored.

When you wanna relax.

This is much more the weekend type person.

So depending on the time of day or what the person's doing.

Readers, or our users, will use or enact one of several of these intentions

depending on whether it's a short form story, whether it's a massive story.

Ultimately, it depends.

So, we took all these consumption habits, we looked at this problem of news density

and what the biggest thing that we realized was,

was let's not think about this as a design challenge.

Let's not just make the image of it smaller.

Make the type a bit smaller.

Make it just a little bit more compelling.

Let's think about these, this context, these modes of consumption's, and

come up with a fresh perspective.

So, We had this team.

We had these modes of consumption.

So we had a kind of a way to sort of stack ourselves up.

And we went into a room.

And we spent, this is literally within about a couple of hours,

we started just sketching like crazy, and

we started falling into the same holes as the leadership team were.

Oh it could be about size, it could be white space.

It's the presentation of the story.

It's all these things that we've already covered around design and presentation.

The scannability of the view port it's the design, the context.

But that one thing, that context, that thing we were kind of,

we did all this thinking in the beginning and

we talked about our modes of consumption, and we think about these people,

and immediately this user context suddenly floats to the top.

And what is it the user's thinking about this layout?

What do they expect to see when they come to the page, and

it was only on the way to work.

And I was going through, there was a black fry station and I was literally about

to go into a tunnel and I thought, I need to load as much content around

the research of used consumption before I go into a tunnel and lose my connection.

And I was struck with a really, really interesting thought.

Did I actually have the time to download all the things I needed?

And I started to think about the time that it was taking me to read the news on my

commute and the time that I was spending reading news at work,

which is generally the time that I was spending reading news.

And this idea of time, the context sort of fed into time, and

it kinda stuck, and it was an easy word to work around.

So, I ran back in that morning and I found annoyingly this is out of context,

this was the smallest whiteboard I could find.

It was about an a3, and

I started writing literally every idea I could on this board.

Like five minute news, get the things you need, read the things you want,

But then we took a step back, brought some of the leadership team in,

and said what if news density isn't about space?

It's white space or sizer content.

What if density is about the time?

And this is the time that a user expects to spend on the page?

And if you apply that concept of time to the different modes of consumption,

it starts to form neatly into place.

So update, you would have a short amount of time, extend,

you would expect to spend a bit more time reading these, and

discover would be the most time that you would spend.

Here comes the science, we made an equation.

The user satisfaction of the page was

made successful by the perceived time and effort that a user expects to spend on

the page, including the presentation of variety of the content.

Now the presentation of variety of the content based on time feels like it

sort of depends on the speed of the story and how it's presented to the user, which

kind of fits nicely with Alan Rushbridge's sort of concept of fast and slow news.

So, or sorry, fast and slow journalism where something that's quick,

something that you just want to get a top level on.

Say for instance, a breaking news story and we don't have much information.

We just wanna tell you the bare bones.

We might not have a nice image, it doesn't matter.

And slow journalism is something deeper, it's more in depth.

We are allowing you to take more time over this because you expect to take more time,

so we designed it that way.

So fast journalism is simple looking.

It's easy and quick to scan, and it's really very much news focused.

Yes, we have some great news journalism,

but maybe at the time that the Nepal earthquake is happening,

we don't want to see incredible HD versions of shots of people being crushed.

We just wanna see the news.

We just wanna understand everything that's happening across the world right now.

And maybe we can do something really quick.

This is an example of the US front about a month ago.

And we start to look at, you know, these smaller images, slicker text.

It's a bit more uniform, it's sort of a four column layout.

Whereas, slow journalism is very much more visually rich, it's much larger.

We're expecting it to be more indulgent of this content.

This isn't content we just want you to consume really quickly.

We want you to deliberately take your time over it.

So something that's incredibly rich in color.

Something that has lots of visually rich indulgent stuff.

This is an example of the lifestyle front from a few months ago.

And you can immediately see there's much more color, it's much more visually rich.

I'd much rather see baked cod with pumpkin seed than someone missing a limb.

But it's just the way in the context.

We expect you to spend more time including this stuff.

That's not to say in the future when you come back to recap Nepal,

we wouldn't then allow you to indulge, take that time,

because you want to then better understand what's going on.

And yeah, we would even put in these full bleed

designs that I'll talk about in a little minute.

But we would expect you to spend more time on this page

because you have more time to spend.

So looking at that fast news and slow news and that update, extend,

discover, we applied different amounts of time to different stuff.

So update, you have a short amount of time, it's very much fast news.

Extend, with the more time, it kind of leans more towards slow news.

And then finally discover, when you have the most time, it's definitely slow news.

So one of the main things that we came out of this team density with was

we split the news container, the top news container, into headlines and highlights.

Very much that slow news and that fast news, to give our page a bit more balance.

To give our page a bit more of that meeting everyone a bit more halfway makes

our container ship very happy.

So that all sounds well and good,

but what happens if we want to take any one of those two things to the extreme?

And I'll only show the one example cuz I wanna leave a few minutes at the end for

any questions.

But what if we could take slow even slower?

What if we could push the pages even further?

And so, we would look at these slats, or these container layouts,

and we would think, is there a good variety of content and speed on this page?

You know, are we enacting this when someone looks at the page?

Do they think when something's wide, it's going to be really big,

it's really interesting,

when it's something small and narrow, that kind of flow, story of content.

I've got a couple of examples, one of them was something we called a joker card or

a joker container, which would kind of break all the rules of iGrid,

all the rules of our design principals.

It was a way for The Guardian to really experiment with being The Guardian,

I suppose, and pushing the design with animation was super, super rich.

It was so rich sometimes it actually broke the site.

[LAUGH] More often than not.

But you get the intent.

Right above it is something that's quite news focused, and

it's really stripped back.

It's just news, it's just text.

Whereas, right below it is something that's ridiculous.

I even think on the button there was a little shark fin that came out.

It was no expenses spared.

We just pushed it as far as we could because that was the place that we could.

And again, we have fantastic photojournalism at The Guardian, and

we wanted a place to showcase that, show it off.

But we didn't want to show it off right at top of the page all the time.

So we always placed right of bottom of every single front a sort of a gallery,

or a visual photographic treat for everyone to come back and experience.

And surprisingly,

we now get quite a lot more clicks at the bottom of the page then we used to.

Because people know now they can get our fantastic journalism in the same place

on every front.

So suddenly, that sort of initial stacked

100% with content suddenly becomes something that's a bit more flowing.

And we could start off with something really short, really succinct,

like headlines.

You expand into highlights, maybe you go back into a bit more news or

opinion, then we throw in like a joker container.

A few other containers around more news, non-news.

And then finally, with this big picture at the bottom.

And so suddenly that previous story or

that previous slide where you saw the design in was around sort of September,

this was the design we went with in January.

So immediately,

you're thrown with just the headlines, something that's really succinct.

It's really quite simple but depends on the type of story.

Again, we don't know what's going to happen.

And then the highlights, which are much more visually rich.

It's much more engaging.

We want you extend on those top stories.

We drop you into sport, where we might have a couple of pieces of opinion,

we might have some features.

And then we immediately have a joker card, a watch me date,

which is something that breaks all the rules.

And below it, again, is news.

So you can start to see the sort of flow of the page going over time.

It's not an exact science, this isn't a silver bullet, but it works for us.

And it works for our editorial team,

when they want to sort of mix and match different types of content.

I'm not saying right now if you went to the front it's gonna be very small.

The headlines are probably gonna be massive, because there are four or

five massive stories happening right at once,

and that's another challenge we kind of have to look at with this.

But if we approach it from the time that user expects to spend,

hopefully we can start to sort of solve some of these difficult

responsive design problems on the home page.

And one really quite unexpected thing that happened

was that people started changing how they talked about the home page,

and they started changing how they talked around how the home page was designed.

And it wasn't just about how this piece is designed, it was whether or

not it was fast or it was slow.

Well, how much time do we think someone wants to spend on this individual story?

Do we want to make sure,

or do we want to tell the user that it's something you can spend a lot of time on.

It's a big long read or it's just gonna be a few lines, don't worry.

So we would take every single front and we would go into a room and we would say,

does this container need to be this fast?

Does this container needs to be this fast?

Are we getting a good flow across different pages?

In our fronts tool, we actually name our containers based on speed and time.

This was completely unexpected out of six weeks of a project, but it's amazing how

many people started to talk about this sort of all encompassing idea of time, and

how we can break it down into little bits, and it can affect design.

But it also affects the way that people talk about stuff.

So, I'm not a huge one for giving takeaways.

I've got a few, some of them are probably quite obvious, but

I don't want to yeah, be a prophet about that type of stuff.

Anyway, the first one I wanna say is,

don't just go into a meeting room if you have a massive problem and

it's a big scary problem, and just come up with a big quick solution.

Even if you lose some money, or some time, take the time to do it well.

Take the time to understand why it's a problem, cuz if you don't,

it'll just come back and kick you in the backside again and again and again.

It happened to us, and it just took us to admit that we needed to do that.

Maybe this is only because it's a big organization, but when you're doing

something that's quite big, you know, you're tackling the homepage.

People think in news that it's the center of the universe.

You don't want to step on people's toes.

You're constantly in that battle around making sure you're negotiating.

Is everyone on the same page?

Do they agree with what you say?

I think I wrote this a couple of months ago, and now I look at it, and

it's really stupid.

It's really obvious, right?

Small teams move quickest.

I think it's kind of a bit more like this, so

it's not teams, small teams on big projects.

It's teams working on small projects,

or teams thinking about small bits of a large project.

Like if you can solve the crux of it, maybe that's the problem,

maybe that's a little piece.

If you pick pieces off and slowly build up some sort of tapestry,

you'll move a lot quicker, and by doing the first point,

where you understand the problem, you'll move quicker anyway.

This one's a bit more weird.

I mean, the whole talk was kind of around this idea of time and

it was quite abstract.

I kind of felt like the problem that we had,

this kind of news density problem needed a big, broad solution.

And we needed to accept that we were so focused on the design of the problem

that we weren't actually looking at the user's focus of this page.

We needed to take a big step back and

think about what the problem was from a non-design perspective.

Not to say that other news organizations will take this approach.

Containers, seems like some of them were doing it, I don't know.

But, yeah.

And last but not least, admit when you're wrong.

The container thing, yeah it works.

But it works after we admitted that we were implementing it in the wrong way.

We needed to look at it again.

We needed to admit that we needed to look at it again, and it was painful.

We fell out with a lot of people over the six week period.

But slowly but surely, people started coming back together, and as soon as

you got more people on your side from negotiating more, it kind of worked.

It makes it sound like it was perfect, but it wasn't.

It was really hard.

And yeah, the rest of the team have full credit on the fact that this was

an incredible job, and I was just one part of a huge process.

And there's a ton more work on this around fast and slow news journalism.

And the sort of intricacies of how those individual containers were put together.

But that's all I've got.

Thank you very much. [APPLAUSE]

[MUSIC]