First things first
Let me pick up the story from where I left it in my previous post “A front page dilemma“.
CHINOOK is a piece of a clever software, a library, a layout-ing engine, that can take any set of articles and stack them together, to make the final outcome look like today’s Aftenposten’s front page – aftenposten.no
Unlike drFront, our solution doesn’t require any manual work or attention from the journalists. Our library allows delivering partly personalized front page without any loss in the look & feel specific for Aftenposten.
As you remember, the front page is a very important part of any website. Moreover, if your website is, in fact, an internet face of a nationwide newspaper, then suddenly the front page becomes a crucial part of your operation. As stated in the previous article, there’s a lot going on behind the scenes.
These are the actual challenges we faced:
- How to measure the overall impact of the changes made by our team in the ever changing environment of news?
- How to split the responsibilities?
- How to organize and synchronize work of several teams?
Let me elaborate on this topic…
First of all, we had to name the metric that could be used across the website. CTR (click through rate) among many is the simplest one. It’s easy to measure, easy to understand and unfortunately easy to trick (as mentioned in my first blog post “The history of news: from printed newspapers to Social Media“). CTR is a very popular metric used by all websites and Aftenposten is no exception. So it shouldn’t surprise you that the results of our work and the impact on the front page would be analyzed in the context of CTR.
Bearing this in mind we had to ask ourselves the next question: Who or what else might impact CTR? In general, there are several factors that can influence users and make them click. It can be a story that they are interested in, it can be a tricky headline that lures them into clicking for more, it can be the way the article is presented (headline color, interesting image), or it can be the general layout of the front page.
At first glance, it was hard to draw the line between different components. We needed that to make sure we didn’t step on each others’ toes. According to the good practice of focusing on the things you can control, we decided to break this problem into two main parts. First one was the “content selection” – what actually got to the front page. The second one was the “layout and design”, in other words, how stories were presented. When we cleared that out it became obvious that as a team of web developers we controlled the presentation aspect of the front page. Therefore, we decided to act upon that direction.
From now on we started to communicate to the rest of the surrounding teams that we require the list of articles that should be present on the front page. Soon enough everyone understood that our role was to automatically render the front page. We were NOT to decide what was getting there in the first place. The selection of the content was the responsibility of a completely different team.
Presentation aspect of the front page – Layout it is
Let’s stop here for a moment. As explained in the previous article, Aftenposten has a separate version of its website for mobile and desktop/tablet. I will not dwell on the reasons for that, but let’s just focus on what it means for us.
First, let’s have a quick look on the mobile version of Aftenposten:
As you can see, there is not much going on in terms of layout. It is imposed by the small size of the screen along with the requirement of showing relatively big images and easy-to-read titles. All in all, there is not much room for experiments. And believe me, we did experiment with different presentations on mobile. This is as far as we can get.
Despite the look and feel of the mobile front page, there isn’t that much going on in terms of article stacking. Since this is a basic list, the only indication of the importance of the story is its position. The user always starts at the top of the page and there is only one direction of scanning through – going down.
Now let us have a look at desktop version:
Most definitely there is much more happening here. First and foremost – what you see above is the result of manual work of a front page editor. Aftenposten uses drFront as a WYSIWYG (what you see is what you get) tool to publish articles, adjust headlines or images and stack stories together on the front page. This tool gives full control over two aspects: what gets to the front page (content selection), and what it looks like – font size of headlines, image crop and general composition of articles. What’s the drawback? Well, it doesn’t scale. And since this is manual labor done by a number people, they are able to control only one version of the front page.
Getting back to the layout itself. Let us start from how articles are grouped together. On mobile, the position on the feed indicated the importance of the story. On desktop, however, it’s not that clear anymore. Of course, the higher the position, the higher the importance, yet there are several articles on the same “level”. To distinguish the top stories from the rest, editors often increase the font size of the headline and use a big image. Next thing – top stories are spread across the whole front page. You can’t group them all of together. Why? First of all, if all stories on top are important, it is impossible for the users to see the difference between the less and more important news. As the second benefit of this approach, we invite our user to scroll down through the page and discover other interesting articles.
DrFront gives the editors complete freedom in terms of article stacking. But there are some rules limiting what they can and what they mustn’t do and what is forbidden. Over the years, they have learned what works best for the users. Editors can also heavily influence the visual presentation of the articles by simply changing the background color or altering headline: either by rewriting it or by breaking lines. They can also change font size and image. They can do literally everything to fit the selected article in its given position.
As you can see, the decision-making process behind creating the front page for desktop is way more complex than for mobile. And our task was to automate it. How did we tackle the problem?
Breaking the problem into smaller parts
To start coding, we had to understand the whole process. In order to do that we worked closely with the product owner and representative of front page editors. We spent a lot of time drawing different scenarios on whiteboards. At this stage, we wanted to abstract the general rules. We had to define what was guaranteed, what data came along with the article, and what additional metadata we needed to create an algorithm that could automatically recreate the look & feel of the existing aftenposten.no
On mobile things are simple:
Color indicates the significance of each story. This can be easily transferred to the position on the list. There is no room for any interpretation. When, in the next step, we take the same set of articles and bring them to the desktop, we can get something like this:
… or like this:
or
Or any other configuration for that matter. At this point, we started asking plenty of questions to nail down what was behind the decision which version could be presented to the users.
At the same time, we were discussing the article teaser itself. From now on I will use the term “article teaser” as in order to refer to a piece of content visible on the front page linking to an actual article. If you look at the examples I shared above, you will see that the same article teaser can be presented in many different ways. A complete layout is not only about the order of article teasers. It also means proper visual presentation of each teaser. And they do influence heavily one another. If an image that comes together with a teaser has portrait orientation, it instantly narrows down the number of possible options of presenting. The same goes for the length of the headline – it can be short, (e.g. two or three words) or extremely long.
For the front page editors, this complexity was nothing bad. They could imagine different ways of presentation, then implement it and decide whether it was good enough or not. What’s more, they understood the headline text and they were able to cut it or introduce slight modifications to fit it into available space. They were able to do the same with images: if it didn’t fit, they were always able to find a new one and use it instead of the default. As the result, the Aftenposten’s front page was to be nearly “pixel perfect”. And our task was to deliver similar results automatically, while keeping the complexity.
Conclusion
Right from the beginning, we felt this project was not going to be a piece of cake. However, following our research, its complexity exceeded our expectations. Finally, at the end of this phase, we managed to grasp and understand all the dependencies standing behind the process of creating the layout of the front page.
In the next article, I will explain how we took all the findings and proceed with further work to deliver CHINOOK.