Skip navigation
Nico Santangelo
Get in touch

Two pages rebuilt on the design system, launched at a 9 percent higher click-through rate

Head of Product Research & Design · 2022 to 2024 · Stopped by events

  • +9 % Click-through rate Homepage to comparison page, Austrian test market
  • -17 % Average page load Measured after the rebuild
  • +16 % User satisfaction scores SUS, CSAT, UXQ and NPS
  • ½ Development time for later features The modular Next.js architecture

The rebuilt homepage and comparison page, clickable in Figma.

FTI Group, homepage and comparison page

The homepage and the comparison page carried most of FTI’s traffic and most of its design and technical debt. Years of patches on a Typo3 and PHP stack had produced inconsistent styles, slow load times, filters users could not find, poor accessibility scores and a codebase that made every new feature expensive. About 70 percent of unique visitors moved from the homepage to the comparison page, and the funnel below was not converting as it should.

One page, one team, one question. For each initiative we ran a workshop around a one-pager: business goal, problem, target segment and persona, assumptions, hypotheses, questions, health metrics, success metric, and a prioritization matrix. Nothing entered the backlog without one.

Research first. An audit of the existing product, plus surveys, interviews and usability tests in the insights repository, set the baseline and the hypotheses.

Design on the system. High-fidelity prototypes built on the Sunscreen design system, reviewed across the organization in the design-critique format we had introduced.

Rebuilt from the ground up. Header and navigation, quick search, filters, badges and cards were rebuilt as standalone projects on Next.js with a modular architecture, WebP images and optimized assets. WCAG and APCA standards applied throughout.

Tested before rollout. A/B tests on bounce rate, click-through rate, conversion, SUS, CSAT, UXQ and NPS, with interview and usability feedback flowing back into the repository.

The first version launched in Austria as the test market. Click-through rate rose by 9 percent, average page load fell by 17 percent, user satisfaction scores rose by 16 percent, and the modular architecture cut development time for later features by half.

The rebuilt FTI homepage with a hero offer, a search form and hotel cards, beside the comparison page with its filters, sort controls and result cards

The two pages as they launched, built on Next.js and the Sunscreen design system. This is the Austrian instance, the only one that ever went live.

Decisions

Agree the stack before the greenfield, with design in the room. Planned: a greenfield rebuild, with the technology chosen as an engineering matter and the design work fitted to it afterwards. Argued: on a greenfield the stack decides what the design system can be, so the two choices are one choice. A component layer that has to be reimplemented for the chosen framework is a design system in name only, and the accessibility and performance targets we had committed to are stack decisions as much as design ones. I asked to be in the alignment, not downstream of it. Happened: Next.js with a modular architecture, agreed across product and engineering, with the Sunscreen design system as the component layer from the first commit. The shared pieces were built once and reused across both pages, which is where the halved development time for later features came from.

What happened next

The German launch was planned for August 2024. In June 2024 FTI Group filed for insolvency. The German rollout never happened and the Austrian instance was later discontinued. The prototype and the measured results from Austria remain; the work was sound, the company was not.