New USA Today website ‘very, very influenced by iPad design’

When “the nation’s newspaper” decided to redesign its website alongside its print product for its 30th anniversary, it chose an international team of Web designers based in the U.S. and abroad. Fantasy Interactive’s CEO and founder, David Martin, calls his digital agency a “small boutique,” but it counts big names among its clients: Sony, Google and now, America’s second largest newspaper by circulation, USA Today.

Fi’s pitch won USA Today’s business in June 2011, and the beta site launched last week, when Poynter detailed the horizontal, app-like experience it provides for the reader.

Answering questions via phone and email from Fi’s Stockholm office this week were Martin; Irene Pereyra, global director of UX and strategy; and Anton Repponen, global creative director.

Poynter: I immersed myself in the print redesign before I checked out the beta site, so my first reaction was: Where’s that big blue ball everyone’s talking about?

Repponen: We were actually in early talks with the agency who redesigned the logo (Wolff Olins). So we were aware of where they were heading with print. I think from an early state with USA Today we have decided that it’s not going to be exactly the same. It’s a digital space. We don’t want the digital space to replicate exactly what’s in the print space. We were talking about keeping the color scheme, keeping the logo, but at the same time we wanted to dedicate actual screen space for news and imagery.

The site feels very different from the typical newspaper website. I imagine that was one of USA Today’s top goals when it came to you.

Repponen: Yes. Most designers actually design newspapers for the Web to look like a newspaper, to use a paper texture, to use that kind of typography. And we really wanted to stay away from that. We wanted to make this project interactive. It’s a USA Today Web-based app. It’s news, but it’s not a newspaper.

Pereyra: The goal really was to have it be interactively more aligned to what you currently see on iPads. We were very, very influenced by iPad design, and I think that’s probably the one thing that most users so far have commented on, is that they feel like the best of the iPad was brought to the Web. And that was really our goal from the beginning. Gannett’s goal was to basically have a site that stands head and shoulders above the rest. They wanted it to be different.

Martin: Also, from Fi’s perspective, from the very beginning, we’ve been battling with the website, where we feel websites inherently look very traditional. They take up a portrait space on a landscape screen. If you look at an iOS tablet, everyone is in love with all the apps because they fill the screen and look very visual. And so what we wanted to do was revitalize the website and use the amazing content that you can get from a news website such as USA Today and try to blow the roof off and revolutionize what the website was, which has been really a falling medium in comparison to applications such as iOS.

Horizontal scrolling is a primary navigational device, while layering information helps minimize scroling.

What specific issues did you see in other newspaper sites that you wanted to avoid here?

Pereyra: I think the biggest one is the overwhelming amount of content that you’re bombarded with as soon as you land on any page, long scrollable pages with a lot of content. We really wanted to focus the experience and allow people to really have almost snippets of what they care about as opposed to sort of a soup of content that they have to find their way through.

Repponen: Also, a lot of news sites always get hung up on the “above the fold” thing. We know that people scroll, we know that people actually interact with the site, so we were not really thinking about how much content we wanted to fit above the fold and make all the fonts very little just so we can fit like 30 different articles.

The ad integration feels pretty seamless.

Pereyra: A lot of traditional websites, and most news websites, utilize the standard IAB (Interactive Advertising Bureau) suite. IAB is a set of advertising solutions for the Web that advertisers buy, and the standard IAB suite, which has been used on almost all websites for the past 10 years, are the 300×250, the leaderboard, the skyscraper. And unfortunately, since they haven’t been innovative for so long, they are actually made for screen resolutions that are not really appropriate any more, so you always feel that they kind of hang out and stick out in awkward places in the design.

Repponen: Those standard banners limit designers a lot. So with USA Today we decided to create main layouts without accommodating for the standard banners and tried to solve it creatively.

Pereyra: Within Gannett, [chief digital officer] David Payne actually spearheaded this initiative, saying that he does not want IAB suite standard ads. So he gave us the freedom to come up with solutions that were going to be custom ads, and he was confident that he could still sell those spaces to advertisers. There’s been a lot of innovations in advertising, especially on the tablets, if you look at Flipboard for example. And that’s really the kind of experience he wanted, where it felt more like a digital magazine and there would be ads as interstitials almost as opposed to standard ads that hang out.

Ads are integrated into articles and also rotate among images on section fronts.

You said you try to get away from translating directly from print, but there are also elements that remind me of reading a newspaper. The way other sections peek out from the sides feels almost like sections of the newspaper waiting to be read. And clicking on stories stacks the content almost like paper. Was this intentional or just a consequence of how you cut down on hard refreshes?

Repponen: One of the main goals was not to make a website with deep navigation. The main framework works as a big carousel with all the sections always exposed in front of the user. Of course we’re taking the metaphor of reading newspapers, especially USA Today. When you unfold them those are going to be multiple different papers in different colors.

Reading the news, the way it appears on top as an overlay is done for two purposes. We don’t want to have a hard refresh to go deeper into the site. The feeling of the website, it looks like you are sitting in front of the desk, and then you put together all the nine separate papers, and then the moment you read the article is just an extra paper on top of what you were reading before. And then you can easily close out of it. So it’s extremely flat architecture. It’s literally just two layers for the entire site.

Fairly or not, USA Today historically has been mocked for being too reader friendly. It was derided as “McPaper,” only to have some of its features adopted by other papers. So do you foresee the new site being a model of sorts in the industry? Do you think other newspapers might go in this direction with their sites, or is this type of design unique to the experience USA Today wants to provide its readers?

Martin: Websites are becoming almost a secondary tool. So our approach is to compete and actually try to revolutionize the website. Use all the screen real estate; don’t just use some kind of portrait mode because you’re limited to a certain size or limited by an IAB-centered ad model. We’re trying to break those molds. We feel a lot will follow in our footsteps and hopefully it’s a new standard that we can help pioneer amongst other agencies and other fantastic work will come out that will be very similar over the next couple of years.

What was the biggest challenge with this redesign, and what are you most proud of about it?

Pereyra: We had to deal with a lot, a lot, a lot of content. You can probably imagine the amount of stakeholders and the amount of editors and the amount of infographics and articles. It was huge. It was a monster. Together with the client we made very bold decisions. We did things that we probably knew people were not going to be comfortable with, and we were, all of us together with the client, were really comfortable pushing it to a place where we may make people uncomfortable. And obviously with the amount of incredible feedback we’ve gotten we know that the bold decision was right.

How would you characterize feedback so far?

Martin: The client has been ecstatic. Their own feedback has been overwhelming. They knew they took a risk. I think they’re super relieved at what they’re seeing.

Pereyra: We got great feedback because it’s a great product, but also USA Today was very smart in doing a full relaunch and making a big deal about it. They revolutionized every single channel. And they released a huge amount of new stuff and a super bold redesign not just on the web but everywhere all at the same time, so obviously it created a lot of buzz.

And I think what I’m really happy about is that the majority of the feedback says “Oh my god, look at USA Today being so incredibly innovative and doing it across all of their channels.”

And I’m very proud that we as Fi, we’re a fairly small company, that we were part of something so large, together with Wolff Olins, who did all the branding, together with Gannett, who obviously initiated all this. The amount of feedback we’ve gotten is just overwhelming.