Luxemburger Wort – Aboshop Relaunch

Das Luxemburger Wort ist die größte und gleichzeitig älteste Tageszeitung des Großherzogtums. Die Leser:innen werden mit aktuellen Nachrichten und Informationen aus der ganzen Welt versorgt. Der Schwerpunkt liegt in der lokalen Berichterstattung über das knapp über 600.000 Einwohner:innen große Luxemburg. Wir haben das Luxemburger Wort bei der Einführung ihres neuen Aboshops unterstützt.

Die Ziele des Aboshop-Relaunches

Seit über sechs Jahren begleiten wir das Luxemburger Wort in verschiedenen Schritten ihrer Digitalstrategie. Ziel dieses Projektes war es, den Aboshop in ein zeitgemäßes User-Interface zu übersetzen und eine bessere User Experience zu ermöglichen. Für Nutzer:innen wurde außerdem ein fließender Übergang von Newsportal zum Aboshop geschaffen. Dadurch fühlt sich der Wechsel nicht wie ein Verlassen der Seite an und die einzelnen Schritte im Prozess greifen ineinander und passen visuell zusammen. Der Aboshop dient als Schirm für mehrere Zeitungstitel im mehrsprachigen Luxemburg.

UX- und UI-Design Update für das Luxemburger Wort

Gestaltet und getestet haben wir auf den kleinsten noch gängigen Device-Größen mit 320px Viewport-Breite und auf Desktop. So konnten wir sicherstellen, dass alle Elemente und Texte ausreichend Platz auf allen Endgeräten haben, reibungslos funktionieren und die Abläufe verständlich sind. Das Visual Design des Aboshops ist an das bestehende Design des Newsportals angelehnt, um einen fließenden Übergang von Newsportal zum Aboshop sicherzustellen.

Neue Elemente für bessere Übersichlichkeit: Produktkacheln

Um Nutzer:innen einen Überblick zu geben, haben wir verschiedene Maßnahmen umgesetzt. Da der Aboshop verschiedene Titel mit sehr unterschiedlicher Gestaltung und Nutzungsoberfläche anbietet, sollten diese in einem einheitlichen Bildkonzept kommuniziert werden. Dafür wurden die Titel in Form von sogenannten Mockups in ein isometrisches Raster gebracht. Durch die isometrische Darstellung ist der einheitliche Grundaufbau des Bildes visuell sehr stark und wiedererkennbar, lässt aber dennoch Spielraum in der Komposition. Die Produktkacheln wurden so gestaltet, dass auf jedem Endgerät alle Titel im initialen Viewport auf einen Blick erfassbar sind.

Übersicht der Produktkacheln auf Phoneansicht
Übersicht der Produktkacheln auf Tabletansicht

Flexibilität in der Gestaltung

Das Konzept der Produktbilder berücksichtigt die variable Bestückung der Produktkacheln. Bei manchen Abos sind zum Beispiel Promoartikel inklusive. Damit diese Optionen übersichtlich dargestellt werden, können diese mit in die Komposition integriert und der Hintergrund bei Bedarf entsprechend angepasst werden. Das sorgt für ein homogenes Aussehen der Abo-Optionen.

Beispiel eines Promoartikel Kombiabos mit regulären Produktkacheln.

Update der Formulare

Die Formulare im Aboshop wurden im Rahmen dieses Projektes überarbeitet. Die neuen Formularfelder haben Labels die anzeigen, womit die Felder ausgefüllt werden sollen. Sie sind auch sichtbar, nachdem beispielsweise das Formular automatisch vom Browser ausgefüllt wurde. Somit haben Nutzer:innen noch die Möglichkeit, Labels und Inhalt abzugleichen und wenn nötig zu korrigieren. Außerdem haben wir kontextuelle Fehlermeldungen eingeführt. Das heißt, sollte ein Feld falsch ausgefüllt oder vergessen worden sein, wird der Fehler direkt am entsprechenden Formularfeld angezeigt und das Feld mit dem Fehler wird in den sichtbaren Bereich gescrollt. Dadurch wird vermieden, dass Fehleingaben übersehen werden und die Nutzung des Formulars kann einfacher und nachvollziehbarer sein.

Luxemburger Wort Checkout contextual error message mobile

Fazit: Homogenes Zusammenspiel von Nutzerbedürfnissen und Design

Mit stetig wechselnden Anforderungen an digitale Angebote ist es unverzichtbar, mit dem eigenen Angebot am Ball zu bleiben und mit den technischen Möglichkeiten mitzuwachsen. Mit dem Relaunch des Aboshops ist die Markensprache vereinheitlicht worden und näher am Design des Newsportals angelehnt. Neue Elemente machen es möglich, das Angebot übersichtlich darzustellen. User:innen sollen sich im Shop zurechtfinden und reibungslos zum Newsportal wechseln können.

Das Projektteam

Design und Experience
Michael Wallner

Development
Luca Pipolo

Strategie
Christina D’Ilio

Hast Du Fragen zum Projekt oder unserem Prozess oder möchtest gerne selbst mit uns durchstarten? Dann geht es hier für Dich weiter. Oder möchtest Du deine Marke checken lassen? Dann helfen wir gerne mit unserem Visual Brand Audit weiter.