Market Opportunity Map
Een webtool die een map met onderzoeks-CSV’s of geplakte notities omzet in een gescoorde, gevisualiseerde en afdrukbare opportunity map — zo gaat een PM in minder dan tien minuten van ruwe discovery-signalen naar een verdedigbare brief, zonder ook maar één spreadsheet erbij
- Probleem — PM-prioritering draait op buikgevoel; onderzoek blijft versnipperd, waardoor de assemblagestap (niet de spreadsheet) het echte knelpunt is
- Inzicht — Een score wint alleen vertrouwen als je hem kan bevragen, dus een transparante regelgebaseerde formule klopt een black-box-AI-oordeel
- Oplossing — Ik bouwde de volledige webapp solo (React + FastAPI): CSV of plaktekst als invoer, score van 0–100 op 4 componenten, force-directed map, uitklapbare uitsplitsing + afdrukbare brief
- Resultaat — Live op marketmap.ontwrpn.com, solo gebouwd in zo’n 4 weken; 24 brongebonden kansen, scoring in <200 ms, WCAG 2.2 AA, €0 hosting
De spreadsheet is niet het knelpunt — de assemblagestap is dat
Productprioritering draait op buikgevoel dat zich voordoet als methodiek. RICE, ICE, Kano — elk framework bestaat, maar de invoer wordt vrijwel nooit uit echte data berekend. Een PM zet in een spreadsheetcel een buikgevoel-‘ernst: 7’ en de formule vermenigvuldigt intuïties met elkaar. De uitkomst oogt verdedigbaar. Dat is ze niet. De oorzaak ligt stroomopwaarts: marktonderzoek zit versnipperd over Dovetail-repositories, Notion-pagina’s, interviewopnames en Slack-threads. Niemand brengt het samen in een vorm die je kan scoren. De spreadsheetformule bijschaven heeft geen zin zolang het assemblageprobleem niet is opgelost.
De spreadsheet is niet het knelpunt — de assemblagestap is dat
Het gat dat ik viseerde: een tool die (1) gestructureerde marktsignalen inleest uit een eenvoudige CSV of ruwe plaktekst, (2) elke kans scoort met een controleerbare formule op vier componenten, (3) de verbanden tussen segmenten, pijnpunten, concurrenten en features in één grafiek toont, en (4) een afdrukbare one-pager oplevert die een PM met stakeholders kan delen — zonder ook maar één spreadsheet. Geen enkele bestaande tool doet alle vier. Productboard beheert roadmaps maar scoort geen discovery-signalen. Dovetail bewaart onderzoek maar legt geen gescoorde kansen bloot. Spreadsheets kunnen scoren, maar visualiseren niet, exporteren geen briefs en linken niet terug naar de bronnen.
Elke rij verankerd in een publieke bron — discipline by design
In plaats van demodata te bouwen die er aannemelijk uitzag, verankerde ik elke rij in publiek beschikbare primaire signalen: ‘Ask HN’-threads op Hacker News (januari 2026), Lenny’s Newsletter voor terugkerende pijnthema’s in PM-workflows, McKinsey-onderzoek naar omscholing (2024–2025) en de jaarsurveys van CareerKarma voor de EdTech-dataset, en de afzonderlijke prijspagina’s van leveranciers (Aha, Productboard, Figma, Coursera, Pluralsight) voor de concurrerende prijzen. Artikels van de Nielsen Norman Group en branchesurveys over UX-onderzoek verankerden de producttools-dataset.
Twee datasets, 24 voorgeladen kansen: de producttools-dataset (senior PM’s, UX-onderzoekers, design leads) en de EdTech-dataset (L&D-managers, bootcamp-afgestudeerden, carrièreswitchers). Het meest consistente PM-pijnpunt in de HN-threads was strategie die in het hoofd van de CEO blijft en nooit doorsijpelt naar beslissingen op squadniveau. Het sterkste EdTech-signaal: de grote meerderheid van de L&D-teams heeft het moeilijk om bedrijfswaarde aan te tonen, en slechts een minderheid meet training tot op Level 4 van Kirkpatrick (bedrijfsresultaten). De scorekalibratie was bewust eerlijk — de hoogste demoscores clusteren rond 60–65 (‘Waard om te valideren’), niet ≥75 (‘Sterke kans’), want een sterk oordeel claimen zonder klantvalidatie in een competitieve markt zou oneerlijk zijn.
Elke rij verankeren in een publieke bron-URL disciplineert de scoring en houdt de demo eerlijk. Onderzoekskwaliteit blijft tellen — de tool scoort wat je aanlevert
Transparante scoring, een force-directed map en een afdrukbare brief
De scoringformule is bewust mechanisch — vier gewogen invoerwaarden, geen black-box-AI, elke component zichtbaar in een uitklap-drawer, elk signaal gelinkt aan een publieke bron. Ernst (35%) weegt het zwaarst: de diepte van een pijnpunt is het signaal dat adoptie het sterkst aandrijft. Betalingsbereidheid (25%) vangt de commerciële trek. Concurrentie (25%, omgekeerd) beloont onderbediende niches. Bewijs (15%, afgetopt op 10 signalen) voegt zekerheid toe zonder dat een vloed bevestigende signalen een probleem met lage ernst overstemt. Een PM die het niet eens is met een score, past de formule aan in zes regels pandas en ziet het effect meteen — net die controleerbaarheid is de bedoeling.
Het dashboard: eerst de force-directed network map (zes node-types, zes kleuren), dan de scatterplot van de opportunity matrix, de concurrent-heatmap en als laatste de gerangschikte tabel — de beslissingsuitvoer, niet de haak
Drie invoerpaden dekken het hele spectrum van gestructureerd tot ruw af: een CSV-upload met volledig schema (~5 seconden tot de eerste score), een plak-modal met drie tabbladen (concurrenten / pijnpunten / citaten, heuristische scoring via trefwoorddetectie — ‘frustrated’, ‘painful’, ‘broken’) voor ruwe discovery-notities, en twee voorgeladen demodatasets voor een eerste kennismaking. Stateless by design — geen database, geen auth, geen persistente serverstate. Alle analyse gebeurt op het moment van de aanvraag met pandas en networkx.
Live — laad een demodataset of plak ruwe discovery-notities en ga verkennen
Visuals als haak, verklaarbaarheid als vertrouwen
Twee bewuste ontwerpkeuzes: zet de network graph eerst, en maak elke score uitsplitsbaar. De force-directed graph — zes node-types in zes kleuren, interactief bij hover en klik — wint vertrouwen voordat de gerangschikte tabel iemand vraagt cijfers te lezen. Het is de toegangspoort tot een dichte dataset. De uitklapbare drawer is de tweede vertrouwensbouwer: vier kleurgecodeerde voortgangsbalken (ernst = rood, WTP = blauw, concurrentie = paars, bewijs = amber) met de bron-URL’s inline. Een PM die een kans beoordeelt, ziet precies welke invoer de score bepaalde en klikt door naar het originele bewijs.
Network map: het eerste dat een bezoeker op desktop ziet
Breakdown drawer: elke score herleidbaar tot zijn invoer
Elke kans heeft een /opportunity/:id/brief-route — scorecomponenten, concurrentielandschap (welke concurrenten dit segment bedienen en welke pijnpunten ze onbenut laten), de drie sterkste ondersteunende signalen, open vragen en een beslissingscategorie als volgende stap. @media print-CSS maakt het PDF-veilig zonder headless browser. De brief-pagina is de meest deelbare output: een URL, geen screenshot van een spreadsheet.
Afdrukbare brief: deelbaar als directe URL, PDF-veilig via print-CSS
Toegankelijkheid was van begin tot eind een eersterangsvereiste: een skip-to-content-link, met het toetsenbord navigeerbare tabelrijen (Tab + Enter/Spatie om de breakdown drawer te openen), focusvallen op de drawer en de plak-modal, aria-modal en aria-labelledby op alle overlays, role="progressbar" op de scorebalken, ondersteuning voor reduced-motion en een minimale contrastverhouding van 7,0:1 op gedempte tekst. WCAG 2.2 AA over de hele lijn.
Vier weken, solo, van hypothese tot opgeleverd — met een eerlijke retrospective
Gebouwd in vier afgebakende weken (13 januari – 10 februari 2026): week 1 leverde CSV-upload → gescoorde tabel, network graph en opportunity matrix op. Week 2 voegde de concurrent-feature-heatmap toe, de plak-modal (frictie was de grootste drempel bij een eerste kennismaking — eerder toegevoegd dan gepland) en een volledige toegankelijkheidscheck WCAG 2.2 AA. Week 3 leverde de opportunity brief-pagina, ‘Kopiëren als Markdown’ en PDF-export via print-CSS op (toegevoegd toen testen op mobiel uitwees dat er geen propere uitvoerweg was). Week 4: een rondleiding via driver.js, de EdTech-demodataset en visuele polish.
Stack: React 18 + Vite + Tailwind CSS aan de front-end, react-force-graph-2d (canvasgebaseerd, verwerkt 50+ nodes zonder layout-jank), Recharts voor de scatterplot van de opportunity matrix, driver.js (13 KB gzipped) voor de rondleiding. FastAPI + Python aan de back-end, pandas voor de scoringformule van zes regels, networkx voor de opbouw van de graaf, slowapi voor rate limiting van 15 req/min per IP op de schrijf-endpoints. Eén Docker-container op Coolify (Hetzner), uvicorn serveert de SPA en /api op dezelfde origin, met auto-deploy vanuit GitHub bij elke push. €0 hosting, 7 API-endpoints.
Wat ik anders zou aanpakken: starten met de plak-modal in plaats van de CSV — de meeste bezoekers komen niet met een onderzoeks-CSV klaar aanzetten, en de plak-modal geeft minder frictie bij een eerste demo. Deelbare sessie-URL’s vroeger toevoegen — de brief-pagina is deelbaar, maar het volledige gescoorde dashboard leeft enkel binnen de sessie; een /session/:id-route met een sleutel van 24 uur (Redis of Upstash) zou PM’s toelaten de hele map te delen. De EdTech-dataset kwam er in de laatste week onder tijdsdruk — solide, maar minder diep onderbouwd dan de producttools-dataset.
Live, brongebonden en eerlijk over wat er volgt
Live op marketmap.ontwrpn.com sinds 10 februari 2026. Twee volledig onderzochte demodatasets, 24 brongebonden kansen, WCAG 2.2 AA, €0 hosting. De hoogste demoscores clusteren rond 60–65 (‘Waard om te valideren’) — bewust, niet per ongeluk. De north-star-metriek: een PM gaat van een onderzoeks-CSV naar een gedeelde opportunity brief in minder dan tien minuten. Die flow werkt end-to-end. De keuzes voor het volgende kwartaal: collaboratieve scoring (meerdere teamleden leveren invoer aan, scores worden gemiddeld om de discussie te voeden), AI-ondersteunde clustering (plak ruwe interviewtranscripten, een LLM haalt de pijnpunten eruit voordat de scoring begint) en deelbare sessie-URL’s op basis van Upstash Redis.
Bronnen
- Kirkpatrick vier-niveau trainings-evaluatiemodel (Level 1 Reaction → Level 4 Results). — de L&D-cijfers in de demodataset zijn illustratief
