HomeCases
De Nederlandse Financiële Tijden

Het toepassen van Design Thinking op de Dutch Financial Times om de OKR's te bereiken zoals gedefinieerd door het management

Inleiding

Het toepassen van Design Thinking op de Dutch Financial Times om de OKR's te bereiken zoals gedefinieerd door het management

In mei 2018 behaalde het Financieele Dagblad een historische prestatie met 85.000 abonnementen. De afgelopen jaren is de krant stabiel gebleven tussen de 45.000-46.000 abonnementen. De online abonnementen van de krant zijn gegroeid met 41.000 lezers.

Klant

FDMG / Het Financieele Dagblad

Expertises

DE UITDAGING

Het toepassen van Design Thinking op de Dutch Financial Times om de OKR's te bereiken zoals gedefinieerd door het management

In mei 2018 behaalde het Financieele Dagblad een historische prestatie met 85.000 abonnementen. In de afgelopen jaren is de krant stabiel gebleven tussen de 45.000-46.000 abonnementen. De online abonnementen van de krant groeiden met 41.000 lezers.

Wat zit er in een ontwerpsysteem?

Kleuren zijn nooit een slecht idee. Het documenteren ervan is altijd een eenvoudige manier om ervoor te zorgen dat iedereen op dezelfde pagina staat. FD staat bekend om zijn zalmroze papier dat het gebruikt voor zijn krant. Dit is zo'n essentieel onderdeel van haar identiteit dat het ook een onderdeel is van haar online identiteit. Het was even wennen, maar inmiddels vind ik het geweldig.
FD 1 - Ontwerpsysteem

Wat zit er in een ontwerpsysteem?

Kleuren zijn nooit een slecht idee. Het documenteren ervan is altijd een eenvoudige manier om ervoor te zorgen dat iedereen op dezelfde pagina staat. FD staat bekend om zijn zalmroze papier dat het gebruikt voor zijn krant. Dit is zo'n essentieel onderdeel van haar identiteit dat het ook een onderdeel is van haar online identiteit. Het was even wennen, maar inmiddels vind ik het geweldig.

Wat zit er in een ontwerpsysteem?

Kleuren zijn nooit een slecht idee. Het documenteren ervan is altijd een eenvoudige manier om ervoor te zorgen dat iedereen op dezelfde pagina staat. FD staat bekend om zijn zalmroze papier dat het gebruikt voor zijn krant. Dit is zo'n essentieel onderdeel van haar identiteit dat het ook een onderdeel is van haar online identiteit. Het was even wennen, maar inmiddels vind ik het geweldig.
FD 1 - Ontwerpsysteem

Wat zit er in een ontwerpsysteem?

Kleuren zijn nooit een slecht idee. Het documenteren ervan is altijd een eenvoudige manier om ervoor te zorgen dat iedereen op dezelfde pagina staat. FD staat bekend om zijn zalmroze papier dat het gebruikt voor zijn krant. Dit is zo'n essentieel onderdeel van haar identiteit dat het ook een onderdeel is van haar online identiteit. Het was even wennen, maar inmiddels vind ik het geweldig.
FD 1 - Ontwerpsysteem

Het ontwerpen van een aangepast raster

Na het definiëren van de kleuren, ging ik door naar de volgende uitdaging. Naast de inkomsten uit abonnementen zijn de FD (net als vele anderen) afhankelijk van de inkomsten uit advertorials. Dit wordt gerealiseerd door ook banners te tonen. De website is responsief. Dit betekent dat de layout zich aanpast aan de breedte van het apparaat waarop het wordt gepresenteerd. Banners daarentegen zijn vaste formaten en mogen niet geschaald worden. Daarom hadden we een op maat gemaakt raster nodig dat de afmetingen van de banners begrijpt. De blauwe rechthoeken staan voor de afmetingen van de banners. Een raster bestaat uit 12 kolommen. De zijbalk rechts is soms 1/4 en 1/3e. In ons Custom Grid zijn we in staat om een zo groot mogelijke bannergrootte te gebruiken.
FD 2 - Aangepast rooster

