Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Start a free Basic trial
to watch this video
All the News That Fits to Print: Re-thinking Consumption
32:22 with Chris ClarkeConsuming news is not something people spend a lot of time thinking about. However if you analyse people's intent, certain modes of consumption begin to appear. Combine those with a theory allowing you to differentiate the content people want to consume and you have a vision for a homepage. This talk focuses on how a team of five theorised content consumption from the perspective of time and turned that into fast and slow journalism design patterns - taking the container model a step further and changing the Guardian homepage completely.
-
0:00
[MUSIC]
-
0:12
[APPLAUSE] >> Good afternoon.
-
0:17
Just to check can everybody hear me okay?
-
0:19
Yeah?
-
0:20
Okay, cool.
-
0:22
So, I'm well aware of the fact that I work at The Guardian,
-
0:25
which is probably considered old media.
-
0:28
So it's not lost on me the fact that I am talking at Future of
-
0:31
Web Design about the future of web design from a newspaper.
-
0:34
That's okay.
-
0:36
But, as we just said I am literally the thing standing between
-
0:40
all of you and lunch.
-
0:42
I won't hold it against you if you pass out from hunger, if you leave or
-
0:45
if you go on Twitter's.
-
0:47
It's totally fine, don't worry.
-
0:50
So as I said I'm Chris Clark.
-
0:51
I'm mister_mister on Twitter.
-
0:54
Don't ask me why.
-
0:56
I was the UX Architect on theguardian.com, right up until the launch of the website.
-
1:01
And I now work on the mobile apps team on things like iPhone, Android,
-
1:05
iWatch, and so on.
-
1:08
I used to work at Yahoo Answers, GOSPAM.
-
1:11
And in my spare time I generally,
-
1:12
I like to say I do a lot of bouldering and things at the gym.
-
1:16
But I generally just find myself being a lot hurt, cuz I'm getting old.
-
1:19
[LAUGH] I wanna say a couple of big thank yous to some
-
1:23
of the people who are in the team when I worked on this project.
-
1:26
So Sam, Cecilia, and Theresa, Kat Stubbins, Alex Breuer, Chris Mulholland,
-
1:30
and Nick Haley.
-
1:31
Thank you to Veronica, she's in the room, no?
-
1:34
For taking a shot at me.
-
1:35
And yeah, anybody else who contributed to stuff, thank you very much.
-
1:39
So does anybody remember this site?
-
1:44
Does anybody prefer this site?
-
1:45
Doors over there, by the way.
-
1:48
[LAUGH] So we worked on a responsive website launch for
-
1:54
about the last two to three years.
-
1:58
In 2012, we had a separate desktop and mobile site.
-
2:01
This was really inefficient way to actually create our content,
-
2:04
to update our content.
-
2:06
Nothing could be reused across platforms.
-
2:08
You had to make everything twice.
-
2:09
This really famous moment in the Obama election campaign in 2012.
-
2:13
When the entire site just collapsed.
-
2:16
So it just didn't work.
-
2:18
So we fixed it.
-
2:19
Well, fixed it, we changed it.
-
2:20
[LAUGH] We launched the new site at the end of January.
-
2:24
And this was a single platform for our web apps, for our website.
-
2:28
We pooled everything, all of our CMS, all of our tools internally so
-
2:32
we could start to create our content really quickly.
-
2:34
We could update it quickly.
-
2:36
We launched the site anywhere between eight to ten times a day,
-
2:39
relaunched it with new stuff.
-
2:41
We're, yeah, we're going crazy.
-
2:43
So this talk is gonna be a lot about responsive web design.
-
2:47
This feels like it's a big shift for news organizations.
-
2:51
Producing everything on old platforms, doing it smartly.
-
2:57
But it made everything, it came at a cost.
-
2:58
So we've started to sort of get into a problem
-
3:02
where we were making everything bigger.
-
3:04
Hopefully this is what I'm going to talk about, to do with the news homepage.
-
3:09
I know a lot of you will think that, yeah, I just go from Twitter,
-
3:13
I go from Facebook, I go to articles, and then I just drop out.
-
3:16
We're not under any illusions that the home page
-
3:19
isn't as important to us as it important to you.
-
3:21
I mean a lot of people internally think it's this.
-
3:24
That's fine.
-
3:25
It's not going away.
-
3:26
We talk about the fact that 50% of our traffic now comes from this and
-
3:31
that's really important to us.
-
3:33
We wanna keep up with the times, but we can't forget about the fact
-
3:39
Less than 40% or 30%, but they still come from desktop.
-
3:43
There are a lot of our loyal readers from our sort of
-
3:47
all the generations of site redesign and so on.
-
3:49
Yes, we went from mobile first with our new site, but
-
3:52
we can't forget about desktops.
-
3:54
So a lot of the talk is actually gonna be about desktop.
-
3:57
I'm going to go a bit back in time to last summer, and
-
4:00
talk about something we call internally, density.
-
4:04
A term that we came up with,
-
4:06
we kind of amalgamated a number of things together and used density.
-
4:10
So all this responsive web design, all this new stuff that we were coming up with
-
4:14
was having an affect on this thing that we called density.
-
4:17
Which was larger images, larger font.
-
4:21
All sort of accumulates to the fact that users weren't being able to
-
4:23
get this overview of news.
-
4:24
And that's kind of a massive problem, right?
-
4:26
We want them to be sure that they can actually read the content
-
4:29
on any device they want.
-
4:31
When we spoke to the BBC, they called it information density.
-
4:34
So this wasn't a thing that internally we thought was just Important to us,
-
4:38
this was important to everyone.
-
4:40
And I mean by information density,
-
4:41
it's literally the amount of stuff we can fit into if viewport at any one time.
-
4:45
We're obviously not going to be able to fit everything.
-
4:48
We want to make sure that the design looks nice.
-
4:50
We're not just going to put basic type up there.
-
4:54
And what I want to talk about today is how we didn't solve this with design.
-
5:00
I wanna change your mind and reframe this problem using something which quite
-
5:03
interestingly that David Hurley was talking about.
-
5:06
And coming from the point of view of the user and
-
5:09
the point at the time that they expect to spend on a page.
-
5:13
So I'm gonna do a couple of recaps on some of the big news organizations.
-
5:19
How they're tackling responsive website design, how we did it.
-
5:23
How we admitted that we probably didn't solve it all the way,
-
5:26
we kinda went about halfway.
-
5:28
And then how we actually just took a big leap of faith and
-
5:30
did something complete different.
-
5:32
So which of the big news organizations are looking at responsive website design?
-
5:37
How are they actually all doing it?
-
5:39
We're not cut from the same cloth.
-
5:43
The New York Times, which quite interestingly,
-
5:45
is where the name of the talk came from.
-
5:48
Which is all about journalistic quality of the content,
-
5:51
that was actually coined in 1900s, called the Grey Lady.
-
5:55
This is what happens when you research.
-
5:56
[LAUGH] Pointless facts.
-
5:59
They went ahead and relaunched their article page, similar to us In 2013.
-
6:03
But they didn't do their homepage.
-
6:06
They kinda tweaked it, they kinda did bits of it.
-
6:10
They didn't do a full redesign of everything.
-
6:12
They just did their article page and they didn't do their homepage, just bits.
-
6:17
I tried to get a quote from them, but they wouldn't talk to me.
-
6:20
So I went around the internet to look for
-
6:23
people who were talking about home page responsive website design.
-
6:27
And this guy Alex was talking.
-
6:29
There was a number of people who were talking like this.
-
6:32
Who were feeling like it was definitely something that
-
6:35
the New York Times needed to do.
-
6:36
Where they needed to move in this direction for this redesign.
-
6:41
Does everybody remember this innovation report?
-
6:43
This leaked innovation report from, was it last year?
-
6:49
You can quite clearly see from, whether or not this is accurate, who knows.
-
6:54
The downward trend across their home page visits was huge.
-
6:57
Maybe they didn't wanna spend money, resources,
-
7:01
time all that effort on something no one goes to.
-
7:07
Obviously I can only speculate this, but maybe they're putting more effort into it.
-
7:13
Maybe it's all about the apps for them, and that's fine.
-
7:19
BBC News.
-
7:20
So BBC News have followed us en suite in the way that
-
7:25
they have completely redesigned their entire experience just for news.
-
7:29
I imagine the other parts of the sites are coming at some point soon.
-
7:34
They've done it on PC.
-
7:35
They've kind of done a little bit of a redesign tweak,
-
7:39
rather than a full-on redesign.
-
7:40
But I would fully expect them to go something much different
-
7:43
like The Guardian did.
-
7:46
When I looked into their feedback,
-
7:48
it's amazing how similar the stuff that they were getting from us.
-
7:51
It was like, less information to scan on the screen.
-
7:53
I have to scroll more to see different ad lines, image's too big, font's too big,
-
7:58
yada yada yada.
-
8:00
Three months later, no change to design at all,
-
8:04
people started sort of getting grasp of it.
-
8:07
Feel that it was something that they were kind of understanding,
-
8:10
because all the news organizations are going this way.
-
8:13
By the way if there is anybody in the room from the BBC thanks for the new users.
-
8:19
Because they seem to be going on a sort of tennis trip between us and them.
-
8:22
It's like we hate you Guardian forever, we're gonna go to the BBC.
-
8:25
And then we see in the BBC, we hate BBC, now we're gonna go to The Guardian.
-
8:28
You're like, guys, same thing.
-
8:31
The Financial Times, this is a leaked image from the Business Insider.
-
8:37
It's quite interesting to see.
-
8:38
This is all very early days.
-
8:42
They're looking at it.
-
8:43
They're trying some of the models that we've tried.
-
8:46
Not in the same ways but that's cool.
-
8:48
It's good to see a lot of the big places try and
-
8:52
really experimental and news responsive design.
-
8:55
And last but not least, Bloomberg that has got all the blue,
-
9:00
all the Helvetica, all the colors, big bold.
-
9:06
So we're all kind of doing bits and
-
9:08
no one really seems to know that we're going in exactly the same direction.
-
9:13
We're all sort of feeling our way in the dark.
-
9:15
And we dont know which way is gonna work best.
-
9:18
But we all know we want to do something responsively because having a responsive
-
9:21
site is more efficient.
-
9:23
It means we can get stuff onto mobile quicker.
-
9:25
It's all about this, right?
-
9:27
It's good for everyone.
-
9:28
It's good for the business.
-
9:29
So, our response to this whole page
-
9:34
responsive conundrum was something we call the container model.
-
9:39
And it
-
9:42
kinda seems like it's a bit of a silver bullet the first time you talk about it.
-
9:44
Because you go, oh yeah, this container model, it sounds fantastic.
-
9:48
We're gonna solve everything with this.
-
9:50
Yeah, it was great, but it came with its own problems.
-
9:53
I'm totally missing the end of that.
-
9:56
It does nothing.
-
9:57
Don't worry. It just stops.
-
9:59
It's really, really, yeah, it was a bit of a killjoy for that, sorry.
-
10:03
So rather than cargo we have content.
-
10:06
On an average day we create around 500 pieces of content, sometimes 600.
-
10:13
With the election coming up we're gonna go crazy.
-
10:17
There's no way to house all this content in a responsive way.
-
10:20
It becomes a constant challenge and we end up in a bit of a bum fight like we did
-
10:25
here, where we were just fighting for the top part of the page.
-
10:28
Because if we look at a heat map of the old Guardian, it drops off significantly.
-
10:33
So we need to sort of encourage people to scroll a bit more, we need to
-
10:36
encourage people to start looking around the site for different types of content.
-
10:40
Enter the container model.
-
10:42
Does everybody know who this guy is?
-
10:45
As I was deliberately putting this guy up rather than Oliver Reichenstein.
-
10:48
Here's the other guy, an information architect, Konstantin Weiss, and
-
10:52
he helped us and Oliver Reichenstein come into the Guardian for a two week sprint.
-
10:58
We looked at the home page.
-
10:59
We looked at ways that we could improve how we were displaying our content and
-
11:03
also make sure that we were doing something responsively.
-
11:05
And we weren't just getting into another old version of the home page.
-
11:09
So, he would talk about this idea of containers being independent of layouts.
-
11:14
100% width all sounds great, right?
-
11:17
This every container could be so for example,
-
11:19
the top container could be a header, then navigation and
-
11:22
you could take this across any section front you want.
-
11:26
If you went into an article you could reuse containers for
-
11:28
different types of stuff.
-
11:30
If you wanted to duplicate something across containers, so be it.
-
11:33
It was fantastic.
-
11:34
Right?
-
11:36
And an individual container is made up, in our heads, was made up of an item.
-
11:40
Each item would be then called into a slice.
-
11:43
Normally a container would either be made up of a single slice or
-
11:46
a number of slices, but it all sounds like it's coming together and
-
11:49
it's something that we could really, really produce independent nice
-
11:54
containers of content that are filled with either news or culture or people.
-
12:00
But we actually ended up with, with something that
-
12:05
was 100% width and started to get quite sparse and quite wide.
-
12:10
And so we looked at this in February and we thought,
-
12:12
we've gotta redo some of this stuff.
-
12:13
We've gotta make sure that the important stories are big enough and
-
12:17
the non-important stories are a bit smaller, so
-
12:20
we did that, we went even bigger.
-
12:22
We're like right, we've gotta look at this again.
-
12:25
This was in May, this screenshot in 2014.
-
12:27
We gotta look at it again, we gotta fix the branding, we gotta fix the type,
-
12:31
we gotta fix this, we gotta fix so on.
-
12:33
And we did the same thing again.
-
12:36
We were talking about density even at this point before.
-
12:39
We went in to a separate team in July.
-
12:41
And we could have went in to another meeting room.
-
12:44
And we could have solved it again by just saying, you know what,
-
12:46
we did it wrong that time cause we did something slightly wrong in the design.
-
12:49
We'll just go in to a meeting room, we'll sit down and we'll discuss and
-
12:52
solve it there.
-
12:53
We didn't do that.
-
12:55
The next gen.
-
12:56
God. [LAUGH] Which is dead now.
-
12:58
The next gen team who was responsible for
-
13:00
delivering the new website was made up of designers, developers, products,
-
13:06
editorial, we annexed a small part of that team.
-
13:11
So just five people.
-
13:11
We went into a separate room.
-
13:14
We sat down and our one outcome was to solve the problem.
-
13:21
Not actually come up or define the problem sorry, not solve anything,
-
13:25
not come up with amazing designs.
-
13:26
Just come up with a concept.
-
13:28
It's totally pressure free with six weeks and we were called Team Density.
-
13:34
[LAUGH] So the leadership team it was made up of like senior product people,
-
13:39
went away and gave us a time box challenge.
-
13:43
So they broke apart their, what they thought the problem was.
-
13:45
Cuz we weren't just gonna go into a room and just make up the problem ourselves.
-
13:48
They came with a bunch of requirements for us to come out of.
-
13:52
So they wanted us to, they assigned us a goal to be achievable in two months.
-
13:57
They wrote a series of assumptions whether we followed those or not was up to us.
-
14:00
We had initial sketch week, where there is no pressure at all.
-
14:03
Just think of anything you could, potentially what the problem could be.
-
14:07
And at the end come up with some defined input, so whether or not we actually make
-
14:11
recommendations, or whether or not we actually come up with designs.
-
14:14
Who knows? It was all up to us.
-
14:16
It was completely pressure free just think about it.
-
14:20
Leadership assumptions were as I guess as follows and
-
14:23
we kinda agreed on some of them.
-
14:25
Obviously these are comments those, the difficulty in understanding an overview
-
14:30
of articles or that sort of, I don't get this sense of an overview of news.
-
14:35
There's so much more scrolling and guessing involved in responsive design.
-
14:39
Obviously the old site reared its ugly head.
-
14:42
We weren't getting as much non content at the top of the page.
-
14:45
All of a sudden,
-
14:45
the whole top of the front page of the Guardian was dominated by news.
-
14:49
No non news whatsoever.
-
14:51
So we immediately thought, oh that's what we need to do.
-
14:54
That's how we fixed this problem.
-
14:55
And that's what we did the first time.
-
14:56
When we came in February and looked at that original design, we thought,
-
15:00
we know how to fix it, we just fixed this one bit of a problem.
-
15:03
And immediately off the bat, myself and the other designer in the team.
-
15:09
We're coming around this the same way.
-
15:11
We're not looking at this.
-
15:12
We're not talking about anything other than how we're gonna layout the page.
-
15:16
We're not actually talking about how people are actually consuming
-
15:19
the news on the page.
-
15:20
So we really needed to understand first off how people were
-
15:24
genuinely consuming our needs.
-
15:27
You would think immediately off the back of that.
-
15:29
Let's start with personas.
-
15:31
Cuz we can name a bunch of defined personas across all different use types.
-
15:36
But, against putting use personas, putting personas against a use agenda.
-
15:43
Is pretty much impossible to define.
-
15:45
You're talking about, I mean in one weekend that's just gone,
-
15:48
we've had an earthquake in Nepal.
-
15:50
Baltimore has declared a state of emergency.
-
15:53
And Keith Harris,
-
15:55
creator of Orville the Duck, literally just died like 30 minutes ago.
-
16:00
How do you, yeah I know.
-
16:02
But how do you design a user case for that?
-
16:06
It's impossible.
-
16:07
So what does an overview of news look like to an individual user?
-
16:11
Well it depends.
-
16:12
And it depends on when they're coming to the site, what their intentions are, and
-
16:16
this idea of modes of consumption.
-
16:18
Or I guess what is kind of a trendy term is jobs to be done.
-
16:22
So we all think about these things in terms of context and
-
16:26
we say yeah users come in for a commute and when they're at work and
-
16:29
when they're at home they're do different types of user understanding.
-
16:33
And we put those different types of contexts,
-
16:35
we actually applied three different modes of consumption against news consumption.
-
16:39
So update, extend, and discover.
-
16:42
Update is all about knowing, so just getting that top level skim of everything
-
16:46
that's happening right now, feeling like you're connected to the world.
-
16:51
Extend, you want to get a deeper understanding of a specific story.
-
16:56
So say from an update, you then come back to understand what's happened in Nepal.
-
17:02
Why has this happened.
-
17:03
Was it something underground?
-
17:05
Was it man made?
-
17:06
So on. And discover,
-
17:08
it's much more when you're like, when you're bored.
-
17:10
When you wanna relax.
-
17:11
This is much more the weekend type person.
-
17:14
So depending on the time of day or what the person's doing.
-
17:18
Readers, or our users, will use or enact one of several of these intentions
-
17:24
depending on whether it's a short form story, whether it's a massive story.
-
17:29
Ultimately, it depends.
-
17:31
So, we took all these consumption habits, we looked at this problem of news density
-
17:35
and what the biggest thing that we realized was,
-
17:39
was let's not think about this as a design challenge.
-
17:42
Let's not just make the image of it smaller.
-
17:43
Make the type a bit smaller.
-
17:45
Make it just a little bit more compelling.
-
17:47
Let's think about these, this context, these modes of consumption's, and
-
17:50
come up with a fresh perspective.
-
17:57
So, We had this team.
-
18:04
We had these modes of consumption.
-
18:06
So we had a kind of a way to sort of stack ourselves up.
-
18:10
And we went into a room.
-
18:12
And we spent, this is literally within about a couple of hours,
-
18:15
we started just sketching like crazy, and
-
18:18
we started falling into the same holes as the leadership team were.
-
18:22
Oh it could be about size, it could be white space.
-
18:25
It's the presentation of the story.
-
18:27
It's all these things that we've already covered around design and presentation.
-
18:34
The scannability of the view port it's the design, the context.
-
18:38
But that one thing, that context, that thing we were kind of,
-
18:41
we did all this thinking in the beginning and
-
18:44
we talked about our modes of consumption, and we think about these people,
-
18:48
and immediately this user context suddenly floats to the top.
-
18:51
And what is it the user's thinking about this layout?
-
18:54
What do they expect to see when they come to the page, and
-
18:57
it was only on the way to work.
-
19:00
And I was going through, there was a black fry station and I was literally about
-
19:04
to go into a tunnel and I thought, I need to load as much content around
-
19:08
the research of used consumption before I go into a tunnel and lose my connection.
-
19:14
And I was struck with a really, really interesting thought.
-
19:16
Did I actually have the time to download all the things I needed?
-
19:19
And I started to think about the time that it was taking me to read the news on my
-
19:24
commute and the time that I was spending reading news at work,
-
19:31
which is generally the time that I was spending reading news.
-
19:35
And this idea of time, the context sort of fed into time, and
-
19:39
it kinda stuck, and it was an easy word to work around.
-
19:43
So, I ran back in that morning and I found annoyingly this is out of context,
-
19:47
this was the smallest whiteboard I could find.
-
19:49
It was about an a3, and
-
19:51
I started writing literally every idea I could on this board.
-
19:54
Like five minute news, get the things you need, read the things you want,
-
20:00
But then we took a step back, brought some of the leadership team in,
-
20:05
and said what if news density isn't about space?
-
20:09
It's white space or sizer content.
-
20:12
What if density is about the time?
-
20:14
And this is the time that a user expects to spend on the page?
-
20:19
And if you apply that concept of time to the different modes of consumption,
-
20:24
it starts to form neatly into place.
-
20:26
So update, you would have a short amount of time, extend,
-
20:30
you would expect to spend a bit more time reading these, and
-
20:34
discover would be the most time that you would spend.
-
20:37
Here comes the science, we made an equation.
-
20:44
The user satisfaction of the page was
-
20:48
made successful by the perceived time and effort that a user expects to spend on
-
20:52
the page, including the presentation of variety of the content.
-
20:58
Now the presentation of variety of the content based on time feels like it
-
21:02
sort of depends on the speed of the story and how it's presented to the user, which
-
21:06
kind of fits nicely with Alan Rushbridge's sort of concept of fast and slow news.
-
21:11
So, or sorry, fast and slow journalism where something that's quick,
-
21:16
something that you just want to get a top level on.
-
21:18
Say for instance, a breaking news story and we don't have much information.
-
21:22
We just wanna tell you the bare bones.
-
21:24
We might not have a nice image, it doesn't matter.
-
21:26
And slow journalism is something deeper, it's more in depth.
-
21:29
We are allowing you to take more time over this because you expect to take more time,
-
21:34
so we designed it that way.
-
21:36
So fast journalism is simple looking.
-
21:38
It's easy and quick to scan, and it's really very much news focused.
-
21:44
Yes, we have some great news journalism,
-
21:46
but maybe at the time that the Nepal earthquake is happening,
-
21:48
we don't want to see incredible HD versions of shots of people being crushed.
-
21:54
We just wanna see the news.
-
21:56
We just wanna understand everything that's happening across the world right now.
-
21:59
And maybe we can do something really quick.
-
22:01
This is an example of the US front about a month ago.
-
22:04
And we start to look at, you know, these smaller images, slicker text.
-
22:12
It's a bit more uniform, it's sort of a four column layout.
-
22:17
Whereas, slow journalism is very much more visually rich, it's much larger.
-
22:22
We're expecting it to be more indulgent of this content.
-
22:25
This isn't content we just want you to consume really quickly.
-
22:27
We want you to deliberately take your time over it.
-
22:30
So something that's incredibly rich in color.
-
22:34
Something that has lots of visually rich indulgent stuff.
-
22:39
This is an example of the lifestyle front from a few months ago.
-
22:43
And you can immediately see there's much more color, it's much more visually rich.
-
22:48
I'd much rather see baked cod with pumpkin seed than someone missing a limb.
-
22:53
But it's just the way in the context.
-
22:55
We expect you to spend more time including this stuff.
-
22:58
That's not to say in the future when you come back to recap Nepal,
-
23:02
we wouldn't then allow you to indulge, take that time,
-
23:05
because you want to then better understand what's going on.
-
23:09
And yeah, we would even put in these full bleed
-
23:12
designs that I'll talk about in a little minute.
-
23:14
But we would expect you to spend more time on this page
-
23:18
because you have more time to spend.
-
23:22
So looking at that fast news and slow news and that update, extend,
-
23:25
discover, we applied different amounts of time to different stuff.
-
23:31
So update, you have a short amount of time, it's very much fast news.
-
23:35
Extend, with the more time, it kind of leans more towards slow news.
-
23:39
And then finally discover, when you have the most time, it's definitely slow news.
-
23:43
So one of the main things that we came out of this team density with was
-
23:48
we split the news container, the top news container, into headlines and highlights.
-
23:53
Very much that slow news and that fast news, to give our page a bit more balance.
-
23:57
To give our page a bit more of that meeting everyone a bit more halfway makes
-
24:02
our container ship very happy.
-
24:08
So that all sounds well and good,
-
24:11
but what happens if we want to take any one of those two things to the extreme?
-
24:15
And I'll only show the one example cuz I wanna leave a few minutes at the end for
-
24:18
any questions.
-
24:19
But what if we could take slow even slower?
-
24:22
What if we could push the pages even further?
-
24:26
And so, we would look at these slats, or these container layouts,
-
24:31
and we would think, is there a good variety of content and speed on this page?
-
24:36
You know, are we enacting this when someone looks at the page?
-
24:39
Do they think when something's wide, it's going to be really big,
-
24:41
it's really interesting,
-
24:42
when it's something small and narrow, that kind of flow, story of content.
-
24:46
I've got a couple of examples, one of them was something we called a joker card or
-
24:51
a joker container, which would kind of break all the rules of iGrid,
-
24:54
all the rules of our design principals.
-
24:56
It was a way for The Guardian to really experiment with being The Guardian,
-
25:00
I suppose, and pushing the design with animation was super, super rich.
-
25:05
It was so rich sometimes it actually broke the site.
-
25:08
[LAUGH] More often than not.
-
25:11
But you get the intent.
-
25:14
Right above it is something that's quite news focused, and
-
25:17
it's really stripped back.
-
25:18
It's just news, it's just text.
-
25:20
Whereas, right below it is something that's ridiculous.
-
25:23
I even think on the button there was a little shark fin that came out.
-
25:28
It was no expenses spared.
-
25:30
We just pushed it as far as we could because that was the place that we could.
-
25:35
And again, we have fantastic photojournalism at The Guardian, and
-
25:39
we wanted a place to showcase that, show it off.
-
25:43
But we didn't want to show it off right at top of the page all the time.
-
25:46
So we always placed right of bottom of every single front a sort of a gallery,
-
25:51
or a visual photographic treat for everyone to come back and experience.
-
25:56
And surprisingly,
-
25:57
we now get quite a lot more clicks at the bottom of the page then we used to.
-
26:01
Because people know now they can get our fantastic journalism in the same place
-
26:05
on every front.
-
26:06
So suddenly, that sort of initial stacked
-
26:10
100% with content suddenly becomes something that's a bit more flowing.
-
26:15
And we could start off with something really short, really succinct,
-
26:18
like headlines.
-
26:19
You expand into highlights, maybe you go back into a bit more news or
-
26:23
opinion, then we throw in like a joker container.
-
26:26
A few other containers around more news, non-news.
-
26:29
And then finally, with this big picture at the bottom.
-
26:32
And so suddenly that previous story or
-
26:34
that previous slide where you saw the design in was around sort of September,
-
26:40
this was the design we went with in January.
-
26:43
So immediately,
-
26:44
you're thrown with just the headlines, something that's really succinct.
-
26:49
It's really quite simple but depends on the type of story.
-
26:52
Again, we don't know what's going to happen.
-
26:54
And then the highlights, which are much more visually rich.
-
26:58
It's much more engaging.
-
26:59
We want you extend on those top stories.
-
27:02
We drop you into sport, where we might have a couple of pieces of opinion,
-
27:05
we might have some features.
-
27:09
And then we immediately have a joker card, a watch me date,
-
27:12
which is something that breaks all the rules.
-
27:15
And below it, again, is news.
-
27:16
So you can start to see the sort of flow of the page going over time.
-
27:22
It's not an exact science, this isn't a silver bullet, but it works for us.
-
27:26
And it works for our editorial team,
-
27:28
when they want to sort of mix and match different types of content.
-
27:31
I'm not saying right now if you went to the front it's gonna be very small.
-
27:35
The headlines are probably gonna be massive, because there are four or
-
27:38
five massive stories happening right at once,
-
27:40
and that's another challenge we kind of have to look at with this.
-
27:43
But if we approach it from the time that user expects to spend,
-
27:47
hopefully we can start to sort of solve some of these difficult
-
27:49
responsive design problems on the home page.
-
27:53
And one really quite unexpected thing that happened
-
27:57
was that people started changing how they talked about the home page,
-
28:00
and they started changing how they talked around how the home page was designed.
-
28:05
And it wasn't just about how this piece is designed, it was whether or
-
28:10
not it was fast or it was slow.
-
28:12
Well, how much time do we think someone wants to spend on this individual story?
-
28:16
Do we want to make sure,
-
28:17
or do we want to tell the user that it's something you can spend a lot of time on.
-
28:20
It's a big long read or it's just gonna be a few lines, don't worry.
-
28:26
So we would take every single front and we would go into a room and we would say,
-
28:30
does this container need to be this fast?
-
28:32
Does this container needs to be this fast?
-
28:34
Are we getting a good flow across different pages?
-
28:37
In our fronts tool, we actually name our containers based on speed and time.
-
28:42
This was completely unexpected out of six weeks of a project, but it's amazing how
-
28:46
many people started to talk about this sort of all encompassing idea of time, and
-
28:51
how we can break it down into little bits, and it can affect design.
-
28:53
But it also affects the way that people talk about stuff.
-
28:57
So, I'm not a huge one for giving takeaways.
-
29:02
I've got a few, some of them are probably quite obvious, but
-
29:04
I don't want to yeah, be a prophet about that type of stuff.
-
29:09
Anyway, the first one I wanna say is,
-
29:13
don't just go into a meeting room if you have a massive problem and
-
29:16
it's a big scary problem, and just come up with a big quick solution.
-
29:20
Even if you lose some money, or some time, take the time to do it well.
-
29:25
Take the time to understand why it's a problem, cuz if you don't,
-
29:28
it'll just come back and kick you in the backside again and again and again.
-
29:32
It happened to us, and it just took us to admit that we needed to do that.
-
29:37
Maybe this is only because it's a big organization, but when you're doing
-
29:41
something that's quite big, you know, you're tackling the homepage.
-
29:44
People think in news that it's the center of the universe.
-
29:47
You don't want to step on people's toes.
-
29:49
You're constantly in that battle around making sure you're negotiating.
-
29:52
Is everyone on the same page?
-
29:54
Do they agree with what you say?
-
30:00
I think I wrote this a couple of months ago, and now I look at it, and
-
30:02
it's really stupid.
-
30:03
It's really obvious, right?
-
30:05
Small teams move quickest.
-
30:07
I think it's kind of a bit more like this, so
-
30:14
it's not teams, small teams on big projects.
-
30:18
It's teams working on small projects,
-
30:20
or teams thinking about small bits of a large project.
-
30:24
Like if you can solve the crux of it, maybe that's the problem,
-
30:26
maybe that's a little piece.
-
30:27
If you pick pieces off and slowly build up some sort of tapestry,
-
30:31
you'll move a lot quicker, and by doing the first point,
-
30:35
where you understand the problem, you'll move quicker anyway.
-
30:41
This one's a bit more weird.
-
30:42
I mean, the whole talk was kind of around this idea of time and
-
30:45
it was quite abstract.
-
30:46
I kind of felt like the problem that we had,
-
30:50
this kind of news density problem needed a big, broad solution.
-
30:54
And we needed to accept that we were so focused on the design of the problem
-
30:59
that we weren't actually looking at the user's focus of this page.
-
31:02
We needed to take a big step back and
-
31:04
think about what the problem was from a non-design perspective.
-
31:09
Not to say that other news organizations will take this approach.
-
31:12
Containers, seems like some of them were doing it, I don't know.
-
31:15
But, yeah.
-
31:17
And last but not least, admit when you're wrong.
-
31:22
The container thing, yeah it works.
-
31:24
But it works after we admitted that we were implementing it in the wrong way.
-
31:28
We needed to look at it again.
-
31:30
We needed to admit that we needed to look at it again, and it was painful.
-
31:34
We fell out with a lot of people over the six week period.
-
31:37
But slowly but surely, people started coming back together, and as soon as
-
31:40
you got more people on your side from negotiating more, it kind of worked.
-
31:46
It makes it sound like it was perfect, but it wasn't.
-
31:48
It was really hard.
-
31:51
And yeah, the rest of the team have full credit on the fact that this was
-
31:56
an incredible job, and I was just one part of a huge process.
-
32:01
And there's a ton more work on this around fast and slow news journalism.
-
32:05
And the sort of intricacies of how those individual containers were put together.
-
32:09
But that's all I've got.
-
32:12
Thank you very much. [APPLAUSE]
-
32:16
[MUSIC]
You need to sign up for Treehouse in order to download course files.
Sign up