Tenderdex

Rol

Ontwerper & bouwer ⁠— product, visuele richting, design system, front-end en datapipeline; gebouwd met Claude Code

Klant

SVP Consulting ⁠— Antwerps AI & data-sciencebedrijf

Disciplines

Productdesign · Design systems · Data · Full-stack · Toegankelijkheid

Jaar

2026

Een wekelijkse lijst van overheidsopdrachten voor software uit Find a Tender (VK) en TED (EU), gerangschikt naar wat een kleine leverancier verkoopt. Het begon in mei 2026 als tool om aanbestedingen op te volgen voor SVP Consulting, een Antwerps AI-adviesbureau; in oktober heb ik het herontworpen rond één metafoor, een archief van mappen, er een landingspagina bij gemaakt en het op een eigen domein gelanceerd voor elke kleine leverancier. Voorheen “UK & EU Procurement Radar”

Probleem
Britse aankondigingen staan op Find a Tender, Europese op TED, in twee dataformaten en een twintigtal talen. Een softwarebedrijf van tien mensen heeft niemand die betaald wordt om beide in het oog te houden
Inzicht
Op het meeste wat de portalen publiceren, kun je niet meer inschrijven: op 11 oktober 2026 waren 1.900 van de 11.190 aankondigingen open aanbestedingen. Daar moet de lijst beginnen, en ze moet zeggen waarom elke opdracht past
Oplossing
Eén lijst uit beide bronnen, met een score van 0 tot 100 uit vijf zichtbare regels tegenover een profiel dat in de browser blijft, in een interface van archiefmappen, gekozen uit tien concepten
Resultaat
Live op tenderdex.com en app.tenderdex.com sinds 8–⁠9 oktober 2026, na reviewrondes die een path traversal dichtten en een audit die een deadlinefout herstelde

Twee portalen, twee formaten, en niemand die ze bijhoudt

Britse overheden publiceren hun aanbestedingen op Find a Tender als OCDS-JSON; in de EU gaan ze naar TED als eForms, in de taal van de koper. De twee delen geen zoekfunctie en geen codelijsten. Polen, Duitsland en Spanje leverden samen 7.075 van de 11.190 aankondigingen die Tenderdex op 11 oktober 2026 bevatte, meestal in het Pools, Duits en Spaans. Wie in het Engels zoekt op “imaging software”, vindt het Poolse ziekenhuis dat PACS-software koopt dus nooit.

Voor de publieke versie ontwierp ik voor oprichters en BD-verantwoordelijken bij software-, IT-dienst- en e-learningbedrijven van 1–⁠50 mensen, zonder biedteam. Hun pijnpunten in de brief komen uit deskresearch en staan als hypothesen gemarkeerd, en de landingspagina toont data waar normaal getuigenissen staan.

Vooraf: het dataprototype in juni 2026. De scoring en het datamodel overleefden het herontwerp, de interface niet

Door mij ontworpen en aangestuurd, gebouwd met een AI-partner

De tool ontstond binnen SVP Consulting; ik koos het publiek waarvoor hij openging en de afbakening: alleen vinden en schiften, geen biedingen schrijven, geen CRM, geen accounts en geen prijzenpagina. Ik koos de metafoor, het concept, de typografische richting en de opbouw van de hero, wees de opties hieronder af en bekeek de schermen ronde na ronde. Een deel van die reviews staat in mijn woorden in de pull requests: rijen uitgelijnd op de eerste regel van de titel, de map die doorloopt tot aan de CPV-tabbladen, één raster voor de kop van de app en de pagina.

Gebouwd met Claude Code: ik bepaalde de opdracht en de grenzen en beoordeelde elke wijziging voordat die erin ging.

Er kwamen een pixelmuur van alle aankondigingen en een vertrekbord met klapcijfers bij de mappen terug. Ik schrapte beide: één metafoor, niet meer

Die regel ging op 6 oktober in het beslissingslogboek, en elke latere keuze werd eraan getoetst. Dezelfde week vroeg ik voor de hero de opbouw van een advertentie van Lowe, en kreeg ik er ook de crèmekleurige achtergrond en de schreefletter bij; het bureau bleef donker, en alleen de plaatsing ging mee.

Mei: eerst het datamodel