Het ontwerpen van een aangepast raster

Na het definiëren van de kleuren, ging ik door naar de volgende uitdaging. Naast de inkomsten uit abonnementen zijn de FD (net als vele anderen) afhankelijk van de inkomsten uit advertorials. Dit wordt gerealiseerd door ook banners te tonen. De website is responsief. Dit betekent dat de layout zich aanpast aan de breedte van het apparaat waarop het wordt gepresenteerd. Banners daarentegen zijn vaste formaten en mogen niet geschaald worden. Daarom hadden we een op maat gemaakt raster nodig dat de afmetingen van de banners begrijpt. De blauwe rechthoeken staan voor de afmetingen van de banners. Een raster bestaat uit 12 kolommen. De zijbalk rechts is soms 1/4 en 1/3e. In ons Custom Grid zijn we in staat om een zo groot mogelijke bannergrootte te gebruiken.

Het ontwerpen van een aangepast raster

Na het definiëren van de kleuren, ging ik door naar de volgende uitdaging. Naast de inkomsten uit abonnementen zijn de FD (net als vele anderen) afhankelijk van de inkomsten uit advertorials. Dit wordt gerealiseerd door ook banners te tonen. De website is responsief. Dit betekent dat de layout zich aanpast aan de breedte van het apparaat waarop het wordt gepresenteerd. Banners daarentegen zijn vaste formaten en mogen niet geschaald worden. Daarom hadden we een op maat gemaakt raster nodig dat de afmetingen van de banners begrijpt. De blauwe rechthoeken staan voor de afmetingen van de banners. Een raster bestaat uit 12 kolommen. De zijbalk rechts is soms 1/4 en 1/3e. In ons Custom Grid zijn we in staat om een zo groot mogelijke bannergrootte te gebruiken.
FD 2 - Aangepast rooster

Het ontwerpen van een aangepast raster

Na het definiëren van de kleuren, ging ik door naar de volgende uitdaging. Naast de inkomsten uit abonnementen zijn de FD (net als vele anderen) afhankelijk van de inkomsten uit advertorials. Dit wordt gerealiseerd door ook banners te tonen. De website is responsief. Dit betekent dat de layout zich aanpast aan de breedte van het apparaat waarop het wordt gepresenteerd. Banners daarentegen zijn vaste formaten en mogen niet geschaald worden. Daarom hadden we een op maat gemaakt raster nodig dat de afmetingen van de banners begrijpt. De blauwe rechthoeken staan voor de afmetingen van de banners. Een raster bestaat uit 12 kolommen. De zijbalk rechts is soms 1/4 en 1/3e. In ons Custom Grid zijn we in staat om een zo groot mogelijke bannergrootte te gebruiken.
FD 2 - Aangepast rooster

Ga in de groef, met verticaal ritme

De leesbaarheid is voor elke website of applicatie van groot belang. Maar presenteert u ook uitgebreide artikelen? Dan wordt het alleen maar belangrijker! Zeker wanneer u uw informatie als betrouwbaar en professioneel wilt presenteren. Niet alleen het lettertype dat u gebruikt heeft invloed op de leesbaarheid. Lijnhoogte, letterafstand, contrast en witruimte zijn net zo belangrijk. Door het gebruik van een 8pt-raster zorgt u voor een evenwichtig verticaal ritme. Een 8pt raster is niet alleen voor afstanden rond elementen. Door het bijvoorbeeld te implementeren in lijnhoogte, afstanden binnen elementen zoals knoppen, wordt het eenvoudig om teksten uit te lijnen. Zoals in het voorbeeld hieronder.
FD 3 - Verticaal ritme

Ga in de groef, met verticaal ritme

