[{"data":1,"prerenderedAt":333},["ShallowReactive",2],{"DefaultLayouten":3,"language-cases-slug-npo-dashboard-i18n-slugs":134,"language-cases-slug-en-npo-dashboard":140},{"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},"163140902","Contact",{"__typename":38},"ContactRecord",[40,46,51,56,61],{"id":41,"title":42,"link":43},"163140904","Impact",{"__typename":44,"slug":45},"PageRecord","impact",{"id":47,"title":48,"link":49},"163140905","Services",{"__typename":50},"ServiceOverviewRecord",{"id":52,"title":53,"link":54},"163140906","Cases",{"__typename":55},"CaseOverviewRecord",{"id":57,"title":58,"link":59},"163140908","About us",{"__typename":44,"slug":60},"about-us",{"id":62,"title":63,"link":64},"d6WdFJq2SOuc3dWtpibbXQ","Work at",{"__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},"144185264",{"__typename":44,"slug":45},{"id":72,"title":48,"link":73},"144185265",{"__typename":50},{"id":75,"title":53,"link":76},"144185266",{"__typename":55},{"id":78,"title":79,"link":80},"144185267","Blog",{"__typename":81},"BlogPostOverviewRecord",{"id":83,"title":58,"link":84},"144185268",{"__typename":44,"slug":60},{"id":86,"title":36,"link":87},"144185269",{"__typename":38},{"id":89,"title":90,"link":91},"144185270","FAQ",{"__typename":44,"slug":92},"faq","Creative Commons licence and disclaimer","CC BY 4.0","https:\u002F\u002Fcreativecommons.org\u002Flicenses\u002Fby\u002F4.0\u002F","De Voorhoede privacy statement (pdf)","Privacy statement","https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1763455455-vh-isms-006-privacy-statement-de-voorhoede-en.pdf",[100,112,123],{"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","B Corp logo",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":119},"c5mCXRTiSraRIB25fw1p7Q",{"url":115,"alt":116,"width":117,"height":118},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1687353461-dda-boxlogo-black.png","Dutch Digital Agencies logo",627,480,{"__typename":108,"id":120,"title":121,"url":122},"P6Jh7B0cTv2cKyNEeKVWVQ","Dutch Digital Agencies","https:\u002F\u002Fdutchdigitalagencies.com\u002Fleden\u002Fde-voorhoede\u002F",{"id":124,"image":125,"link":129},"MT5SCyNxSTSr_v5eeATMZw",{"url":126,"alt":127,"width":128,"height":128},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1775730283-dnv.png","DNV logo",518,{"id":130,"title":131,"link":132},"BRtNB5HnT5i-7HkA8IYzBw","DIV",{"__typename":44,"slug":133},"impact\u002Fdigitale-producten-privacy-by-design",[135,138],{"locale":136,"value":137},"en","npo-dashboard",{"locale":139,"value":137},"nl",{"page":141,"cases":253},{"title":142,"slug":137,"i18nSlugs":143,"social":146,"heroIllustration":150,"caseTeaser":154,"content":157,"metaData":212,"quote":161,"author":161,"pivots":229},"NPO Dashboard",[144,145],{"locale":136,"value":137},{"locale":139,"value":137},{"title":147,"description":148,"image":149},"NPO Dashboard | De Voorhoede","A big data dashboard for the editorial staffs of NPO and NOS, developed with Agile Kanban methods",null,{"url":151,"alt":142,"width":152,"height":153},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1622105810-npo-dashboard-case-preview.png",665,470,{"title":155,"image":156},"Clear-cut insights in realtime visitor statistics",{"url":151,"alt":142,"width":152,"height":153},[158,163,167,176,179,183,192,196,200,204,209],{"__typename":159,"id":160,"title":161,"body":162},"TextSectionRecord","432320","","\u003Cp>Within the Dutch Public Broadcasting (NPO) a project was started in 2015 to develop a number of pilots based on ‘big data’. One of those pilots was the development of a dashboard for editorial staff to get \u003Cstrong>direct insight into visitor\u002Fviewer statistics and trends\u003C\u002Fstrong> \u003Ca href=\"http:\u002F\u002Fcleverlions.com\u002F\" target=\"_blank\" rel=\"noopener\">CleverLions\u003C\u002Fa>, the contractor of this project, asked us to build this configurable dashboard.\u003C\u002Fp>",{"__typename":159,"id":164,"title":165,"body":166},"432321","The challenge: build a prototype based on complex data","\u003Cp>The NPO is a complex media organisation. Not just television programmes are produced here, it’s also the home of the NOS news station and hosts numerous message boards that draw large visitor numbers. Each of their editorial staffs uses distinct software. Sometimes featuring a modern API, sometimes none at all. \u003Cstrong>Getting access to its data is a big challenge\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>NPO wants to provide all staff with a dashboard that displays similar information (visitor numbers, social network shares, trending posts, et cetera) we need an API that normalises all variations. Text called \u003Ccode>header\u003C\u002Fcode>in one instance and \u003Ccode>caption\u003C\u002Fcode> in the other will be named \u003Ccode>title\u003C\u002Fcode> in our API. More importantly, all this data needs to be as \u003Cem>realtime\u003C\u002Fem> as possible. Only when a trend develops literally before their eyes, the editorial staff can intervene or engage on time.\u003C\u002Fp>",{"__typename":168,"id":169,"image":170,"caption":172,"captionPosition":175},"ImageRecord","176458613",{"url":171,"alt":172,"width":173,"height":174},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539867055-npo-topspin-graph.jpg","This graph shows the daily progress of visitor numbers. The orange line is the actual number, the black line represents an estimation and the grey area is the estimation’s bandwidth.",1024,420,"right",{"__typename":159,"id":177,"title":161,"body":178},"432325","\u003Cp>To give insight into this data, we need a \u003Cstrong>balance between scanability and the amount of information present\u003C\u002Fstrong> on the dashboard at once. To achieve this, we used recognisable iconography, photos, diagrams and pie charts.\u003C\u002Fp>\n\u003Cp>Finally, this was all about building a prototype: we aimed to learn about the NPO’s data flow and be able to work out ideas quickly.\u003C\u002Fp>\n\u003Cp>Together with \u003Ca href=\"https:\u002F\u002Fwww.godatadriven.com\u002F\" target=\"_blank\" rel=\"noopener\">GoDataDriven\u003C\u002Fa>’s big data experts and \u003Ca href=\"https:\u002F\u002Fhike.one\u002F\" target=\"_blank\" rel=\"noopener\">Hike One\u003C\u002Fa>’s designers we took off.\u003C\u002Fp>",{"__typename":159,"id":180,"title":181,"body":182},"432326","The solution: work iteratively and demand driven","\u003Cp>An important part of the dashboard is that it would become \u003Cem>actionable\u003C\u002Fem> for editorial staffs. On the other hand we had a heap of data begging us to experiment with it. By continuously asking questions, do a lot of demos and write flexible code we kept our focus.\u003C\u002Fp>",{"__typename":168,"id":184,"image":185,"caption":190,"captionPosition":191},"176458614",{"url":186,"alt":187,"width":188,"height":189},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539866786-npo-topspin-scrum.jpg","Agile Kanban board with post-it",1440,812,"In this project, we followed the Agile Kanban work method","left",{"__typename":159,"id":193,"title":194,"body":195},"432330","API built to fit the front-end","\u003Cp>The largest challenges were mainly in the back-end: getting data accessible, normalisation, analytics and building an API for the front-end. What that API should be is probably best dictated by what is displayed on the dashboard. Because data access was a complex issue, we decided to be very selective. We had many discussions with back-end developers about what information should be available in which format. Besides achieving our goal, we made the front-end\u003Cstrong> fast, because the API was perfectly cut to size\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":159,"id":197,"title":198,"body":199},"432331","Microframework for quick iterations","\u003Cp>To be able to develop quickly, it’s a good idea to choose something off the shelf without compromising development velocity. We chose \u003Ca href=\"http:\u002F\u002Friotjs.com\u002F\" target=\"_blank\" rel=\"noopener\">Riot\u003C\u002Fa>: optimised for modular development and very flexible. We made sure every part of a page can update itself with newly available data. Titles, layout and positioning of statistics and lists on the page are configurable. To complete the dashboard, we built a ‘TV mode’ version with large graphics on a dark background, specially suited for large screens in editorial offices.\u003C\u002Fp>\n\u003Cp>With this approach, we were able to quickly \u003Cstrong>experiment with the information displayed\u003C\u002Fstrong>.\u003C\u002Fp>",{"__typename":159,"id":201,"title":202,"body":203},"432332","Visual is better","\u003Cp>People are very visually oriented. To show that one article is doing better than the next, we display them in an ordered list. If Facebook is getting more shares than Twitter, that’s immediately insightful with a pie chart diagram.\u003C\u002Fp>",{"__typename":168,"id":205,"image":206,"caption":208,"captionPosition":175},"176458615",{"url":207,"alt":208,"width":173,"height":174},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1539867216-npo-topspin-dashboard.jpg","To the left the dashboard with visitor numbers and popularity of two ‘top stories’; to the right a detail page with social media stats.",{"__typename":159,"id":210,"title":161,"body":211},"432335","\u003Cp>In an early iteration, we mostly used text and red or green-colored percentages. As the project progressed, we decided to switch to stronger visualisation. With D3.js we were able to \u003Cstrong>quickly show charts, diagrams and ‘sparklines’\u003C\u002Fstrong>. This made things a lot more clear.\u003C\u002Fp>\n\u003Cp>In July 2016 the TopSpin project came to its conclusion with a large presentation, and the birth of a new department. This department is responsible for big data and \u003Ca href=\"https:\u002F\u002Fwww.voorhoede.nl\u002Fen\u002Fservices\u002Fdata-visualisation\u002F\">data visualisation\u003C\u002Fa> solutions within NPO. We are proud to have contributed to this result.\u003C\u002Fp>",{"expertisesTitle":213,"expertises":214,"deliverableTitle":219,"deliverables":220,"technologiesTitle":223,"technologies":224,"interestedTitle":161,"interestedLinkUrl":161,"interestedLinkLabel":161},"Expertises",[215,217],{"title":216},"Development",{"title":218},"Prototyping","Deliverables",[221],{"title":222},"Dashboard","Technologies",[225,227],{"title":226},"RiotJS",{"title":228},"D3.js",[230,242],{"title":231,"body":161,"links":232,"mailchimpValue":161,"mailchimpName":161,"mailchimpId":161,"formType":233,"contactPerson":234},"Let's discuss what we can do",[],"contact",{"name":235,"lastName":236,"jobTitle":237,"image":238},"Nena","de Clercq","Operations Director",{"url":239,"alt":149,"width":240,"height":241},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683535373-nena.jpg",2174,2898,{"title":243,"body":161,"links":244,"mailchimpValue":161,"mailchimpName":161,"mailchimpId":161,"formType":245,"contactPerson":246},"Subscribe to our newsletter",[],"newsletter",{"name":247,"lastName":161,"jobTitle":248,"image":249},"Vera","Marketer",{"url":250,"alt":149,"width":251,"height":252},"https:\u002F\u002Fwww.datocms-assets.com\u002F6524\u002F1683534636-placeholder.jpg",1235,1646,[254,257,260,263,266,269,272,275,278,281,284,287,290,293,296,299,302,303,306,309,312,315,318,321,324,327,330],{"slug":255,"title":256},"quantum-inspire","Quantum Inspire",{"slug":258,"title":259},"life-terra","Life Terra",{"slug":261,"title":262},"geldmaat","Geldmaat",{"slug":264,"title":265},"pathe-thuis","Pathé Thuis",{"slug":267,"title":268},"viriciti","ViriCiti",{"slug":270,"title":271},"drop-and-fly","Drop & Fly",{"slug":273,"title":274},"15-apps-for-water-research-at-deltares","15 Apps for water research at Deltares",{"slug":276,"title":277},"a-brand-new-funda","A brand new Funda",{"slug":279,"title":280},"bouwen-is-macht","Bouwen is Macht",{"slug":282,"title":283},"world-water-atlas","World Water Atlas",{"slug":285,"title":286},"pick-up-10","Pick Up 10",{"slug":288,"title":289},"hike-one","Hike One",{"slug":291,"title":292},"dlr-inspection-app","DLR Inspection app",{"slug":294,"title":295},"tradus","Tradus",{"slug":297,"title":298},"trouw","Trouw, Volkskrant and Parool",{"slug":300,"title":301},"abn-amro-loan-wizard","ABN-AMRO loan wizard",{"slug":137,"title":142},{"slug":304,"title":305},"hotel-and-bungalowspecials","Hotel- and BungalowSpecials",{"slug":307,"title":308},"rtl-weekend-magazine","RTL Weekend Magazine",{"slug":310,"title":311},"2dehands-be","2dehands.be",{"slug":313,"title":314},"swipe-and-shop","Swipe & Shop",{"slug":316,"title":317},"ziggo-interactive-television","Ziggo Interactive Television",{"slug":319,"title":320},"giftforyou","GiftForYou",{"slug":322,"title":323},"commtrac","Commtrac",{"slug":325,"title":326},"stamp-postnl-design-system","PostNL",{"slug":328,"title":329},"tu-delft-spacefinder","TU Delft Spacefinder",{"slug":331,"title":332},"privacy-by-design-in-je-bol","In je bol",1776256171490]