Daarin vind je onthullende verhalen over Nederland en de buurt waarin je woont met als extraatje: aantrekkelijke datavisualisaties die je kunt personaliseren.

Verhalen vertellen

Met een twintig-tal nieuwswaardige verhalen zijn we aan de tekentafel gaan zitten. Daar starten wij het liefste mee. Tijdens het schetsen ben je niet alleen de informatie aan het analyseren, maar er ontstaat ook al snel een beeld wat het concept concreet maakt.

Herbruikbaar en eenvoudig op te maken

Om RTL niet totaal afhankelijk te maken van alle partijen die komen kijken tijdens het ontwerpproces, ontworpen wij herbruikbare templates voor alle facts. Voor zowel de overzichtspagina van de facts als voor een detailpagina van een fact.

Zo bestaat een fact onder andere altijd uit een conclusie graphic, een beknopt verhaal en een interactieve datavisualisatie.

Ook voor de interactieve datavisualisatie bedachten we templates. Deze is opgebouwd uit eenvoudige bouwblokken bestaande uit een invoer en een resultaat, die op hun beurt ook uit een vast stramien en keuzes bestaan. De datavisualisatie bevat onderin tevens altijd een variabel, deelbaar resultaat. Een feitje die jij als onderzoeker uit de visualisatie hebt opgegraven. In tekst blijft het idee allemaal een beetje cryptisch. We tonen het liever:

Een eigen smoel

Niet alleen keken wij naar het interactie ontwerp, wij zijn al vroeg in het proces gestart met de visuele stijl. Dat begon allemaal met stijlschetsen en een muur aan inspiratie.

De visuele stijl die we, samen met de RTL Graphics studio, voor RTL Facts hebben neer gezet is er een die zich duidelijk onderscheid van RTL Nieuws. RTL Facts is dan ook geen ‘snel’ nieuws, maar research journalistiek. Dit wilde we dan ook visueel duidelijk af laten wijken van de manier waarop RTL Nieuws het nieuws presenteert. Een foto vertelt al een heel verhaal in zichzelf, en dat levert bij ieder onderzoek dan ook weer problemen op. Een illustratiestijl, welke geinspireerd is vanuit de trend in infographics, was dan ook al snel de oplossing.

Duidelijk anders dan het nieuws, visueel herkenbaar en makkelijk reproduceerbaar. Met als bijkomend voordeel dat een verhaal samengesteld kan worden in de illustratie. Een die bij het delen geen extra uitleg nodig heeft, en dus ook makkelijker deelbaar is. Samen met de ruime opzet van de verhalen en de homepage van het Facts portaal geeft dit een frisse, heldere en eigen identiteit aan RTL Facts.

Persoonlijk relevant

Deze verhalen en interactieve datavisualisaties zijn natuurlijk allemaal mooi en aardig, maar het wordt nog veel interessanter wanneer je dit kunt betrekken op je eigen situatie. Je kunt daarom alle verhalen met één druk op de knop personaliseren op basis van je postcode. Op je beeldscherm wordt direct een samenvatting van alle verhalen met resultaat getoond.

Benieuwd naar hoeveel wapenvergunningen er in jouw gemeente zijn? Op de postcode van ons kantoor in Amsterdam Zuid valt het met 4 per 1000 inwoners nog reuze mee. Bekijk wat facts voor jouw gemeente betekent op RTL nieuws facts.

Development werd gedaan door Aubergine IT, waarmee we eerder mee samenwerkten aan het Buurthuis van de Toekomst voor de gemeente Den Haag. De illustraties maakten we samen met de afdeling Graphics van RTL Nieuws.

Ontwerpproces

Moooi had al goed nagedacht over de functionaliteiten die ze in de nieuwe website wilden hebben. Een uitgebreide lijst, maar vanuit onze ervaring wisten we dat dit niet allemaal binnen de eerste release van de website zou lukken. We zijn daarom begonnen met een scope sessie. Een scope sessie helpt bij het ordenen van alle functionaliteiten die je voor de website kunt bedenken. Je rangschikt de functionaliteiten bij zo’n sessie tot je een set overhoudt van de functionaliteiten die het meest belangrijk zijn; de scope. Vaak kun je deze scope direct onderverdelen in clusters. En voila, er ontstaat een eerste vorm van een sitemap. Gedurende het project kun je altijd op de scope terugvallen. Het biedt een goede houvast voor het hele ontwerpproces.

We houden ervan om zoveel mogelijk samen met de klant rond de tafel te zitten en ideeën te creëeren. Kort na de scope sessie organiseerden we daarom een sketchboard sessie. Nu de sitemap was gevormd, konden we schetsen gaan maken voor de belangrijkste pagina’s binnen de website. Ook de klant schetst mee, het liefste met personen met zo divers mogelijke functies. Iemand van marketing, iemand van de grafische vormgeving etc. Zo kom je tot interessante invalshoeken en kun je de belangen van iedere individu afwegen.

Omdat één van de requirements een responsive website betrof, hebben we direct voor mobiel, tablet en browser schetsen gemaakt. Met een stopwatch, koekjes, persona’s, sharpies, en ‘responsive’ schetspapier ontwikkelden we voor de vier belangrijkste pagina’s van de website super snel goede ideeën. We plakten alle ideeën en schetsen van iedereen aan de muur en selecteerden hieruit de beste elementen.

