Projektziele und -ergebnisse

Acolono hat bereits Anfang 2022 die Wartung der Website von PULS24 übernommen. Das System ist decoupled aufgesetzt, mit einem auf Thunder.org basierenden Drupal Backend und einem Frontend programmiert mit Next.js.

Aufgrund der schnell wachsenden Zugriffszahlen wurde der Bedarf an einem besonders mobil noch besser optimierten Frontends immer größer. Vor allem bezüglich Usability, SEO und Accessibility gab es großes Potential, das man nicht verlieren wollte.

Acolono hat daraufhin den Auftrag erhalten, Strategie, Design und technische Umsetzung für den Relaunch beizusteuern. Das große Ziel war, das Design besser auf die Bedürfnisse der Zielgruppe anzupassen. Das Design sollte auch dabei unterstützen, User zum regelmäßigen Konsum zu bewegen und dabei helfen die Benutzer*innen langfristig zu Fans und Brand Lovers zu machen.

_Konzeption und Design_
Nach Definition der Zielgruppen haben wir zuerst Personas erstellt. Personas sind fiktive Charaktere, die die typischen Nutzer*innen eines Produkts oder einer Dienstleistung repräsentieren. Indem wir uns in diese Personas hineinversetzten, konnten wir besser verstehen, wie sie die Seite nutzen würden, was sie von der Seite erwarten und wo mögliche Probleme liegen könnten. Diese Personas waren auch die nötige Basis, um passende Personen für die späteren Usertests zu finden.

Ausgehend von den Bedürfnissen und Erwartungen der Zielgruppen haben wir einen vollständigen Design-Prototyp in Figma erstellt. Ein guter Prototyp ist mehr als nur eine grundlegende Struktur oder ein Mock-up. Er sollte das Endprodukt so genau wie möglich widerspiegeln, damit die User-Tests aussagekräftige Ergebnisse liefern. Deshalb haben wir hierfür vollständige und echte Inhalte (News) für einen ganzen Tag eingepflegt.

Dieser Prototyp war dann Grundlage für Usertests. Hierfür haben wir moderierte Interviews mit durchschnittlich 5 Personen pro Zielgruppe durchgeführt. Nach Analyse der Ergebnisse hatten wir genug Insights, um weitere Optimierungen bzgl. Navigation und Design vorzunehmen.

_Drupal Backend: Kompromisslose Flexibilität für die Redaktion_
Das Drupal Backend ist sehr flexibel aufgebaut. Redakteur*innen können Inhalte aus vielen unterschiedlichen Quellen verwenden und kombinieren. Hierzu sind APIs von mehreren unternehmens-internen und externen Anbietern angebunden: Videos und TV-Sendungen, Pressemeldungen, Bilder und vieles mehr werden so konsumiert und können von Redakteur*innen bei der Erstellung von Artikeln, Listen und Collections verwendet werden. Für die Gestaltung von Landingpages können zum Beispiel vordefinierte Drupal Layouts mit solchen Inhalten befüllt werden. Über eine in Drupal erstellte und optimierte Schnittstelle werden die mit Inhalten gefüllten Seiten daraufhin dem Frontend zur Verfügung gestellt und von der next.js Applikation konsumiert.

Im Rahmen dieses Projektes wurde die Anzahl der verfügbaren Komponenten noch mal erweitert: Zum Beispiel haben wir spezielle Teaser definiert, die man swipen, aber auch via Button vor und zurück navigieren kann. Die Besonderheit ist hier, dass man mobil alles aufklappen kann, um vertikal scrollen zu können.
Oder eine Komponente, die den Titel einer News anzeigt und bei Klick eine Kurzfassung präsentiert, jedoch auch alle weiteren News in einer Seitenleiste weiterhin zur Verfügung stellt, um schnell und einfach alle aktuellen News einsehen zu können.

_Drupal Backend: AI unterstützte Content Adaptionen_
Das Drupal Backend ermöglicht auch die Unterstützung von AI bei der Erstellung von Inhalten. So werden für alle Artikel automatisiert Zusammenfassungen generiert. Weitere Funktionalitäten sind in Arbeit bzw. geplant, z.B. die Unterstützung der Redakteur*innen beim Erstellen der Inhalte mittels aktueller KI-Sprachmodelle, das automatische Befüllen von Bild-Alternativtexten oder die Erstellung von Vorschlägen zu verwendender Begriffe und Keywords für die Suchmaschinenoptimierung. Wir haben hierfür auch bereits ein Drupal Modul erstellt: https://www.drupal.org/project/sidekick

_SEO, Usability und Accessibility Optimierungen_
Verbesserte Position des Videoplayers: Mobil werden Videos über der Darstellung der Inhalte angezeigt. Ein User kann dann so bspw. den Live-Stream konsumieren und gleichzeitig die Seite weiterhin nutzen.

Eine zweite Navigationsebene wurde eingeführt, die Deep-Links zu aktuellen Top Stories anbietet.

Viele weitere Optimierungen wurden vorgenommen, die zu verbesserter Usability und Suchmaschinen-Optimerung beitragen: So wird ein neues Webstory-Layout wird für gewisse Artikel ermöglicht.

Bzgl. Accessibility wurden u.a. folgende Maßnahmen ergriffen:
- Die Schriftgröße von Texten, Überschriften, usw. wurde optimiert.
- Texte und Hintergrundfarben haben einen ausreichenden Kontrast.
- Benutzer*innen können mit einem Screenreader durch die Seiten navigieren.
- Navigation und Navigations-Overlay setzen den Fokus richtig, um auch bei Benutzung der Tastatur einen ordnungsgemäßen Zugriff auf den Inhalt zu ermöglichen.
- Die Navigation kann auch mittels Tastatur übersprungen werden.
- Karussells kündigen beim Durchblättern aktuelle Slides an, um das Benutzererlebnis für sehbehinderte Benutzer*innen zu verbessern.
- Erweiterbare Teaser setzen den Fokus so, dass auch mittels Tastatur der richtige Zugriff auf den Inhalt ermöglicht wird.
- Schaltflächen in Navigation und Teasern verfügen über geeignete ARIA-Attribute, um auch Benutzer*innen von Screenreadern ihre Funktionalität zu beschreiben.

Natürlich gibt es bzgl. Accessibility noch weitere Optimierungsmöglichkeiten. Für eine werbefinanzierte Newsplattform sind die gesetzten Maßnahmen jedoch sehr positiv zu bewerten, besonders wenn man sich den Status bzgl. Accessibility bei der Konkurrenz ansieht.

_Darkmode_
Beim Design einer so modernen News-Plattform durfte natürlich eines nicht fehlen: Wir haben auch einen Darkmode integriert!