De leesbaarheid is voor elke website of applicatie van groot belang. Maar presenteert u ook uitgebreide artikelen? Dan wordt het alleen maar belangrijker! Zeker wanneer u uw informatie als betrouwbaar en professioneel wilt presenteren. Niet alleen het lettertype dat u gebruikt heeft invloed op de leesbaarheid. Lijnhoogte, letterafstand, contrast en witruimte zijn net zo belangrijk. Door het gebruik van een 8pt-raster zorgt u voor een evenwichtig verticaal ritme. Een 8pt raster is niet alleen voor afstanden rond elementen. Door het bijvoorbeeld te implementeren in lijnhoogte, afstanden binnen elementen zoals knoppen, wordt het eenvoudig om teksten uit te lijnen. Zoals in het voorbeeld hieronder.

Ga in de groef, met verticaal ritme

De leesbaarheid is voor elke website of applicatie van groot belang. Maar presenteert u ook uitgebreide artikelen? Dan wordt het alleen maar belangrijker! Zeker wanneer u uw informatie als betrouwbaar en professioneel wilt presenteren. Niet alleen het lettertype dat u gebruikt heeft invloed op de leesbaarheid. Lijnhoogte, letterafstand, contrast en witruimte zijn net zo belangrijk. Door het gebruik van een 8pt-raster zorgt u voor een evenwichtig verticaal ritme. Een 8pt raster is niet alleen voor afstanden rond elementen. Door het bijvoorbeeld te implementeren in lijnhoogte, afstanden binnen elementen zoals knoppen, wordt het eenvoudig om teksten uit te lijnen. Zoals in het voorbeeld hieronder.
FD 3 - Verticaal ritme

Ga in de groef, met verticaal ritme

De leesbaarheid is voor elke website of applicatie van groot belang. Maar presenteert u ook uitgebreide artikelen? Dan wordt het alleen maar belangrijker! Zeker wanneer u uw informatie als betrouwbaar en professioneel wilt presenteren. Niet alleen het lettertype dat u gebruikt heeft invloed op de leesbaarheid. Lijnhoogte, letterafstand, contrast en witruimte zijn net zo belangrijk. Door het gebruik van een 8pt-raster zorgt u voor een evenwichtig verticaal ritme. Een 8pt raster is niet alleen voor afstanden rond elementen. Door het bijvoorbeeld te implementeren in lijnhoogte, afstanden binnen elementen zoals knoppen, wordt het eenvoudig om teksten uit te lijnen. Zoals in het voorbeeld hieronder.
FD 3 - Verticaal ritme

Structuur aanbrengen in de typografie

Het "Financieele Dagblad" gebruikt zowel de lettertypen Serif als Sans Serif. In ons Ontwerpsysteem heb ik hiërarchie en standaardisatie toegevoegd binnen ons lettertypegebruik. Dat betekent dat je in Sketch slechts een bepaalde hoeveelheid keuzes hebt die de consistentie en het geluk van de ontwikkelaar verhogen.
FD 4 - Typografie

Structuur aanbrengen in de typografie

Het "Financieele Dagblad" gebruikt zowel de lettertypen Serif als Sans Serif. In ons Ontwerpsysteem heb ik hiërarchie en standaardisatie toegevoegd binnen ons lettertypegebruik. Dat betekent dat je in Sketch slechts een bepaalde hoeveelheid keuzes hebt die de consistentie en het geluk van de ontwikkelaar verhogen.

Structuur aanbrengen in de typografie

Het "Financieele Dagblad" gebruikt zowel de lettertypen Serif als Sans Serif. In ons Ontwerpsysteem heb ik hiërarchie en standaardisatie toegevoegd binnen ons lettertypegebruik. Dat betekent dat je in Sketch slechts een bepaalde hoeveelheid keuzes hebt die de consistentie en het geluk van de ontwikkelaar verhogen.
FD 4 - Typografie

Structuur aanbrengen in de typografie

