[{"data":1,"prerenderedAt":329},["ShallowReactive",2],{"DefaultLayoutnl":3,"language-cases-slug-npo-dashboard-i18n-slugs":132,"language-cases-slug-nl-npo-dashboard":138},{"app":4,"menu":31,"footer":66},{"githubUrl":5,"youtubeUrl":6,"linkedinUrl":7,"phoneNumber":8,"emailAddress":9,"legal":10,"addresses":20},"https:\u002F\u002Fgithub.com\u002Fvoorhoede\u002F","https:\u002F\u002Fwww.youtube.com\u002Fchannel\u002FUCzHuhQVYFRixtQN2-swcuGg","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fde-voorhoede","+31 20 2610 954","post@voorhoede.nl",[11,14,17],{"title":12,"value":13},"KvK","56017235",{"title":15,"value":16},"BTW","NL851944620B01",{"title":18,"value":19},"IBAN","NL14TRIO0320142078",[21,26],{"address":22,"city":23,"googleMapsLink":24,"postalCode":25},"Koivistokade 70","Amsterdam","https:\u002F\u002Fwww.google.com\u002Fmaps\u002Fplace\u002FDe+Voorhoede+%7C+Front-end+Development\u002F@52.396847,4.8700823,17z\u002Fdata=!3m1!4b1!4m5!3m4!1s0x47c5e21d502d2d59:0xbf570944a96ebf45!8m2!3d52.347647!4d4.8502154","1013 BB",{"address":27,"city":28,"googleMapsLink":29,"postalCode":30},"Koornmarkt 22","Delft","https:\u002F\u002Fwww.google.nl\u002Fmaps\u002Fplace\u002FKoornmarkt+22,+2611+EG+Delft\u002F@52.0093477,4.3573054,17z\u002F","2611 EG",{"title":32,"callToActions":33,"links":39},"Site Menu",[34],{"id":35,"title":36,"link":37},"163140903","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140909","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140910","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140911","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140913","Over ons",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"NnUFs73_Saa8XE_jYZFHcw","Werken bij",{"__typename":44,"slug":65},"work-at",{"links":67,"copyrightTitle":93,"copyrightLabel":94,"copyrightLink":95,"privacyTitle":96,"privacyLabel":97,"privacyLink":98,"certificatesGrid":99},[68,71,74,77,82,85,88],{"id":69,"title":42,"link":70},"144185271",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185272",{"__typename":50},{"id":75,"title":53,"link":76},"144185273",{"__typename":55},{"id":78,"title":79,"link":80},"144185274","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185275",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185276",{"__typename":38},{"id":89,"title":90,"link":91},"144185277","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licentie en disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","PDF bestand van De Voorhoede privacy statement","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455427-vh-isms-007-privacy-statement-de-voorhoede-nl.pdf",[100,112,122],{"id":101,"image":102,"link":107},"Xq4bBfg_TZ6Fkjax9mkbLQ",{"url":103,"alt":104,"width":105,"height":106},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353463-b-corp-logo-black-rgb.png",null,404,680,{"__typename":108,"id":109,"title":110,"url":111},"ExternalLinkRecord","fGW1ak8XQYaYDLkBSyncog","B Corp","https:\u002F\u002Fwww.bcorporation.net\u002Fen-us\u002Ffind-a-b-corp\u002Fcompany\u002Fde-voorhoede\u002F",{"id":113,"image":114,"link":118},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":104,"width":116,"height":117},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png",627,480,{"__typename":108,"id":119,"title":120,"url":121},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":123,"image":124,"link":127},"MT5SCyNxSTSr_v5eeATMZw",{"url":125,"alt":104,"width":126,"height":126},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png",518,{"id":128,"title":129,"link":130},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":131},"impact\u002Fdigitale-producten-privacy-by-design",[133,136],{"locale":134,"value":135},"en","npo-dashboard",{"locale":137,"value":135},"nl",{"page":139,"cases":249},{"title":140,"slug":135,"i18nSlugs":141,"social":144,"heroIllustration":147,"caseTeaser":151,"content":154,"metaData":208,"quote":158,"author":158,"pivots":225},"NPO Dashboard",[142,143],{"locale":134,"value":135},{"locale":137,"value":135},{"title":145,"description":146,"image":104},"NPO Dashboard | De Voorhoede","Een big data dashboard voor de redacties van NPO en NOS ontwikkeld volgens de Kanban methode",{"url":148,"alt":104,"width":149,"height":150},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1622105810-npo-dashboard-case-preview.png",665,470,{"title":152,"image":153},"Helder inzicht in realtime bezoekersstatistieken",{"url":148,"alt":104,"width":149,"height":150},[155,160,164,173,176,180,188,192,196,200,205],{"__typename":156,"id":157,"title":158,"body":159},"TextSectionRecord","432336","","\u003Cp>Binnen het Nederlandse publieke omroepbestel (NPO) werd in 2015 een project gestart om op basis van ‘big data’ een aantal pilots te doen. Een van die pilots was het ontwikkelen van een dashboard voor redacties om direct \u003Cstrong>inzicht te krijgen in bezoekers\u002Fkijkersstatistieken en trends\u003C\u002Fstrong>. \u003Ca href=\"http:\u002F\u002Fcleverlions.com\u002F\" target=\"_blank\" rel=\"noopener\">CleverLions\u003C\u002Fa> vroeg als aannemer van dit project De Voorhoede om dit configureerbare dashboard te ontwikkelen.\u003C\u002Fp>",{"__typename":156,"id":161,"title":162,"body":163},"432337","De uitdaging: bouw een prototype op basis van complexe data","\u003Cp>De NPO is een complexe mediaorganisatie. Er wordt niet alleen televisie gemaakt, maar hier leeft ook de NOS als nieuwsorganisatie, en het internetforum van bijvoorbeeld Kassa, dat grote bezoekersaantallen trekt. Elk van deze redacties gebruikt eigen software. Soms heeft die software een moderne API, soms helemaal niet. \u003Cstrong>Dataontsluiting is dus een grote uitdaging\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>NPO wil voor elke redactie een dashboard willen kunnen aanbieden dat dezelfde soort informatie weergeeft (bezoekersaantal, shares op sociale netwerken, snelste stijgers, enzovoorts) hebben we een API nodig die alle verschillen normaliseert. Tekst die bij de een \u003Ccode>header\u003C\u002Fcode> wordt genoemd en bij de ander \u003Ccode>caption\u003C\u002Fcode> wordt in onze API allemaal gevangen als \u003Ccode>title\u003C\u002Fcode>. Bovendien moet deze data zo \u003Cem>realtime\u003C\u002Fem> mogelijk zijn. Alleen als een trend zich letterlijk voor hun ogen ontwikkelt, kan een redactie werkelijk ingrijpen of aanhaken.\u003C\u002Fp>",{"__typename":165,"id":166,"image":167,"caption":169,"captionPosition":172},"ImageRecord","176458616",{"url":168,"alt":169,"width":170,"height":171},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539867055-npo-topspin-graph.jpg","Deze grafiek geeft het verloop van bezoekersaantallen weer. De oranje lijn is het werkelijke aantal, de zwarte het verwachte aantal en het grijze vlak de bandbreedte van die verwachting.",1024,420,"left",{"__typename":156,"id":174,"title":158,"body":175},"432344","\u003Cp>Om die data inzichtelijk te maken, zoeken we een \u003Cstrong>balans tussen de scanbaarheid en de hoeveelheid informatie\u003C\u002Fstrong> die we tegelijk op het dashboard weergeven. Met herkenbare icons, foto’s, grafieken en taartdiagrammen bijvoorbeeld.\u003C\u002Fp>\n\u003Cp>Tot slot ging het om een prototype: we wilden vooral veel leren, en ideeën snel kunnen uitwerken en bediscussiëren.\u003C\u002Fp>\n\u003Cp>Samen met de big data-experts van \u003Ca href=\"https:\u002F\u002Fwww.godatadriven.com\u002F\" target=\"_blank\" rel=\"noopener\">GoDataDriven\u003C\u002Fa> en designers van \u003Ca href=\"https:\u002F\u002Fhike.one\u002F\" target=\"_blank\" rel=\"noopener\">Hike One\u003C\u002Fa> gingen we aan de slag.\u003C\u002Fp>",{"__typename":156,"id":177,"title":178,"body":179},"432345","De oplossing: werk iteratief en vraaggestuurd","\u003Cp>Het was belangrijk dat het dashboard \u003Cem>actionable\u003C\u002Fem> werd voor redacties. Aan de andere kant hadden we een berg data die uitnodigde om mee te experimenteren. Door vragen te blijven stellen, veel demo’s te geven en flexibele code te schrijven bleven we gefocust.\u003C\u002Fp>",{"__typename":165,"id":181,"image":182,"caption":184,"captionPosition":187},"176458617",{"url":183,"alt":184,"width":185,"height":186},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539866786-npo-topspin-scrum.jpg","In dit project werkten we volgens de Agile Kanban-methode",1440,812,"right",{"__typename":156,"id":189,"title":190,"body":191},"432348","API op maat voor de front-end","\u003Cp>De meeste grote uitdagingen zaten aan de kant van de back-end: het ontsluiten van data, normaliseren, analyseren en aanbieden in een API aan de front-end. Maar wat moet er in die API? Dat wordt eigenlijk bepaald door wat er op het dashboard getoond moet worden. Omdat die ontsluiting complex is, is het verstandig om selectief te werk te gaan. Zo bespraken we voortdurend met de back-end developers wat voor informatie in welk format we nodig hadden om een onderdeel in het dashboard te laten zien. Dat maakt de front-end ook nog eens \u003Cstrong>sneller, omdat de API perfect op maat is gesneden\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":156,"id":193,"title":194,"body":195},"432349","Microframework voor snelle iteratie","\u003Cp>Om snel te kunnen ontwikkelen is het slim om iets van de plank te trekken, maar niet zo groot uit te pakken dat het je development-tempo omlaagbrengt. We kozen voor \u003Ca href=\"http:\u002F\u002Friotjs.com\u002F\" target=\"_blank\" rel=\"noopener\">Riot\u003C\u002Fa>: gericht op modulair development en erg flexibel. We zorgden dat elk onderdeel op de pagina zichzelf kan updaten met nieuwe informatie. De titels, layout en posities van grafieken en lijstjes op de pagina zijn aanpasbaar in een eenvoudig configuratiebestand. Tot slot ontwikkelden we een ‘TV modus’-variant van het dashboard, met een donkere achtergrond zeer geschikt voor grote schermen die centraal op een redactie hangen.\u003C\u002Fp>\n\u003Cp>Door deze aanpak konden we op laagdrempelige wijze \u003Cstrong>experimenteren met de getoonde informatie\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":156,"id":197,"title":198,"body":199},"432350","Visueler is beter","\u003Cp>Mensen zijn erg visueel ingesteld. Om te laten zien dat een artikel het beter doet dan een ander, zetten we ze op volgorde in een lijstje. Als er meer op Facebook wordt gepraat dan op Twitter, is dat meteen zichtbaar met een taartdiagram.\u003C\u002Fp>",{"__typename":165,"id":201,"image":202,"caption":204,"captionPosition":172},"176458618",{"url":203,"alt":204,"width":170,"height":171},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539867216-npo-topspin-dashboard.jpg","Links het dashboard met bezoekersaantallen en de populariteit van twee ‘top stories’; rechts een detailpagina met informatie over social media.",{"__typename":156,"id":206,"title":158,"body":207},"432352","\u003Cp>In een vroege iteratie maakten we vooral gebruik van tekst en percentages in rood of groen. Naarmate het project vorderde, besloten we over te stappen op sterkere visualisaties. Met D3.js konden we \u003Cstrong>snel grafieken, diagrammen en ‘sparklines’ tonen\u003C\u002Fstrong>. Nu werd in een oogopslag veel meer duidelijk.\u003C\u002Fp>\n\u003Cp>In juli 2016 werd het project TopSpin afgesloten met een grote presentatie en de geboorte van een nieuwe afdeling die zich gaat richten op big data en \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fnl\u002Fservices\u002Fdatavisualisatie\u002F\">datavisualisatie\u003C\u002Fa>. We zijn trots dat we hieraan hebben kunnen bijdragen.\u003C\u002Fp>",{"expertisesTitle":209,"expertises":210,"deliverableTitle":215,"deliverables":216,"technologiesTitle":219,"technologies":220,"interestedTitle":158,"interestedLinkUrl":158,"interestedLinkLabel":158},"Expertises",[211,213],{"title":212},"Development",{"title":214},"Prototyping","Deliverables",[217],{"title":218},"Dashboard","Platforms",[221,223],{"title":222},"RiotJS",{"title":224},"D3.js",[226,238],{"title":227,"body":158,"links":228,"mailchimpValue":158,"mailchimpName":158,"mailchimpId":158,"formType":229,"contactPerson":230},"Laten we bespreken wat we kunnen doen",[],"contact",{"name":231,"lastName":232,"jobTitle":233,"image":234},"Nena","de Clercq","Operations Director",{"url":235,"alt":104,"width":236,"height":237},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535373-nena.jpg",2174,2898,{"title":239,"body":158,"links":240,"mailchimpValue":158,"mailchimpName":158,"mailchimpId":158,"formType":241,"contactPerson":242},"Meld je aan voor onze nieuwsbrief",[],"newsletter",{"name":243,"lastName":158,"jobTitle":244,"image":245},"Vera","Marketeer",{"url":246,"alt":104,"width":247,"height":248},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[250,253,256,259,262,265,268,271,274,277,280,283,286,289,292,295,298,299,302,305,308,311,314,317,320,323,326],{"slug":251,"title":252},"quantum-inspire","Quantum Inspire",{"slug":254,"title":255},"life-terra","Life Terra",{"slug":257,"title":258},"geldmaat","Geldmaat",{"slug":260,"title":261},"pathe-thuis","Pathé Thuis",{"slug":263,"title":264},"viriciti","ViriCiti",{"slug":266,"title":267},"drop-and-fly","Drop & Fly",{"slug":269,"title":270},"15-apps-voor-wateronderzoek-bij-deltares","15 Apps voor wateronderzoek bij Deltares",{"slug":272,"title":273},"het-nieuwe-funda","Het nieuwe Funda",{"slug":275,"title":276},"bouwen-is-macht","Bouwen is Macht",{"slug":278,"title":279},"world-water-atlas","World Water Atlas",{"slug":281,"title":282},"pick-up-10","Pick Up 10",{"slug":284,"title":285},"hike-one","Hike One",{"slug":287,"title":288},"dlr-inspectie-app","DLR Inspectie app",{"slug":290,"title":291},"tradus","Tradus",{"slug":293,"title":294},"trouw","Trouw, Volkskrant en Parool",{"slug":296,"title":297},"abn-amro-lening-kieswijzer","ABN-AMRO lening kieswijzer",{"slug":135,"title":140},{"slug":300,"title":301},"hotel-en-bungalowspecials","Hotel- en BungalowSpecials",{"slug":303,"title":304},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":306,"title":307},"2dehands-be","2dehands.be",{"slug":309,"title":310},"swipe-and-shop","Swipe & Shop",{"slug":312,"title":313},"ziggo-interactieve-televisie","Ziggo Interactieve Televisie",{"slug":315,"title":316},"giftforyou","GiftForYou",{"slug":318,"title":319},"commtrac","Commtrac",{"slug":321,"title":322},"stamp-postnl-design-system","PostNL",{"slug":324,"title":325},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":327,"title":328},"privacy-by-design-in-je-bol","In je bol",1776256175034]