🧩 Functioneel Ontwerp (FO) – Template

Projectnaam: [vul in] Versie: v1.0 Datum: [dd-mm-jjjj] Auteur: [naam]

1. Doel en relatie met het PRD

🎯 Doel van dit document: Het Functioneel Ontwerp (FO) beschrijft hoe het product uit het PRD functioneel zal werken — dus wat de gebruiker ziet, doet en ervaart. Waar het PRD uitlegt wat en waarom, laat het FO zien hoe dit in de praktijk werkt.

📘 Toelichting aan de lezer: Gebruik dit document om een gedeeld beeld te creëren tussen ontwerp, ontwikkeling en stakeholders. Het FO hoort compact te blijven: één niveau dieper dan het PRD, niet technisch maar functioneel-concreet.

2. Overzicht van de belangrijkste onderdelen

🎯 Doel: kort overzicht van de modules, schermen of onderdelen binnen de app of tool. 📘 Toelichting: som de kernschermen of modules op (zoals 'Dashboard', 'Cliëntenlijst', 'Editor', 'AI-rail'). Dit helpt de lezer snel te begrijpen waar het FO over gaat.

Voorbeeld:

1. Dashboard / Overzicht
2. Cliëntdossier
3. Intakeverslag
4. Probleemprofiel
5. Behandelplan
6. (Optioneel) Rapportage / Agenda

3. Userstories (sjabloon + voorbeelden)

🎯 Doel: beschrijven wat gebruikers moeten kunnen doen, vanuit hun perspectief.

📘 Toelichting: gebruik dit vaste sjabloon:

User Story Template:

Als [rol/gebruiker] wil ik [doel of actie] zodat [reden/waarde].

Voorbeeld:

Als behandelaar wil ik snel een intakeverslag kunnen samenvatten zodat ik sneller tot een behandelplan kom.

Aanvullende kolommen (optioneel):

4. Functionele werking per onderdeel

🎯 Doel: per hoofdonderdeel beschrijven wat de gebruiker kan doen en wat het systeem doet.

📘 Toelichting: dit is de kern van het FO. Gebruik korte, actiematige beschrijvingen. Focus op gedrag, states en interacties.

Voorbeeldstructuur:

4.1 Dashboard / Overzicht

• Toont kaarten met samenvattingen van cliëntinformatie (intake, profiel, plan).
• Knoppen: Nieuw verslag, Ga naar behandelplan.
• Leeg-staat: melding "Nog geen dossiers".

4.2 Intakeverslag

• Rich text editor met knoppen voor Opslaan, AI-samenvatten, Leesbaarheid.
• AI-resultaat verschijnt in rechterzijpaneel (AI-rail).
• Gebruiker kan Preview → Invoegen of Annuleren.

4.3 Probleemprofiel

• Formulier met dropdown (categorie) en slider (severity).
• AI-suggestie met bronverwijzing uit intake.
• Bevestigen activeert Behandelplan tab.

4.4 Behandelplan

• Vier secties: Doelen, Interventies, Frequentie/Duur, Meetmomenten.
• Gebruiker kan elke sectie aanpassen of regenereren via micro-AI-acties.
• Knoppen: Opslaan (concept), Publiceer v1.

5. UI-overzicht (visuele structuur)

🎯 Doel: eenvoudig inzicht geven in de globale schermopbouw.

📘 Toelichting: gebruik dit als communicatiemiddel met ontwerpers of developers. Het is geen pixel-perfect ontwerp, maar een functionele schets.

Voorbeeld (ASCII-layout):

┌───────────────────────────────────────────────┐
│ Topbalk: cliëntnaam, acties, zoeken           │
├───────────────┬───────────────────────────────┤
│ Linkernav     │  Middenpaneel (inhoud)        │
│ (Overzicht,   │  Detail, formulieren, editor) │
│ Intake, Prof.)│                               │
├───────────────┴───────────────────────────────┤
│ Footer: status / toasts                      │
└───────────────────────────────────────────────┘

Tip: Combineer dit later met wireframes of UX-schetsen uit Figma of Gamma.app.

6. Interacties met AI (functionele beschrijving)

🎯 Doel: uitleggen waar AI in de flow voorkomt en wat de gebruiker ziet of verwacht.

📘 Toelichting: beschrijf per AI-actie kort de trigger, verwerking en output.

Voorbeeld:

7. Gebruikersrollen en rechten (optioneel)

🎯 Doel: beschrijven welke rollen toegang hebben tot welke onderdelen. 📘 Toelichting: alleen opnemen als het project meerdere gebruikersgroepen kent.

Voorbeeld:

8. Bijlagen & Referenties

🎯 Doel: linken naar de overige documenten binnen Mission Control.

Verwijzingen:

• PRD (Product Requirements Document)
• TO (Technisch Ontwerp)
• UX/UI-specificatie
• Mission Control / Build Plan
• API Access Document