The Swiss newspaper NZZ just launched its much anticipated redesign. The design was made by the German agency Meiré and Meiré that has also done the print design. Commenting on work from people in your own field is a delicate matter. Usually, we don’t publicly comment on work by other agencies in our field. But besides that ballsy print campaign today (they printed the front with ones and zeros), there is a lot to like about this redesign.
The following critique is not only the first public critique of a product that competes with some of our clients, it is the first quick review that we publish. We write a lot of those when we look at the site of a new client or when we assess competitive Web sites for our clients. If you work in the industry, it will give you a insight on how we look at things.
Our reviews are short, cold and to the point. We do not intend in any way to bash the design. NZZ is one of the most prestigious journalistic products in Switzerland, and everything they do is high class. Even though NZZ is not our client we all read and love that newspaper.
Concept
Business Model
NZZ has announced that they will introduce a pay wall. Looking at the Website it is not immediately clear what the concept of that paywall is (the official statement is that it will be a metered paywall), but there are a lot of sales points embedded into the design.
The discussion about paywalls is a subject of its own, but if indeed the paywall comes up, the communication about how it works needs to be streamlined and the sales points should be reduced (if possible funneled to one central sales point). There is a lot to say about the new single brand with a unified newsroom but this is a quick review…
Information Architecture
If you have ever worked on a news project, you will be pleased to see how simple the new information architecture of the new NZZ site is. As a design agency, you usually do not have too much influence on the structure. The editors fight it out among themselves and you can just try to avoid the worst.
You might criticize Meiré and Meiré for some things that seem to point to a lack of conteporary technical potential of Web design, but the Information Architecture is spot on.
The meta navigation on the top of the page is split into two strings. There are eight content categories:
Aktuell (News)
Meinung (Opinion)
Finanzen (Finance)
Wissen (Knowledge)
Lebensart (Lifestyle)
Video (Video)
Dossiers
Marktplätze (Buy and Sell)
The News category is divided into nine sections:
International
Schweiz (Switzerland)
Wirtschaft (Economy)
Zürich
Feuilleton (Arts)
Digital
Sport
Panorama
The news sections are straight forward and correspond to the mental model of the print reader. The eight main categories have one or two debatable notions (why is “Lifestyle” there?), but overall this is a job well done.
Lovely details like the context-related search field beneath articles made us smile.
Marketing
While the aggressive integration of social media buttons with a floating panel is a debatable move, NZZ now seems to have a strong and real presence in social media, they are relaxed and casual and seem to respond really quickly. NZZ is regarded as a serious, dry publication, but the slightly more casual Twitter policy is appropriate for the medium.
The ad campaign: NZZ’s front page was printed in binary code. This shows that they are serious about what they do. That the Zwinglian “Old Lady” agreed on such a bold move cannot be applauded enough. The only minor stain: the ad agency (“JvM”) had to leave its trace in the header, which weakens the bad ass impact a tiny little bit.
NZZ head binary
01001110 01011010 01011010 translates as “NZZ”
01001010 01010110 01001101 translates as “JvM”
NZZ article binary (sample)
01000010 01100101 01110010 01101001 01100011 01101000 01110100 01100101 00100000 11111100 01100010 01100101 01110010 00100000 01101110 01100101 01110101 01100101 01110011 00100000 01001101 01100001 01110011 01110011 01100001 01101011 01100101 01110010 00100000 01101001 01101110 00100000 01010011 01111001 01110010 01101001 01100101 01101110 00001101 00001010 00001101 00001010 01010101 01101110 01101111 00101101 01000010 01100101 01101111 01100010 01100001 01100011 01101000 01110100 01100101 01110010 00100000 01110110 01101111 01101101 00100000 01010011 01100011 01101000 01100001 01110101 01110000 01101100 01100001 01110100 01111010 00100000 01100110 01100101 01110010 01101110 01100111 01100101 01101000 01100001 01101100 01110100 01100101 01101110 …translates as “Berichte über neues Massaker in Syrien” and “Uno-Beobachter vom Schauplatz ferngehalten”
Design
It is a bold move to get print and digital from the same hands. Print and Web seem similar yet they are completely different disciplines. Web design needs different engineering skills from print design. One can see both the benefit and the downside of a print designer taking matters in his own hands. And while it is not entirely fair to nail the deficiencies of the design to the fact that a print designer did it, it is also the risk you take when you work in another field.
The Good
On the positive side it is worth mentioning that the NZZ gives enough space to the masthead and doesn’t slavishly follow the above-the-fold/below-the-fold ideology. There is enough white space to make the page breathe. The Typography is systematic and on most monitors it is readable. There is advertisement but it doesn’t kill the page. The work of the picture editors is exemplary.
The negative aspects are longer but that’s also because it is always easier to point out negative aspects. Overall the new NZZ.ch is solid work. Okay, enough now with the excuses…
The Bad
The use of the real brand (NZZ instead of the obsolete NZZ Online) is the right move. That being said, all in all, the site doesn’t feel quite like NZZ just yet.
Interaction Design
On a PC, in general the interaction design is well crafted. Some downsizes though: The many flyouts in the header for promoting the various subscriptions break the decent appearance. Where the visual branding does a good job, the interaction branding leaves an experience somewhat of a mine field.
Some elements feel especially raw, like the “Lesertrend” box. Hovering to reveal additional information is not only unexpected, but slow in performance and partly breaking the design.
Advanced functions like bookmarking (“Merken”) don’t work properly (yet). If you try click on a star (which appears on mouse over), you won’t get any reaction, but the tool tip will change. On a second click nothing happens at all.
Information Design
The black bar navigation bar is a foreign body in the otherwise very reduced design; it splits the masthead from the body and creates trapped white space between the bar and the content section with the grey background.
The fade on the top is what Swiss designers call “schwurbel” or “gurk.” Warning: “gurk” doesn’t mean the same thing in English! Don’t even…
The grey background feels a little too dark, which makes the page look a little grim. The whitish background on some of the right column boxes break with the minimal approach of the main column that only uses horizontal lines.
The vertical rhythm needs optimization. Compared to the beta site is already substantially better (less holes), but overall it still feels somewhat random after two or three scrolls.
The article pages are readable but the overlong side bar kills the layout on pages with short articles.
Typography
In order to create a tighter integration with the print edition an obvious measure would have been to adapt the print typography. There might have been some concerns about performance, but technology is advanced enough to use a digitized version of the typeface used in print.
The current typographic definition has too many elements that resemble other competing newspapers that have been designed years ago under different technical conditions. This is a shame if you look at the treasure chest of ideas and elements that NZZ’s print design offers.
Side note: With new screens conquering the market the 15px body text will soon be too small.
Identity
The aggressive integration of Social Media Buttons on a high end journalistic product feels cheap and pays more into the social networks than into the brand. Alternatively, the curated integration of the best social Media comments into the article would add value and credibility to the brand.
Technology
If you are visiting nzz.ch today, you will likely encounter some issues, as usual in recently launched websites. However, there are a couple of problems that are obvious:
The first time the page renders, some elements are out of place (such as, for example, the tabbed articles being rendered on top of the main menu). Some seconds later, the page seems to re-render and all the elements go into the right place;
The social buttons seem to stutter as we scroll, being extremely distracting.
Despite these problems, there is something that is important to mention: the page loads blazing fast. No matter how good your IA and surface design is, a slow page sends those efforts to the toilet. NZZ got it right.
We noticed that although NZZ advertises that this website adapts to the device you’re visiting with, their adapting mechanism is not active yet. At the time of writing, both a smartphone and the iPad load the desktop version of the website, although they clearly have a mobile version. Despite this malfunction, the strategy NZZ adopted is clear: the mobile version is served separately, rather than having one responsive version.
Accessibility
The team behind nzz.ch took accessibility seriously. Looking into the code, one of the first elements is a (visually) hidden list of links. This list can be read by screen readers and allows visually impaired people to jump directly to a specific area before reading anything else. If this was not the case, a visually impaired person would have to skip 28 (!) links until he reached the actual content. This and other details make for a nice experience for a target group that is, more times than it should be, an afterthought.
Conclusion
The new information architecture with its reduced and clear structure is without any doubt one of the highlights of this redesign. The paywall is not activated yet and we don’t know enough details to make a substantial statement about the overall concept.
Using the mother brand in a more spacious masthead, breaking with the above-the-fold ideology are welcome design moves, but the redesign falls flat on the unused typographic potential that the print edition offers. The design has failed to translate the world class typography of the print product into digital. While even one year ago this would have been an understandable omission, today it is not anymore. The information design needs a lot of work to find the right density and clarity.
The CMS has some major relaunch problems that are apparent but that we cannot judge from outside. Hopefully these hiccups will disappear in the next few days. The frontend code is well executed, and the minor flaws it has can be fixed easily.