How we Made the Digital «NZZ am Sonntag» Faster, Prettier and More Personal
We did a complete redesign of the website of the «NZZ am Sonntag», one of Switzerland’s leading Sunday papers. We reworked all overview pages and articles and optimized them for mobile devices. Additionally, we implemented new features like bookmarking, personalized article recommendations and built the platform from scratch on a new front end technology.
The result: A faster, more personal and prettier website for «NZZ am Sonntag», that on the one hand, takes into account the media usage on weekends and the character of the «NZZ am Sonntag» as a weekly magazine. On the other hand, it gives the editorial team much more flexibility in displaying content.
Apart from the result that you can have a look at over here, let me highlight some key aspects of the redesign.
The digital «NZZ am Sonntag» as a Weekly Magazine
Most of the visits on the website of «NZZ am Sonntag» happen on the weekend. 70% of these visits happen on smartphones and other mobile devices. So we had the ambition to transfer the pleasure of reading that is the focus of the print edition, to mobile devices.
In order to do this, we opted for a generous design with clear fonts, large images and lots of white space. We also picked some striking colors that help us to set accents and guide the readers. By this, the character of the digital «NZZ am Sonntag» becomes noticeable even on the smallest screens.
On the front page, we kept the containers and categories that had proven themselves in the past, like the daily changing recommendations by the editorial staff. In order to optimize the orientation on the site, we created new areas, like a separate area for opinion pieces, as well as a personalized area in which logged-in users can find a selection of articles that are most relevant to them.
We also put a lot of effort into a completely new design of the articles. Here we focussed on the joy of reading. We removed all the unnecessary features that could distract our readers from the content. Other features, like the sharing icons that disappear as soon as users start scrolling, were designed in a way that they do not interfere with the content.
Additionally, we brought the digital «NZZ am Sonntag» a lot closer to its daily counterpart, «Neue Zürcher Zeitung». We used similar fonts, designed features like the navigation in the same way and used the same icon language. Now it becomes much more clear that the two platforms belong to the same family of products.
The most significant approximation, however, was in terms of technology. The two platforms will run on the same code base. This means that in the future we can develop and iterate them at the same time and much faster.
A New Frontend for a better Performance
The digital «NZZ am Sonntag» runs on a new, modern frontend technology called VueJS and NuxtJS and is therefore significantly faster and has a much better performance than before the relaunch.
To ensure a successful change of technology, the backend and frontend were completely rebuilt and existing API interfaces optimized. All external scripts and services still work with the new technology, some of them even better than before.
All this means that the users will experience a much better and more powerful website. After the redesign, the entire website is loaded as soon as it is opened in the browser. After that only the areas and content that changed since the initial load will update. This means that especially articles load significantly faster now; while still a website, it feels like an app.
Speaking in numbers this means that we were able to shorten the server response from 2.5 to 0.2 seconds and that we could decrease the initial loading size of the website from 12MB to 1.5MB. So, the website now loads 80% faster than before.
Our Approach: Cross-functional, user-centered, mobile-first and self-governed
By choosing this approach we were able to implement new ways of working in our and in related teams. This will make us much faster and more efficient in future projects. The whole redesign of the digital «NZZ am Sonntag» was done in three quarters. During the whole project, we worked among these four principles.
- We work cross-functional and across departments: The teams in the design & concept phase consisted of representatives from product design, the editorial team and product management. We were in close daily contact with technology and other areas such as marketing.
- Decisions were made in the self-governed project team: All decisions we had to make in the project were made by the experts in the project teams. Important stakeholders, such as the editor-in-chief or the head of customer marketing, were informed during workshop visits and in a final presentation.
- We always focus on our users: New features and designs were tested with users and iterated on the basis of feedback. In surveys, we checked the comprehensibility of titles and formulations, as well as the relevance of the visibility of the departments on the start page. We also heavily tested the redesign of the article templates in several interviews and iterations with our readers.
- We think and work mobile-first: The mobile use-case was at the core of all our considerations and decisions. In addition to good usability and readability, it was also our aim to create an experience that would make the magazine-like character of the «NZZ am Sonntag» noticeable on small screens.
Last but not least: The Team
Without the great cross-functional, highly motivated and hard-working team this project would not have been possible.
Product Management: Katrin Huth (Redesign), Patrick Bühler (Rework of the Article Templates)
Product Owner & Project Lead Implementation: Christian Stettler
Concept: Florian Steglich, Claudia Weber
Design: Andres Kaminski, Sam Murray
Rep of the Editorial Team & Head of Digital «NZZ am Sonntag»: Marco Metzler
User Research: Sabrina Peterer
Implementation: Bartosz Podlewski, Goran Kosutic, Sebastian Luckos, Micha Schwendner, Volodymyr Fertak, Cristina Kadar, Claudia Lackner, Martin Schuster, Georg Schneider
A big thank you to the whole team and everyone else who was involved in the project, you rock!
