Swiss Ice Hockey Federation

A Swiss sports federation runs a large public platform: editorial pages, club and league information, and a Game Center where fans follow schedules, results, standings, lineups and player stats during the season.

I work on the redesign as a design engineer, through the agency that originally built the platform. The brief is consistent: a design is approved in Figma, and it needs to become real, accessible, fast and maintainable software — not a static mockup. Figma is the leading reference; when the written spec and the design disagree, the design wins.

My work sits at the crossover between design and code. I read the Figma file as a designer — spacing, type, tokens, states, motion — and then I build it as a frontend engineer. That means translating the design into a real component: markup, SCSS, the TypeScript behaviour, and the server-side view and data wiring behind it.

Concretely, I’ve built work across the Game Center, live standings with home and away toggles, team calendars and playoff views, the club finder, and player and team statistics. I match the design closely, but I also push back when a layout will break with real data — long club names, missing logos, deferred games — and I make those edge cases part of the build instead of an afterthought.

The platform is an Umbraco v17 site on .NET 10. Editors compose pages from Block Grid and Block List modules, each rendered by a strongly typed Razor view that separates content from presentation settings. New modules mean new components in that pipeline, so I build them to compose cleanly with the rest of the system rather than as one-offs.

The frontend is plain TypeScript and SCSS — no SPA. Styling follows BEMIT (BEM naming with ITCSS namespaces) on top of design tokens exposed as CSS custom properties, and the bundle is built with Vite. Behaviour is wired through the agency’s shared component library, which auto-mounts components by class via a factory and a mutation observer.

Interactivity is progressive enhancement with HTMX: filters, search and pagination — the club finder and the standings tables, for example — hit surface controllers that return rendered partials and swap them in place, so the pages keep working and stay shareable. Live game data flows over SignalR and the federation’s live statistics API, which is what will keep scores and tables current during a match once it’s live.

How I keep it safe to ship

Every change runs through a compound-engineering workflow — plan, work, review — before it leaves my machine. There’s a hard test gate: a pre-push hook builds the solution and runs the unit tests, and it blocks the push if anything is red.

On top of that, a Playwright end-to-end suite runs against the pull request’s preview deployment, so the Game Center flows are exercised in a real browser before anything merges. The aim is for design fidelity and engineering rigour to move together, not in tension.

This is an active redesign and rebuild of the federation’s platform, and it isn’t live yet — hopefully soon. I’m delivering it feature by feature: turning approved designs into tested, accessible components built to hold up under live match data.

For me this is the point of being a design engineer — working the whole path from the Figma frame to the deployed page, so nothing gets lost in the handoff.