Swiss Football League

The Swiss Football League runs a TV production workflow: for every match, production and editorial staff coordinate broadcast data, additional productions, documents and contacts. I built the frontend for that tool, through the agency, working from the league’s approved Figma specs.

The work came in two parts — a new production tool, and maintenance on the league’s existing admin applications.

I built a Dashboard Overview and a Match Details view for the production workflow. Match Details is organised into dedicated tabs — Basisdaten, Produktion, Redaktion, Zusatzproduktionen, Dokumente and Kontakte — each matched closely to the latest Figma frames, and laid out responsively for desktop, tablet and mobile.

Because the backend was being built in parallel, I defined and delivered the JSON data contract the views needed and handed it over to guide the API implementation. That let frontend and backend move at the same time instead of waiting on each other.

On the league’s existing admin applications — ASP.NET with Angular — I refined the table layout so it read correctly against real backend data with consistent defaults. I also tightened the interaction details: adjusting icon ripple effects, removing misleading warning colours from delete actions, and fixing a layout inconsistency in the upload buttons.

This was legacy Angular and a codebase I hadn’t written. I lean on AI as a working partner to navigate unfamiliar code quickly — mapping the structure, drafting components, and cross-checking the data contract against the views — so I spend my attention on the design fidelity and the edge cases rather than on orientation.

The aim is the same every time: take the approved design and turn it into frontend that holds up against real data, from the Figma frame to a merged pull request.