Het "Financieele Dagblad" gebruikt zowel de lettertypen Serif als Sans Serif. In ons Ontwerpsysteem heb ik hiërarchie en standaardisatie toegevoegd binnen ons lettertypegebruik. Dat betekent dat je in Sketch slechts een bepaalde hoeveelheid keuzes hebt die de consistentie en het geluk van de ontwikkelaar verhogen.
FD 4 - Typografie

Het herontwerpen van Widgets

Het is geweldig als je de regels hebt ingesteld om het speelveld gelijk te trekken. Maar dan ontdek je dat je meer werk voor de boeg hebt. Als je de regels maakt, moet je het goede voorbeeld geven. Zo heb ik de sidebar widgets opnieuw ontworpen. Nieuwe typografie, met inachtneming van de regels van een 8pt raster en geschikt voor gebruik in onze nieuwe aangepaste 12-koloms raster. Er waren er meer. Zoveel meer!
FD 5 - Herontwerp van de Widgets

Het herontwerpen van Widgets

Het is geweldig als je de regels hebt ingesteld om het speelveld gelijk te trekken. Maar dan ontdek je dat je meer werk voor de boeg hebt. Als je de regels maakt, moet je het goede voorbeeld geven. Zo heb ik de sidebar widgets opnieuw ontworpen. Nieuwe typografie, met inachtneming van de regels van een 8pt raster en geschikt voor gebruik in onze nieuwe aangepaste 12-koloms raster. Er waren er meer. Zoveel meer!

Het herontwerpen van Widgets

Het is geweldig als je de regels hebt ingesteld om het speelveld gelijk te trekken. Maar dan ontdek je dat je meer werk voor de boeg hebt. Als je de regels maakt, moet je het goede voorbeeld geven. Zo heb ik de sidebar widgets opnieuw ontworpen. Nieuwe typografie, met inachtneming van de regels van een 8pt raster en geschikt voor gebruik in onze nieuwe aangepaste 12-koloms raster. Er waren er meer. Zoveel meer!
FD 5 - Herontwerp van de Widgets

Het herontwerpen van Widgets

Het is geweldig als je de regels hebt ingesteld om het speelveld gelijk te trekken. Maar dan ontdek je dat je meer werk voor de boeg hebt. Als je de regels maakt, moet je het goede voorbeeld geven. Zo heb ik de sidebar widgets opnieuw ontworpen. Nieuwe typografie, met inachtneming van de regels van een 8pt raster en geschikt voor gebruik in onze nieuwe aangepaste 12-koloms raster. Er waren er meer. Zoveel meer!
FD 5 - Herontwerp van de Widgets

EFFECT

Consistente inspanning + tijd = resultaten

Dat de gedrukte media een moeilijke tijd hadden, is geen nieuws. Daarom was het extra spannend om de paywall te verhogen. De vraag was of we hierdoor lezers zouden verliezen. Wat niet het geval was. Sinds 2012 zijn de digitale lidmaatschappen met 60% gegroeid. In 2020 werd de OKR van groei naar +100.000 betaalde abonnees met succes bereikt.

Een woordje van onze klant

"Ik had de kans om binnenkort samen te werken met Phillip bij FD Media en het was een genoegen. Hij is een ervaren en professionele UX-ontwerper, en tegelijkertijd een enthousiaste, geestige teamspeler dus een leuk persoon om mee te werken. We hadden nogal wat ontwerpuitdagingen op ons bordje. Philip had geweldige ideeën over hoe we bepaalde gebieden konden verbeteren waar we nog niet eens aan gedacht hadden. Hij nam de controle over het ontwerpproces om een meer gestructureerde aanpak te introduceren en begeleidde ons in onze eerste stappen voor Design Sprints. Dus als je een UX-ontwerper nodig hebt voor je team, dan is Phillip iemand die ik aanbeveel."
Willem-Jan van den Bichelaer
Willem-Jan van den Bichelaer
Product Eigenaar FD digitaal (o.a.)