Dagens Næringsliv hero image

Dagens Næringsliv

News-Platform Redesign

Zeitraum
2018/19

Meine Rolle

Credits

Übersicht

Dagens Næringsliv (DN) ist die drittgrößte Tageszeitung in Norwegen und dort die führende Finanz- und Wirtschaftszeitung. Gemeinsam mit einem internationalen Team in Berlin, Dhaka, Hamburg und Oslo haben wir über einen Zeitraum von einem Jahr die Plattform von Grund auf überarbeitet.

Das Alleinstellungsmerkmal der Zeitung ist die Verbindung von minutenaktuellen Wirtschaftsnachrichten in Verbindung mit Kultur- und Gesellschaftsthemen.

Startseite

Eine Besonderheit von norwegischen News-Plattformen ist die flexible Handhabung von Schriftgrößen in Relation zur Länge der Headlines. Dies schafft ein boulevardeskes Erscheinungsbild und macht die Priorisierung bestimmter Meldungen schwieriger.

Zum Scrollen über das Mockup hovern!
Beim rendern der Startseite wird die Schriftgröße in Relation zur Länge der Zeile generiert
Startseite reduziert auf Typografie
Wenn man die Startseite nur auf Headlines reduziert, werden die dynamischen Größen noch deutlicher. Nein, ich weiß nicht, ob es sich bei "TV3-eier" um eine Beleidigung handelt

Workshop zum Aufbau der Startseite

In einem Workshop in Oslo haben wir gemeinsam mit Redakteurinnen, Designerinnen und Entwicklerinnen alle Anforderungen, Wünsche und Potentiale in der Überarbeitung der Startseite herausgearbeitet.

Workshop in Oslo 2018 - 01
Workshop zur Struktur der Startseite mit Redakteurinnen, Designerinnen und Entwicklerinnen
Workshop in Oslo 2018 - 02
Mit Wireframes wurden unterschiedliche Szenarien durchgespielt sowie Vor- und Nachteile erläutert
Workshop in Oslo 2018 - 03
So konnten wir Bedürfnisse und Painpoints der Stakeholderinnen herausfinden und im weiteren Prozess berücksichtigen
Workshop in Oslo 2018 - 04
Es war ein besonderer Tag ❤️

Die wichtigsten Erkenntnisse des Workshops waren:

  1. Kuratierung: Mehr Kontrolle über die Platzierung wichtiger Meldungen und von Longform-Content
  2. Exploration: Tagesaktuelle Meldungen sollten durch Content-Gruppen sowie Themen- und Feature-Blöcke aufgelockert werden, um exploratives Lesen zu fördern.
  3. Strukturierung: Die Anzahl von Größen und Varianten sollte insgesamt reduziert werden, ohne dabei redaktionelle Spielräume einzuschränken

Diese Erkenntnisse haben wir als Grundlage verwendet, um den neuen Aufbau der Startseite zu explorieren. Neben der visuellen Überarbeitung und der Entwicklung neuer redaktioneller Tools entstanden dabei auch grundlegende Prinzipen als Handlungsempfehlung für die Redaktion.

Alle Meldungen werden nach Relevanz in A, B oder C Teaser eingeteilt

Das obere Drittel der Frontpage wird aus visuell starken A-Teasern aufgebaut

Teaser werden gruppiert. Große Teaser stehen oben, kleine unten.

Design-System

Um von Anfang an Redundanzen in der Entwicklung zu vermeiden, wurde nach Abschluss der initialen Gestaltung ein Design-System etabliert. Dieses enthält alle Design-Komponenten der Plattform und macht diese allen am Prozess beteiligten Personen zugänglich. Der Vorteil: Jede Änderung ist sofort live.

Ansicht des Design Systems

Das Design-System besteht aus zwei Instanzen:

  1. Styleguide: Die Single Source of Truth für alle Designerinnen. Intern wird diese via Sketch Cloud zur Verfügung gestellt, extern per InVision synchronisiert
  2. Component-Library: Auf Basis von fractal hat das Entwicklerteam um Brad J. Vicks eine HTML-basierte Component Library erstellt. Von Atomen wie Buttons oder Icons bis zu Komponenten wie Grids, Listen oder Hero-Elemente ist alles enthalten.

Beide Instanzen müssen akribisch gepflegt werden. Wichtig ist, immer wieder zu hinterfragen, ob eine neue Komponente nötig ist. So kann es sinnvoll sein, bestimmte Designprobleme mit bestehenden Komponenten zu lösen, anstatt neue Formate zu entwickeln.

HTML Component Library
Ansicht der HTML Component Library mit Referenzierung und Varianten
Teaser Varianten aus der Component Library
Exemplarische Darstellung von Teaser-Varianten aus der Component Library

Personalisierung und Liveticker

Eine weitere Besonderheit der Webplattform von Dagens Næringsliv ist, dass die Seite – entgegen der stark ansteigen Nutzung von mobilen Geräten – hauptsächlich stationär genutzt wird. Die Erklärung ist einfach: Als Wirtschaftszeitung wird DN zu großen Teilen beruflich gelesen. So ist es zur Gewohnheit geworden, den Liveticker (Siste Nyheter) permanent auf einem zweiten Bildschirm geöffnet zu haben, um Wirtschaftsmeldungen zu verfolgen.

Ansicht Liveticker

Personalisierung als Erweiterung des Live-Tickers

Um die Zielgruppe zu erweitern und die Nuztung der Seite mit Login gleichermaßen für berufliche und private Leser attraktiver zu machen, haben wir ein Leser-Dashboard konzipiert. Dieses beinhaltet zum einen alle persönlichen Einstellungen, eine Leseliste sowie personalisierte Feeds, die direkt nach Themen, Subthemen und Autorinnen zusammengestellt werden können.

So kann zum Beispiel ein Trader die Bewegungen am Markt und Meldungen zu seinen Themen (z.B. Energie und Öl) auf seinem persönlichen Dashboard verfolgen. Ein Feierabendleser hingegen abonniert Kolumnen und nachbörsliche Analysen.

Personalisiertes Dashboard

Redesign

Zum vollständigen Relaunch der Web-Plattform haben wir eine große Anzahl an Templates für Desktop, Tablet und Mobile konzipiert und gestaltet. Als Grundlage diente dabei das Design-System aus Punkt 02. So konnten wir neue Templates und Komponenten effizienter aufbauen und schneller testen.

Templates DN TV
Artikelansichten
Übersicht einiger Templates