USF Association Platform

A complete platform for a Croatian association of sports physiotherapists. It is in my portfolio for one reason above all others: there was no frontend developer and there was no Figma. I designed and built the working prototype with Claude, and a backend developer took it from there.

USF Association Platform: public site, member dashboard, admin panel and brand system

Project overview

USF (Udruga sportskih fizioterapeuta) is a Croatian association of sports physiotherapists. The platform covers the public site, a member area with a digital card and benefits, an admin panel for running the association, and the brand that holds it together.

What makes it worth showing is how it was made. Normally a designer hands wireframes to a frontend developer and waits. Here there was no frontend developer: I designed and built the working prototype myself, with AI, and handed that prototype to a backend developer to build on.

Not a new project. A new way to build.

The model has been the same for as long as I have been working. A designer draws the screens in Figma, hands the file to a frontend developer, and waits. Whatever the designer produces stops at a picture of a product. Somebody else has to turn it into the real thing before a single person can use it.

On USF there was neither. No Figma file, because I never drew static screens to be rebuilt later. No frontend developer, because what I made was already the real thing. Two things carried this project: Claude, and then a backend developer who built the backend behind a front end that already worked.

The old way

Draw it, hand it over, wait

Screens get drawn in Figma and passed to a frontend developer. The designer's deliverable is a picture of a product, and nobody can use any of it until someone else rebuilds it in code.

No Figma

I designed by building

There is no Figma file for this project. I did not draw screens and then describe them to someone. Every decision was made in the real thing, in the browser, where I could immediately click it.

No frontend developer

Nothing to translate

Nobody had to turn my design into code, because it already was code. The backend developer did not get a specification to interpret. He got a working front end and built the backend behind it.

No Figma. No frontend developer. Just Claude, and then a backend developer.

Enter the platform

Don't take my word for it. The whole prototype runs live, right here, filled with demo content: seeded members, two years of educations, payments, ratings and emails. No sign-up, no password, just pick a role and you're in. Everything you change stays in your own browser.

Open as admin Open as member Browse the public site

A look inside

Public site: an education page with its speakers, pricing and available terms.

Public site: an education page with its speakers, pricing and available terms.

Member area: the digital membership card and partner benefits.

Member area: the digital membership card and partner benefits.

Admin: the association overview.

Admin: the association overview.

Admin: the education list.

Admin: the education list.

Brand guidelines: the colour palette.

Brand guidelines: the colour palette.

What this changes

The deliverable changed

A designer can hand over a working product instead of a Figma file describing one. That is a different job, and a different kind of promise to make to a client.

The waiting disappeared

There was no queue between the design and something real. No round of handover, interpretation and correction before anyone could click anything.

The spec is alive

The prototype is the specification, and it is one you open and use rather than read. Nothing is lost in translation, because there is no translation.

Why this matters

A designer hands over a picture of a product A designer hands over the product

USF is real and you can open it, but that is not why it is in my portfolio. It is here because of what it proves: the whole chain between a designer and a working product has collapsed. No design file to hand over, no frontend developer to translate it, no waiting. One designer and Claude, and then a backend developer taking over something that already ran.

That is not a small efficiency gain. It changes what a designer is able to promise, how early a client sees the real thing, and what a development team receives on day one.

About this project

Curious about the details? Ask the AI assistant anything about this case study: how it was made, what was built, or why it matters.

Ask AI about this project

Hi! I can tell you about this case study. Pick a question or type your own.

More work

Open →