Designsystem & skalierbare UI-Komponenten für t-online.de

Bei t-online.de ging es darum, bestehende interaktive Formate und UI-Komponenten stärker zu strukturieren, konsistenter aufzubauen und langfristig besser skalierbar zu machen. Unterschiedliche Features wie Umfragen, Spiele, Event-Teaser und ein KI-basiertes Fragen-Tool mussten visuell und funktional in eine gemeinsame Produktlogik überführt werden.

Mein Fokus lag darauf, eine klare UI-Systematik zu schaffen, die sowohl dem Designteam als auch der Entwicklung hilft, Komponenten effizienter zu pflegen, wiederzuverwenden und weiterzuentwickeln.

Ich konzipierte und gestaltete eine modulare UI-Bibliothek auf Basis von Atomic Design. Dabei wurden Komponenten, States, Typografie, Farben und responsive Varianten systematisch in Figma aufgebaut und dokumentiert.

Parallel dazu arbeitete ich an mehreren interaktiven Plattform-Features: darunter ein KI-basiertes Fragen-Tool für Artikel, eine überarbeitete Umfrage-Komponente, die Spiele-Seite sowie flexible Event- und Kampagnen-Teaser für Großereignisse wie Olympia, Wahlen oder Sportevents.

Besonders wichtig war mir, komplexe Interaktionen so zu gestalten, dass sie für Nutzer:innen schnell verständlich bleiben und gleichzeitig für Redaktion, Produkt und Entwicklung einfach adaptierbar sind.

Die UI-Bibliothek bildet heute eine zentrale Grundlage für konsistente Interfaces auf t-online.de. Komponenten können systematischer weiterentwickelt, effizienter gepflegt und über verschiedene Seitenbereiche hinweg einheitlich eingesetzt werden.

Das KI-basierte Fragen-Tool wurde von mir konzeptionell und visuell gestaltet und ermöglicht Nutzer:innen, direkt im Artikelkontext Fragen zu stellen. Die überarbeitete Umfrage-Komponente verbessert Übersichtlichkeit, Interaktion und mobile Nutzbarkeit.

Durch flexible Templates für Kampagnen- und Event-Teaser konnten wiederkehrende Formate schneller umgesetzt und visuell konsistent ausgespielt werden. Insgesamt entstand eine skalierbare Grundlage für produktnahe UI-Lösungen mit hoher Reichweite.