Navigation überspringen
Nico Santangelo
Kontakt

Zwei Seiten auf dem Designsystem neu gebaut, gestartet mit 9 Prozent höherer Klickrate

Head of Product Research & Design · 2022 bis 2024 · Durch Ereignisse beendet

  • +9 % Klickrate Homepage zur Vergleichsseite, Testmarkt Österreich
  • -17 % Durchschnittliche Ladezeit Nach dem Neubau gemessen
  • +16 % Zufriedenheitswerte SUS, CSAT, UXQ und NPS
  • ½ Entwicklungszeit für spätere Features Die modulare Next.js-Architektur

Die neu gebaute Homepage und die Vergleichsseite, klickbar in Figma.

FTI Group, Homepage und Vergleichsseite

Homepage und Vergleichsseite trugen den größten Teil von FTIs Traffic und den größten Teil seiner Design- und technischen Schulden. Jahre von Flickwerk auf einem Typo3- und PHP-Stack hatten inkonsistente Styles, langsame Ladezeiten, Filter, die niemand fand, schlechte Barrierefreiheitswerte und eine Codebasis hervorgebracht, die jedes neue Feature teuer machte. Rund 70 Prozent der Unique Visitors gingen von der Homepage zur Vergleichsseite, aber der Funnel darunter konvertierte nicht wie er sollte.

  • Eine Seite, ein Team, eine Frage. Für jede Initiative haben wir einen Workshop um ein One-Pager geführt: Geschäftsziel, Problem, Zielsegment und Persona, Annahmen, Hypothesen, Fragen, Health-Metriken, Erfolgskennzahl und eine Priorisierungsmatrix. Ohne dieses Blatt kam nichts ins Backlog.
  • Zuerst Research. Audit des bestehenden Produkts, Umfragen, Interviews und Usability-Tests im Insights-Repository haben Ausgangswert und Hypothesen gesetzt.
  • Design auf dem System. High-Fidelity-Prototypen auf dem Sunscreen-Designsystem, organisationsweit geprüft im Design-Critique-Format, das wir eingeführt hatten.
  • Von Grund auf neu gebaut. Header und Navigation, Schnellsuche, Filter, Badges und Karten wurden als eigenständige Projekte auf Next.js neu gebaut, mit modularer Architektur, WebP-Bildern und optimierten Assets. WCAG- und APCA-Standards durchgängig angewendet.
  • Testen vor dem Rollout. A/B-Tests auf Absprungrate, Klickrate, Conversion, SUS, CSAT, UXQ und NPS, mit Interview- und Usability-Feedback zurück ins Repository.

Die erste Version startete in Österreich als Testmarkt. Die Klickrate stieg um 9 Prozent, die durchschnittliche Ladezeit sank um 17 Prozent, die Zufriedenheitswerte stiegen um 16 Prozent, und die modulare Architektur halbierte die Entwicklungszeit für spätere Features. Usability- und Barrierefreiheitswerte verbesserten sich messbar.

Die neu gebaute FTI-Homepage mit Hero-Angebot, Suchformular und Hotelkarten, daneben die Vergleichsseite mit Filtern, Sortierung und Ergebniskarten

Die beiden Seiten, wie sie gestartet sind, gebaut auf Next.js und dem Sunscreen-Designsystem. Das ist die österreichische Instanz, die einzige, die je live ging.

Entscheidungen

Den Stack vor dem Greenfield klären, mit Design im Raum. Geplant: ein Greenfield-Neubau, bei dem die Technologie als Engineering-Frage entschieden und die Designarbeit danach eingepasst wird. Argumentiert: Auf einem Greenfield entscheidet der Stack, was das Designsystem sein kann, die beiden Entscheidungen sind also eine. Eine Komponentenebene, die für das gewählte Framework neu implementiert werden muss, ist nur dem Namen nach ein Designsystem, und die Ziele für Barrierefreiheit und Performance, auf die wir uns festgelegt hatten, sind ebenso sehr Stack-Entscheidungen wie Design-Entscheidungen. Ich habe darum gebeten, in der Abstimmung zu sitzen und nicht hinter ihr. Passiert: Next.js mit modularer Architektur, abgestimmt zwischen Produkt und Engineering, mit dem Sunscreen Design System als Komponentenebene ab dem ersten Commit. Die gemeinsamen Teile wurden einmal gebaut und auf beiden Seiten wiederverwendet, und daher kommt die halbierte Entwicklungszeit für spätere Features.

Was danach geschah

Der Deutschlandstart war für August 2024 geplant. Im Juni 2024 meldete die FTI Group Insolvenz an. Der deutsche Rollout fand nie statt, und die österreichische Instanz wurde später eingestellt. Der Prototyp und die gemessenen Ergebnisse aus Österreich bleiben; die Arbeit war solide, das Unternehmen nicht.