Systems Loop

UX and UI design for the new NZZ front page

The Neue Zürcher Zeitung rethought the front page of nzz.ch, mobile first. We helped with the UX and UI design, from the first workshops to a new teaser format.

The new full-screen teaser on the NZZ front page on two phones, in dark and light mode

Results

Approach
Mobile first
Scope
UX and UI
Market
Switzerland
Client
Neue Zürcher Zeitung
Industry
Media
Duration
Project
Services
Design

The brief

The NZZ wanted a new front page for nzz.ch, designed mobile first for readers and for the newsroom. The desktop version had to follow without extra layout work for the editors.

The new NZZ front page on two phones in front of the NZZ building at night

What we did

We worked on UX and UI design and on the ideas behind them. It started with reader feedback, then an ideation workshop and a mobile-first prototyping workshop with the editorial team.

Sticky notes clustering the ideas from the ideation workshop

Paper prototypes of the front page from the NZZ workshops

One result is a new teaser format for long reads. It fills the whole screen, in dark mode in the app and in light mode on the web.

Simon on a video call with the newsroom, pointing at the new NZZ front page on screen

Desktop second

Because the newsroom now plans for mobile, the desktop page is put together automatically. A good default layout covers most days. For big events, editors can still pick special templates.

Wireframe of the desktop templates for the NZZ front page

The NZZ front page on a laptop and two phones