Modulare UI-Bibliothek & datengetriebene Nutzerinteraktionen
für Deutschlands größte News-Plattform t-online.de

Zu Beginn lag der Fokus auf einer klaren, skalierbaren Designgrundlage: Ich konzipierte und implementierte eine modulare UI-Bibliothek nach Atomic Design-Prinzipien, um alle bestehenden Komponenten einheitlich zu strukturieren und langfristige Konsistenz zu gewährleisten. Parallel dazu analysierte ich die bestehende Spiele- und Umfrage-Sektion von t-online.de und definierte – gemeinsam mit dem Product Owner – Use Cases und Nutzerflows für die KI-gestützte Fragen-Funktion. Kleinere Teaser-Banner für Events und Kampagnen fasste ich in einen kompakten Prozess, um schnell und zentral neue Motive ausspielen zu können.

Die neue UI-Bibliothek ist heute zentrale Grundlage für das Designteam von t-online.de. Dank der klaren Struktur nach Atomic Design können Komponenten systematisch weiterentwickelt und effizient gepflegt werden. Das spart nicht nur Zeit in der Umsetzung, sondern schafft auch eine hohe Konsistenz über alle Seitenbereiche hinweg.

Das Fragen-Tool für KI-generierte Antworten wurde von mir konzeptionell und visuell gestaltet. Es ermöglicht Nutzer:innen, inhaltliche Fragen zum Artikel zu stellen und sofort passende Antworten zu erhalten. Diese interaktive Ergänzung trägt dazu bei, die Verweildauer zu erhöhen und das Nutzererlebnis aktiv mitzugestalten.

Die vollständig überarbeitete Umfrage-Komponente überzeugt mit einer vereinfachten Interaktion, mehr Übersichtlichkeit und einer verbesserten Darstellung der Ergebnisse – auch mobil. Alle Elemente wurden nach modernen Accessibility-Richtlinien gestaltet und final in einer komponentenbasierten Systematik an das Dev-Team übergeben.

Kampagnen-Assets und Banner-Teaser für Großevents wie Frauen-EM 2025, Landtagswahl oder US-Wahl konnten dank flexibler Templates mit minimalem Aufwand adaptiert und in kürzester Zeit ausgeliefert werden.

Für die Bibliothek habe ich ein klares Designsystem in Figma aufgebaut, inklusive dokumentierter Komponenten, Farbsystem, Typografie, States und Responsiveness.

Das Fragen-Tool wurde so gestaltet, dass Nutzer:innen intuitiv verstehen, was sie tun können – ohne visuelle Überfrachtung. Durch kontrastreiche Cards, eine gut sichtbare Eingabemaske konnte die Interaktion spürbar emotionaler gestaltet werden.

Das Design der Umfragen war bewusst minimalistisch gehalten: viel Weißraum, klare Hierarchien, große Touchflächen – optimiert für mobile Nutzung. Für die zahlreichen Teaser und Kampagnenbanner entwickelte ich ein flexibles Set an Responsive-Vorlagen mit adaptierbaren Layout-Bausteinen. So konnte die Redaktion Inhalte schneller und visuell konsistent publizieren.