In January 2009 we were invited to take part in a paid pitch for the print redesign for the Swiss newspaper Tages-Anzeiger. All in all five agencies took part in the pitch. We were the only UX oriented agency. The story of a beautiful failure.

We put all eggs in one basket and worked for one month like mad men. We developed a pretty tight concept around the idea of usability, readability and cross media connection. Here is what we came up with:

Old Tages-Anzeiger (”before”) vs. Tages-Anzeiger by iA (”after”).

Concept

The concept was: Use all knowledge from contemporary user experience design and translate it to paper. Make the paper more usable, think cross media instead of separate media, while using the strength of the paper (pictures, info graphics, nice text) to the max. Keep the look as close as possible to the original brand and change the guts of the design. Make a product that people want to buy because it is more usable that the competitor, not because it wins graphic design prices.

Basic rule: Ignore all rules of newspaper design to start with and keep only the ones that are useful to the reader:

1. Optimize text for reading: Big leading, big body text. We did several reading tests and found this combination to work best for reading. We perfectly knew that this leading doesn’t look very newspaper like (see Basic Rule).
2. Reduction to two fonts: Frutiger Next and the new, amazing Frutiger Serif, a heavenly fit, honoring the great Adrian Frutiger for his life work.
3. Scannability and print link: Make the articles scannable by using key words in blue. If you speak German you can actually read the front page in 20 seconds by flying over the blue key words. It gets better: If you type any of those key words on the website search, you will get a list of articles with the respective keyword in a chronological order. That way you avoid the necessity to print http;//www.abc.com/abc style links in print. Links in print obviously doesn’t mean that you can click it, it means linking the paper to the online edition.
4. Order: Every page is structured from top left to bottom right. Important articles are top left, unimportant ones are bottom right.
5. Four columns for soft news, five columns for hard news, mixed 4/5 columns for sports. Ragged text for opinion.
6. Big pictures, big info graphics, use the strength of the paper medium

Samples

Here are some pictures and comments that illustrate our concept. First, the highly controversial, radical core piece: Blue keywords. Very useful but technically and aesthetically a very tough call:

What’s that blue stuff? The idea is making the pages more scannable by using key words in blue. If you speak German you can actually read the front page in 20 seconds by flying over the blue key words. The idea is that if you type any of those key words on the website search, you will get a lit of articles in a chronological order about that subject. Links in print obviously doesn’t mean that you can click it, it means linking the paper to the online edition.

Wissen, Infographic, Center Fold: The center fold should have poster quality. The centerfold should be so nice that you want to take it out and hang it on the wall. Original infographic by iA’s Takeshi Tanaka.

Wirtschaft and Opinion: Here you can see the combination hard news (Economy) with 5 columns and Opinion with 4 columns ragged next to each other.

Front with Big Picture: The front with a big horizontal picture. Part of the concept was that you can use different kinds of formats. Horizontal, vertical, square. The only common denominator was that it had to be B I G.

Logo: We redesigned the logo, gave the coat of arms more plasticity and prominence and corrected the inconsistencies of the original logo. We invested a lot of time improving the mark.

Front Page: This is a variation with a comment section. Sport: Notice the 4/5 column mix. The idea was: 4 columns for soft news, 5 columns for hard news. As a mix, Sport gets a dynamic 4/5 column layout.

Zürich und Region: Example of the Zurich section. Notice the big reader comment on the top right, next to the article it comments on. One idea was to collect the best reader comments and print them in the next edition of the paper, right next to the article.

Wirtschaft: Example of the front page of the economy section. Five columns, big dynamic info graphic. Info graphic is an example (original graphic by densitydesign).

Learnings

Even though we do have experienced paper typographers and some advantage because of the huge success of the web projects we did for Tamedia, designing a newspaper in one month and beating agencies that are specialized in newspaper design was a steep climb. Losing my first pitch where I gave everything hurt my ego at a time where there seemed no limits to what we can do–in other words: at the right time.

Sometimes passion is not enough. I felt that during the presentation my usual approach (”Speak the truth no matter what and let your passion guide you”) didn’t quite work, as speaking the truth I called the front page “start page” several times and used typical web designer lingo (”user” instead of “reader”, “page views”, “link” instead “key word”). Instead of showing that we can do it, I showed that we’re a full blood news site design agency.

Please understand: I still want to design a physical paper. And I still believe in the keyword approach. There are many things I’d do differently this time though. But that’s another article.

Looking back it was probably good for iA that we lost the pitch because at the time we actually couldn’t handle the pressure of redesigning both ZEIT ONLINE and the new paper edition of Tages-Anzeiger.

And in all fairness, I have to say that in the end the better man won. Tom Menzi, with whom we had the pleasure to work at a later phase of the project, was the better man for the job.

As an experienced newspaper designer and former art director of Tages-Anzeiger he knows the exact processes and needs of a daily newspaper. Look for yourself: His work is just gorgeous.

UPDATE: Original Presentation, PDFs and Newspaper Design Guru Mario García’s Feedback

You can now download the full 17-page pitch presentation for the Tages-Anzeiger pitch we did in January 2009. It’s the exact presentation we held at Tages-Anzeiger. News paper design Guru Mario García liked our design and asked for more info. So we send him the presentation. We would now like to share it with all of you:

• DOWNLOAD1: Tages-Anzeiger pitch presentation
  
• DOWNLOAD2: the original PDFs here.

It gives you a rare insight how we present. It’s very visual and it contains the design process. It’s in German, but I give you the English translation down below. It’s subdivided into 3 parts:

I. Three Premisses

1. The Masses are not Wise …but the have become much more powerful.
2. The Reader now is a User …she is in control.
3. Newspapers need to Change: …user experience is (the) key.

II. Three Guidelines

1. Improve Readability …and make the newspaper scannable.
2. Stay True to the Medium …with optimal reading typography, big images and prominent info graphics.
3. Mary Print and Online <…because Brand=UX

III. Design Process

The secion presents our (very) unorthodox method: Instead of saying: “This is it, eat or die, we tried everything.” When we present a share the whole design process with all its flaws, so the customer can see THAT we really tried. iA usually produces 100s of screens and variations. We figured that there is nothing wrong with showing variations, if you show ALL of them.

IV. The Final Concept

1. Typography: Reduce everything to Frutiger & Frutiger Serif
2. Vertical Grid: 5 columns for front, secion top pages and hard news, four columns for opinion and panorama, dynamic (mixing 4 and 5 columns) for sports
3. Horizontal Grid: Minimal header, 1 big picture per page, big reading optimized leading
4. Front Page: Reduced sky boxes, grouping information that belongs together (metatext like date, price etc), footer with content overview and eye catching funny articles, reader pictures and info graphics. Small header for section pages
5. Logo: New, vectorized, 3 dimensional and with more impact.
6. Section Pages: Reduced header and one massive info graphic or picture
7. Article Pages: No mosaic principle. Simple structure top left bottom right.
8. Opinion: 4 columns, lots of white space, no blue links, ragged.
9. Print Links (we called it “Print-Tagging and Scann text”): Key words in blue. Replaces URL-Chaos and allows quick text scanning. Better reading efficiency. Exact Color tone needs to be tested.

NOTE: Please keep in mind that this represents our know-how as of January 2009. Of course, in the mean time we’d have a lot of new, more exciting ideas. If you plan to redesign your newspaper and like what you see, don’t be shy to give us a shout. Enjoy!

You can follow iA on Twitter by clicking HERE