Redaktionelles Produkt gestaltet, Komponentensystem überarbeitet
Ausgangslage
Worum es ging
t-online ist eine der meistgenutzten Nachrichtenseiten Deutschlands. Überarbeitet wurde das redaktionelle Produkt, auf Desktop und Mobile.
Die Redaktion wollte mehr Kontrolle darüber, wie eine Geschichte auftritt, nicht nur darüber, an welcher Stelle sie steht. In einem schnellen Newsfeed auf der Startseite sollten bestimmte Beiträge länger auffindbar sein und prominenter aufgemacht werden. Längere Formate, Debatten und Interviews brauchen eine andere Form als eine Zeile im Newsfeed.
Gleichzeitig sollte das Produkt auf Personalisierung vorbereitet werden. Beides ist keine Aufgabe für einzelne Seiten, sondern für das Komponentensystem darunter.
Der Prozess
Eine Komponente für die Redaktion, eine für die Leser
Die Exclusive-Stage ist ein eigener Bereich auf der Startseite, gebaut als modulares Lane-Format. Die Redaktion stellt Langformen, Debatten oder Interviews selbst zusammen und gibt ihnen mehr Raum als eine Newszeile. Der Bereich bringt Rhythmus auf die Startseite und macht Platz für längeres Lesen, ohne dass jemand dafür eine Sonderseite baut.
Das Action Overlay ist eine Komponente für nutzerbezogene Aktionen: merken, folgen, empfehlen. Sie passt sich dem Kontext an und sieht über alle Module und Inhaltstypen gleich aus. Damit liegt die Grundlage für Personalisierung, bevor die Personalisierung selbst da ist. Gebaut ist sie auf einer variablenbasierten Architektur für hellen und dunklen Modus und nach WCAG 2.2. Sie ist die erste Komponente, die vollständig auf den neuen semantischen Tokens steht.
Für den gesamten Relaunch wurden Richtlinien für Barrierefreiheit und Interaktion eingeführt.
Ergebnis
Was es gebracht hat
Die Redaktion inszeniert Geschichten selbst, ohne dass dafür jedes Mal eine Sonderlösung gebaut wird. Nutzerbezogene Aktionen liegen in einer Komponente statt in mehreren Einzellösungen und funktionieren überall gleich. Am Action Overlay sind die neuen semantischen Tokens einmal vollständig durchgezogen. Damit beginnt ein semantisches Farbsystem, und die Komponenten lassen sich in weiteren Kontexten wiederverwenden.