Starting point

What it was about

t-online is one of the most used news sites in Germany. The editorial product was reworked, on desktop and mobile.

The newsroom wanted more control over how a story appears, not only over where it sits. In a fast newsfeed on the homepage, certain pieces were to stay findable for longer and be presented more prominently. Longer formats, debates and interviews need a different form than a line in the newsfeed.

At the same time the product was to be prepared for personalization. Neither is a job for individual pages, but for the component system underneath.

The process

One component for the newsroom, one for the readers

The Exclusive-Stage is a section of its own on the homepage, built as a modular lane format. The newsroom assembles long forms, debates or interviews itself and gives them more room than a news line. The section brings rhythm to the homepage and makes space for longer reading, without anyone building a special page for it.

The Action Overlay is a component for user-related actions: save, follow, recommend. It adapts to its context and looks the same across all modules and content types. This puts the basis for personalization in place before personalization itself arrives. It is built on a variable-based architecture for light and dark mode and to WCAG 2.2. It is the first component that stands entirely on the new semantic tokens.

Guidelines for accessibility and interaction were introduced for the whole relaunch.

Outcome

What it achieved

The newsroom stages stories itself, without a special solution being built each time. User-related actions sit in one component instead of several one-offs and work the same everywhere. On the Action Overlay, the new semantic tokens are carried through completely for the first time. That is the beginning of a semantic color system, and the components can be reused in further contexts.