Laying out the news: How the Atlantic and Zeit ONLINE do it
We talked to Betsy Cole, VP of product and design at the Atlantic, and Christoph Rauscher, art director at Zeit ONLINE, to get an insight into their recent layout changes.
How can you design for user experience and revenue? Which metrics should you be keeping an eye on? How can internal teams work together best to ensure a smooth transition?
‘We have changed in order to stay true to you’, wrote Jochen Wegener, editor-in-chief of Zeit ONLINE on the publication’s blog in 2015 to introduce the website’s new look. The relaunch focused on better readability, introducing innovative ways of storytelling, and the homepage as an entry point to Zeit ONLINE’s journalism. More recently, new formats, such as podcasts and interactive tools have been added. In 2017, for example, a fun feature where readers can share how they feel was placed on the site.
We had a quick chat with Christoph Rauscher, art director at Zeit ONLINE, and these were the main takeaways (edited for clarity and brevity):
A news site is a digital product, it has to change and evolve constantly.
The process
‘The relaunch of the whole site took us about a year. We developed the site in an agile way: Every two weeks we met with the whole team, which includes developers, designers, and editors-in-chief to review the features and changes that were developed. Afterwards, we would plan the following two weeks. Usually, the design team was one or two weeks ahead to explore new ideas and design challenges, and they would then sit together with the developers to talk about the best possible implementation.’
Developing personas for the relaunch
‘We have a fairly active community and put a lot of effort in staying in touch with them. In the product development team, we always reflect on how we want the site to be used and how the site actually is used by our readers. For the relaunch in 2015, we developed personas, which were based on interviews we did with readers we already knew and with ‘fictional’ readers we wanted to reach. We had about five personae roughly aged between 20 and 55. We defined their needs and use cases: When are they visiting our site? How much time do they have? What are they interested in? Which device are they using? With these users in mind, we developed features and used them to proof our ideas.
Based on these personae, we gathered a focus group of around 50 people to continuously ask for feedback. We still invite users regularly to talk about the site and their needs and expectations’.
The big changes
- Making the site fully responsive;
- A new set of typefaces for the site;
- A new color palette;
- Focus more on ideation workshops and introduced methods for fast prototyping.
‘We didn’t only redesign the site, but we also relaunched the way we work together fundamentally, and that is reflected in the product.’
Don’t relaunch everything with a big bang
‘When it comes to visual design, we’re trying not to relaunch everything with a big bang, but we’d rather do it organically and introduce (as well as remove!) things step by step.
With the 2015 relaunch, we changed a lot of visual components: the typography was just one of them. We added a more elaborate colour palette and we put a lot of love into typographical details and readability. We didn’t use webfonts before the relaunch and with the introduction of the typefaces Tablet Gothic and FF Franziska, we enhanced the branding of ZEIT ONLINE, too. The whole rebrush was communicated openly with other design departments from the printed newspaper DIE ZEIT. However, we wanted the digital edition to have its own personality, like all our verticals (such as ZEIT Campus, our student’s offering, or ZEIT Magazin, the lifestyle magazine) do’.
‘We removed little features and details that once were cool or useful, but which by now might not fit our brand or product anymore. We usually A/B test these features and their removal, and then decide whether we want to keep them or not.’
New digital storytelling formats
We launched with two big features: One is Card stacks, a mobile format to swipe through shorter content like text, gif images, videos and quick questions that challenge the reader.
My favourite newly introduced format is the Live Dossier. With that, we wanted to make content accessible in a very fast but very deep way. The dossier is composed of several ‘atoms’, which allow the reader to dive deeper and read background stories on certain events. Or, if the reader wants a quick overview of a complex situation, they can simply read the dossier like a regular article.
Mobile: the devil is in the details
‘Our site’s layout grows and shrinks organically depending on the devices. On mobile, we also remove certain elements like images, and simplify layouts to make features more easily accessible. The same goes for colours: we have such a diverse group of readers that we have to keep the site’s accessibility (colour contrast, hierarchical semantics and text sizes, for example) to a high standard. Speed is also key: that’s why we developed the site mobile-first and progressively enhance it depending on the reader’s device and network. Design details matter, especially when it comes to mobile platforms: It’s weird to find an iOS interface pattern when you’re on an android phone, and vice versa, so we have to keep all these dependencies and environments in mind and test the product thoroughly.’
Ouch, ads!
‘We are not fully independent when it comes to the ads that are shown. But we always make sure that advertisement is properly labelled and we avoid take-over ads that are too annoying as much as we can. We also keep advertisement in mind during the design process and try to avoid intrusive interface overlays for our newsletters. We keep these elements integrated within our general layout and design system.’
The average reader
‘We have a lot of young readers; students and young professionals, but also readers between their 40s and 60s. The most important and interesting fact is that our readers have an extremely strong connection to our brand. Our readers all have a high standard in quality and are very opinionated and keen to debate and shape the future — which we address with our products, too. This year, we launched ‘My Country Talks’ where we, together with other media partners, built a tool that matches people with different political opinions. These matches are asked to meet and debate in real life on 23 September this year. I am really curious how these matches and meeting will turn out! We did a similar matching already last year. ‘Germany talks’ and the feedback was great.’
The Atlantic
The Atlantic launched its new homepage in 2017. In June of this year, it rolled out a new and improved article page that loads faster aims to increase engagement and loyalty. Here are the takeaways from our conversation with Betsy Cole, VP of Product at the Atlantic (edited for clarity and brevity):
First things first: data
‘When we decide to tackle a project like the redesigns, we’re looking at data:
- How many page views and unique users do we have?
- What’s our recirculation: how many articles do people read when they come to the site each time?
But data can only give you part of the picture so we’re also looking at user feedback. For the homepage redesign, before we even started writing the requirements, we invited people we solicited on our own homepage into the DC office. We asked them to talk to us about how they used the page, what they think of various sections, and what they understand those sections to be. It was very informative as there were a couple of things that were different to our expectations. For example, before the redesign, the entire homepage was curated. Readers didn’t understand that, they thought only the top was. By moving away from a curated river (Editors note: probably more commonly known as stream), the CMS became faster and the editorial team had a lot less production work to do multiple times a day. This meant that we gave a lot of time back to our editorial team, which is something that we wouldn’t have known had we not spoken to our readers.’
‘We used to only do user testing with readers who could come into the office. But that skews our sample because you have to be within reasonable travel distance of the D.C. office. We now use usertesting.com and it’s instrumental in answering questions if there’s any doubt about which is the right path forward. That’s been hugely helpful.’
Need for speed
‘The article page redesign was very focused on performance. I have a talented front end lead developer who is really interested in building blazingly fast sites. He was doing performance testing every couple of days to see if we had introduced something in the the latest work on the article page that hurt our performance. There’s a site that ranks the load time of around 45 to 50 major news organisations and we were somewhere in the 30s before. And now we’re in the single digits! City Lab has been number one since it was redesigned in 2017. Atlantic is number six or seven right now and we’re really pleased with that.’
‘Google prioritises speed, people on phones don’t want to wait around for ten seconds for sites to load, and ads can be very slow. Everything that we can do to improve the user experience is really to speed up the load that we can control. That’s been a big focus for us and I think we’ve seen it pay out.’
‘Custom fonts, for example, were slowing down the load time. The font that we wanted to use had a bunch of excessive characters in it that we would never use on our site so we made sure to have a file that only included the characters that we needed. Once they were cut, the site loaded a lot faster.’
Metrics that matter
‘Loyalty is one of the big metrics that we focus on. Do you sign up for a newsletter? Do you buy a subscription? Do you start following us on Facebook or do you build a relationship with us that is deeper than just reading one article and never coming back again? The goal is to find a headline the reader is interested in and we show you other headlines that keep you around.’
‘We’re tracking newsletter sign ups very closely and we had one newsletter sign up module on the old site that was very effective for us, so we wanted to make sure we kept that steady or improved on it.’
‘We’re looking at the performance of ads: how many ads per page view do we have? What’s the click through rate on those ads? What’s the click through on native promos and how much organic traffic are we driving to sponsored content?’
The process
‘We rolled out our article page redesign in a private beta first. This allowed our editors to look at the new site and the old site side by side, which is how we found a couple of obscure bugs.
We then went to one percent of our audience to confirm that our analytics were working properly and that we didn’t have any uncaught server errors that didn’t surface during the private beta. We found a couple of things in the reporting that we needed to fix so it was very helpful exercise to dip our toes in. We then went to ten percent of our audience and focused on ad tweaks to find that perfect balance between user experience and revenue. We worked very closely with the analytics team to read that ten percent with certainty: Yes, we’ve improved loyalty. No we haven’t hurt revenue. And yes, we’ve improved recirculation. The developers also created side by side videos of the old and the new site loading to show our stakeholders how much faster the new site was in comparison to the old site.’
Cross functional teams
‘We have cross-functional teams for our major redesigns: they’re led by the product managers but they include editorial stakeholders, consumer marketing stakeholders for circulation and loyalty needs, sales and marketing to tell us what they’re hearing in the market when it comes to ad placements, and the analytics team to help us make sense of it all. I think those cross-functional teams have been very helpful for us. Making sure we are getting feedback from stakeholders means we’re bringing them along through the process so nobody feels like something has been done to them. This ultimately saves the product team from frustrating feedback. If we did something without input and the last person says ‘well that doesn’t work for me’, then we would be in a tough spot. Instead we partner with people along the entire redesign process and it’s proven to be helpful.’
Change is tough
‘We got more feedback from readers after the homepage changes than we did after the article changes. And that makes sense. The homepage has a very, very loyal audience that comes to us over and over and over. And change is tough. I am generally speaking not a fan of these massive redesigns where you change the homepage, the article page and all the landing pages as it is very disruptive to the reader. We prefer iterations: we like launching the article page and then running a series of tests to optimise it. When we did the homepage, it was a really big departure and so we had some people didn’t like it and others who loved it. We heard a lot less after the article redesign. This surprised me, because there’s always people who don’t like change and will tell you they don’t like change.
After making the changes, you have to maintain the monitoring for a period of time. You can’t look at the numbers a week later and say: oh okay it worked or it didn’t. You really have to be looking a week later, a month later, two months later, six months later, because news is cyclical and audiences take time to get used to change. We should be monitoring all of our products all the time but especially in the wake of a major redesign you need to keep an extra close eye on how things are performing.’
Don’t change for the sake of change
‘When we’ve done a major redesign, it’s always been to keep pace with some emerging trend or some new advancement. The last time that we did a major redesign before this was when when responsive web design became a thing. We had a desktop site and we had a mobile site and we didn’t have anything in between. I don’t think that you need to change for the sake of change, but I think you need a change when there is something important that’s pushing you that way. In our case we didn’t think the site was fast enough, so we really wanted to improve the performance.’
Betsy Cole is vice president of product and design at the Atlantic.
Christoph Rauscher is the art director at Zeit ONLINE. You can find more of his work here.