De eerste versie ontstond eind mei 2026 voor SVP Consulting, na een onderzoeksronde die beide API’s met live anonieme aanroepen controleerde. Elke bron heeft een eigen mapper naar één model, met ID’s die beginnen met UK: en EU: zodat ze nooit botsen, en het oorspronkelijke record blijft bewaard om terug te kunnen zoeken. De score is een gewogen som van vijf regels, zodat je ze met de hand kunt nagaan: CPV-match 35%, trefwoorden 25%, waarde binnen bereik 15%, dagen tot de deadline 15%, geschiedenis van de koper 10%. Elk deel komt met een gewone uitleg, zoals “Only 1 day left ⁠— less than your 7-day minimum”. De aankondigingen worden elke maandag om 06.00 uur UTC opgehaald.

Vanaf juni draaide het op mijn eigen server, en het zag eruit als een generiek dashboard. In oktober begon ik het herontwerp, zonder aan de scoring of het datamodel te raken.

Eén metafoor, gekozen uit tien

Ik verzamelde een moodboard van meer dan honderd archiefreferenties: maptabs, fiches, gekleurde tabbladen, ladelabels. Daar kwamen tien concepten in Figma uit: een kasboek, maptabs, een formulier met stempel, archiefladen, een kleurindex, een microfichelezer, een open dossier, een Rolodex, een bibliotheekcatalogus en een blauwdrukhandleiding. Ik koos de maptabs. In versie 02d is de app een zwart bureau, de lijst een crèmekleurige map erop, met gekleurde tabs als snelle filters en CPV-tabbladen langs de rechterrand.

De tien concepten, gevuld met voorbeelddata. Nummer 02, de maptabs, werd de app

De typografie duurde langer dan de lay-out. Concept 02 ging door twintig lettervarianten voor ik koos voor Nitti Grotesk voor de interface, Nitti voor metadata en Newsreader voor de titels van aanbestedingen, het schema van iA Writer Pro. Ik vroeg om de groottes te meten op donorsites in plaats van ze op het oog te kiezen: de schaal komt van ia.net in 2016, de displaygroottes van de hero van ia.net/writer en van Brainport Eindhoven, dat gezet is in een snit van Nitti Grotesk. Titels krijgen 19/⁠32 in plaats van iA’s 24/⁠32, dat ze in een tabelkolom over vier regels liet lopen. Het lichte thema viel weg: één thema, het bureau met papier erop.

Vóór de Hi-Fi werd de live app in grijs uitgetekend: 28 schermen uit componenten, op variabelen die naar een Hi-Fi-modus omschakelen. De Hi-Fi dekt de hele schermkaart, 23 desktop- en 6 mobiele schermen, en DESIGN.md beschrijft het systeem voor de code.

Een rij echte aankondigingen, en één map die eruit getrokken is

De hero van de landingspagina neemt de opbouw over van de advertentie van Lowe op mijn moodboard: een rij mappen loopt van hoek tot hoek, de titel staat linksboven, de knoppen en één regel feiten rechtsonder. Elke map in de rij is een echte open aankondiging uit de laatste momentopname, gekleurd per land, met de categorie en de titel in de oorspronkelijke taal. Eén paarse map is uit de rij getrokken. Als je scrolt, gaat de rij uiteen, draait de paarse map naar je toe en opent ze zich tot de eerste sectie; de mappen 02 tot 07 stapelen zich daarna op.

tenderdex.com: de cijfers in de feitenregel worden bij elke build uit de data gelezen

Scrollen: de rij gaat uiteen en de paarse map richt zich op

Ze opent tot map 01, die het probleem in drie regels draagt

De tekst volgt de data. De eerste titel beloofde “every public tender”; een telling toonde toen dat 99,8% van de aankondigingen wel de codes voor software en IT draagt, maar dat er maar 1.719 van de 11.090 toenmalige aankondigingen open waren, en Find a Tender en TED publiceren alleen boven de drempelbedragen. De titel werd “Public software tenders from the UK and EU. One weekly list.”, en de feitenregel begint nu met open aanbestedingen. De pagina wordt vooraf gerenderd, dus de tekst komt binnen als HTML; op telefoons en met beperkte beweging staan de mappen in een vaste stapel.

Landingspagina, 375 px

De 404-pagina: map 404 uit de lade getrokken en gestempeld “Not on file”

Eerst de open aanbestedingen, een profiel in dertig seconden

De app opent op enkel de open aanbestedingen, gesorteerd op deadline. Accounts zijn er niet: de browser bewaart een willekeurige ID, en het profiel daarachter houdt CPV-codes, trefwoorden, landen, een waardebereik en het minimum aantal dagen om in te schrijven bij. Wie voor het eerst komt, ziet één papiertje op de map, “Rank these notices for your firm”, met drie voorinstellingen (Software & IT, E-learning, R&D & analytics) en een link om het zelf in te stellen. Elke code in de voorinstellingen is getoetst aan de officiële lijst en had open aankondigingen op de dag van de release. Zodra een profiel bewaard is, schakelt de lijst over op beste match.

