Making a decades-old publication legible again online

The brief

Management asked for a redesign of the primary pages, the category-page template and the single-article template. The stated problem was business-side: the site was not converting. Rather than start from the layout, I ran usability tests on the live page with follow-up interviews to find out what readers were actually experiencing.

The finding that reframed the project

Readers did not trust the content — and perceived it as sponsored.

That is not a styling problem. A publication that has been in print since 1986 was being read as advertising, and once I looked at the page with that in mind, the layout explained it. From there the work stopped being a visual refresh and became a question of making the publication legible: what is JF's own reporting, where am I, and what is worth my time.

Three problems

Voice of the user

“As a user, I would like to be able to distinguish easier all the categories that are displayed, to see the reading times of the articles and be able to save them, so I could read them later.”

Three requests in one sentence. All three ended up in the design — visible in the before/after comparisons further down.

Reference points

I reviewed how other news and magazine sites — German and international — handled the same three problems: how they marked their own reporting, how they labelled sections, and what metadata they put on an article card. That fed a short mood board, which was the fastest way to agree tone, typography and colour with the client before any layouts were drawn.

‹›

1 / 7

The homepage needed named sections and a predictable rhythm, so the first thing to settle was the frame. I specified a 1410px container on a twelve-column grid inside a 1920px section, and worked the layout through desktop and tablet breakpoints in parallel rather than designing one and adapting it afterwards.

The wireframes are annotated by module — hero, Ressort, Kategorie, Artikelraster, newsticker, footer — with spacing rules written next to each. Naming the modules at this stage is what made the design system straightforward later: by the time I reached visual design, the page was already a set of repeatable parts rather than a one-off composition.

The top of the page

Before

After

Problem 01. The first thing a reader met was a paid placement sitting above the magazine's own name, with editorial and corporate navigation mixed in one row. In the redesign the top of the page belongs to JF: its own newsticker, the masthead, and a navigation row that is purely editorial — Deutschland, Ausland, Wirtschaft, Kultur, Wissen, Meinung, JF-TV, JF-Podcasts. Corporate and service items moved behind the Menu, and subscription became one clear button instead of shop items scattered through the article grid.

An article card

Before

After

Problems 01–03, in a single component. The category went from grey capitals at almost no contrast to a red kicker carrying the JF badge, with the section named in bold at the head of the standfirst. And the two things readers had asked for arrived on every card: how long the piece takes, and a control to keep it. The card is one module, so the same treatment carries across the homepage, the category pages and the article page. Shown here from the mobile prototype, where it was designed first.

Naming the page's own sections

Problem 02 again, at page level. The old homepage ran cards continuously with no divisions, so readers had to infer what the site held. The redesign breaks it into labelled bands — Aktuelle Meldungen, then Deutschland, and so on — each marked in the publication's red. The homepage now states what it contains instead of leaving that job to the menu.

Mobile-first

I designed the high-fidelity screens mobile-first, then carried the same modules up to desktop. Two decisions are worth calling out. The menu became a browsable surface rather than a list: each category gets an image tile with its sub-topics beneath it, so opening the menu is itself a way of discovering content. And saving got a permanent home — the bookmark in the bottom bar — so the save control on each card leads somewhere the reader can return to.

The clickable prototype

The mega-menu, homepage and category views were built as clickable, animated prototypes, so every flow could be walked through and signed off before development began.

Desktop & the article page

On the article template the three problems get their last answers: the JF badge marks the piece as the publication's own, a category rail stays with the reader down the length of the article, and a related-articles grid closes the page — so the route onward is another article rather than the menu.

A clean visual break was the wrong call here. The rollout was planned in phases, which meant old and new pages would be live at the same time — so the redesign had to stay recognisably Junge Freiheit throughout. Rather than starting over, I extended the existing design-language system with the modules the redesign called for.

Each was built as a reusable component with its full range of states: buttons across enabled, hovered and disabled for every variant; the search field from its resting state through to an open results dropdown; the footer navigation bar mapped for each active tab. Documenting the states this way is what made a phased rollout buildable — developers had a build-ready reference rather than a set of screenshots to interpret.