Met die belangrijkste elementen in ons achterhoofd ontwierpen wij het uiteindelijke concept. Daarna ontwikkelden we met Fireworks en TAP vliegensvlug een prototype. Omdat de website responsive moest worden, maakten we drie verschillende prototypes, voor mobiel, tablet en web, om de experience van het gehele plaatje te kunnen beleven. Met een uitgebreide en complete documentatie zat ons interactie ontwerp werk er grotendeels op. Het geheel werd overgedragen aan Synetic, die de development onder handen heeft genomen. Daar waar nodig stonden wij natuurlijk klaar voor ondersteuning.
Gezien hun eigen ervaring met design en offline vormgeving wilde Moooi voor de online vormgeving zelf de touwtjes in handen hebben. Daarom heeft UNITiD bij dit project alleen voor de ondersteuning van de vormgeving gezorgd en geholpen bij de overdracht hiervan aan de developers.

Resultaat

Het ontwerp heeft geresulteerd in een functioneel en technisch vernuftige website, waarbij termen als responsive, parallax, native gestures en fixed menu’s niet ongemoeid blijven. Met de kritische en eigenwijze blik van Moooi kunnen we stellen dat die blown way experience volgens ons goed tot zijn recht komt. Zullen we ‘m er tot slot dan toch maar een keer ingooien? We vinden het resultaat erg moooi.

De gemeente Den Haag wil de accommodatiebeheerders en organisatoren van activiteiten bij elkaar brengen. Zo is het idee van het Buurthuis van de Toekomst ontstaan. Het is de bedoeling dat accommodaties ook voor andere doeleinden kunnen worden ingezet, zoals voor een workshop cupcakes maken, een bridge avond of een bar mitswa bijvoorbeeld. Je kunt het zo gek niet bedenken. Aan UNITiD is gevraagd om op basis van een aangeleverde briefing en Functioneel Ontwerp het Interactie Ontwerp en het Visueel Ontwerp te realiseren. De technische realisatie werd uitbesteed aan Aubergine IT.

Wat? Twee weken?

De grote uitdaging van het project was de oplevering; binnen twee weken moest de website werkend worden opgeleverd binnen de bestaande huisstijl van gemeente Den Haag. Gezien deze snel naderende deadline hebben wij parallel gewerkt met Aubergine IT aan de ontwikkeling van het platform. Zo zijn de schetsen direct uitgewerkt tot visueel ontwerp en daar waar nodig de wireframes digitaal uitgewerkt. Al kort na de eerste uitgewerkte pagina’s kon de developer starten. Dagelijkse bijeenkomsten met gemeente Den Haag hielpen ons om snel beslissingen te maken. Kort en bondig, er was geen tijd voor lange discussies.

Het concept

In de beginfase is het belangrijk dat de website gevuld wordt met accommodaties. Content is king. Het platform is daarom ingericht op beheerders van accommodaties; zij kunnen op een laagdrempelige manier accommodaties aanmaken. Organisatoren of geïnteresseerden kunnen aan de hand van filters snel bij deze accommodatie komen. Middels slim gebruik van tegels, iconen en opmaak van de pagina’s kan de accommodatie snel gescand worden op geschiktheid. Is er een accommodatie gevonden die voldoet aan de eisen dan kan de organisator van activiteiten contact opnemen met de beheerder. En voila—de eerste stap is gezet.

Don’t overthink it

De korte planning dwingt je tot keuzes te maken. Maar zijn dit wel de beste keuzes? Zouden we andere keuzes hebben gemaakt als we er langer over na hadden gedacht? Vaak zijn die eerste inzichten de beste dus is een korte deadline zinvol. Uiteraard ligt dit ook aan de website die je ontwerpt. In dit geval leende zo’n korte planning zich er goed voor. We kijken hoe dan ook terug naar een uitdagend project met een mooi eindresultaat en met meer werk in het verschiet. Er wordt namelijk al nagedacht over een volgende release met meer functionaliteiten die de website zullen verbeteren. Ook dan hopen we een steentje bij te kunnen dragen!

De belangrijkste functionaliteit die een metamorfose moest krijgen binnen de app was het vinden van producten. Het scannen van de barcode, om bijvoorbeeld snel reviews en prijzen van het product te checken, werkt vooralsnog prima. Het vinden van producten via het zoekveld is in de oude versie echter een stuk lastiger. Gebruikers hadden daarnaast een grote behoefte om producten met elkaar te kunnen vergelijken. Iets wat op de website vaak wordt gebruikt, en dus ook voor mobiel beschikbaar zou moeten zijn.

Ontwerpproces

We zijn direct aan de slag gegaan met het schetsen van de verschillende schermen voor, ten eerste, de iPhone applicatie. Een juiste vertaling naar Android volgde later. Deze schermen zijn vertaald naar digitale wireframes en met TAP razendsnel in een clickable prototype verwerkt. Met nog wat wijzigingen hier en daar werd het tijd voor een vertaling naar Android. Android gebruikers zijn een andere interface, een andere vormgeving en een andere flow gewend. De ontworpen iPhone app kon dus niet zomaar klakkeloos worden overgenomen in een Android app. Met hulp van onze Android kenners zijn we elk scherm van het her-ontwerp voor de iPhone app langsgelopen en hebben we gekeken hoe we dit het meest gebruiksvriendelijk konden weergeven.

Schetsen werden weer digitaal gemaakt, wireframes weer tot een clickable prototype gebouwd. Ook de vormgeving voor Android kreeg speciale aandacht. Uiteindelijk werd er een apart Interaction Design geschreven voor de iPhone applicatie en voor de Android applicatie.

Eerste recensies

So what’s next? Een op maat gemaakte tablet versie wellicht?