app.tenderdex.com bij een eerste bezoek: 1.763 open aankondigingen, waarvan 230 binnen een week sluiten

Bij CPV-codes haken nieuwkomers af, dus elke code staat er met zijn naam uit de officiële CPV-woordenlijst van 2008: alle 9.454 labels, pas geladen wanneer ze nodig zijn. In het profiel werd het tekstvak met komma’s een doorzoekbare combobox die woorden of het begin van een code aanneemt. De rondleiding start niet meer vanzelf; een hint van één regel biedt ze aan.

Een aankondiging: de deadline met het echte lokale tijdstip, de CPV-codes met hun officiële namen en een rechtstreekse link naar de bron

Het profiel: doorzoek de CPV-lijst op woord of op code

Hoe een score wordt uitgelegd: een uitgewerkt voorbeeld op de landingspagina, geen live score

Overzicht: wat er open staat, per bron, categorie en land

App, 375 px

Nagekeken en geaudit, nog niet getest met gebruikers

Alle controles tot nu toe zijn AI-auditrondes aan de hand van een checklist, plus mijn eigen visuele reviewrondes. Vóór de lancering liepen vijf reviewrondes en op 9 oktober nog vijf tegen productie: code, beveiliging, WCAG 2.2 AA, functionele QA en performance. Op 9–⁠10 oktober volgde een volledige audit, en elke bevinding werd eerst in de code nagebootst voor ze werd opgelost.

De ergste bevinding kwam uit de beveiligingsronde van 9 oktober, in de oudste code: sinds mei kon een gecodeerde schuine streep in de URL de app eender welk bestand uit haar container laten serveren, ook haar eigen broncode. Het lek werd gedicht, er kwam een test bij, en de CI start nu het image op en probeert het. De audit vond daarna dat deadlines die als datum zonder tijd werden gegeven, gelezen werden als het begin van die dag, waardoor aankondigingen 10 tot 20 uur te vroeg sloten; dat waarden van 0 of −1 als echte bedragen meetelden; dat TED één aanbesteding onder meerdere nummers publiceerde, zodat nu 88 dubbele rijen verborgen zijn en oudere versies van een opnieuw gepubliceerde aanbesteding wijken voor de nieuwste; en dat de telling van open opdrachten ook gunningen meenam, 2.367 in plaats van 1.727 op die dag. Verzoeken boven 64 KB worden nu geweigerd, en voor lezen, gescoord lezen en nieuwe profielen gelden limieten.

De ronde over het design system liet één tokenvocabulaire over voor app en landingspagina, schrapte het oude palet en de vertaallaag (de hoofdstylesheet ging van 758 naar 230 regels), legde een ondergrens van 15 px voor tekst op desktop en 13 px op telefoons, en reserveerde ruimte zodat niets verspringt: scrollen door de hero gaf een layoutverschuiving van 0,097, nu 0. axe-core vond geen overtredingen in de toestanden die op 1440 en 375 px zijn nagekeken, en Lighthouse geeft de toegankelijkheid van de app 100 op mobiel.

Live op een eigen domein, met de cijfers die het kan waarmaken

Tenderdex is live: de landingspagina op tenderdex.com, de app op app.tenderdex.com, beide sinds 8–⁠9 oktober 2026, en de oude previewadressen sturen erheen door. Op 11 oktober bevatte het 11.190 aankondigingen uit 15 landen, waarvan 1.900 open aanbestedingen, elke maandag ververst. De backend heeft 297 tests, de front-end 79, en de CI speelt elke databasemigratie opnieuw af op Postgres 17.

app.tenderdex.com — live-voorbeeld
Live-demo
app.tenderdex.com
Openen

Live ⁠— app.tenderdex.com

Wat nog openstaat

Een wekelijkse e-mail met nieuwe matches, waar het datamodel al rekening mee houdt. De taal van titels in de TED-data is onbetrouwbaar, dus het lang-attribuut op titels komt van het land van de koper en blijft weg voor België en Luxemburg. Op een afgeknepen telefoonverbinding scoort de landingspagina 79 voor performance, afgeremd door de blokkerende stylesheet van de lettertypes. De merkcheck voor de naam is nog niet gebeurd.

Volgend project
3D-iconensystemen