FDMG / Het Financieele Dagblad

Achieve OKR's at the Dutch Financial Times by applying Design Thinking

In May 2018 the Dutch Financial Newspaper “Het Financieele Dagblad” achieved an historic achievement when the membership passed 85.000 subscriptions. The Online Subscriptions of the grew with 41.000 readers.

Expertises

Client

FDMG / Het Financieele Dagblad

The Challenge

Achieve OKR's at the Dutch Financial Times by applying Design Thinking

In 2018 the Dutch Financial Newspaper “Het Financieele Dagblad” achieved a historic achievement when the membership passed 85.000 subscriptions. The Online Subscriptions grew with 41.000 readers.

What's inside a Design System?

Colors are never a bad idea. Documenting them is always a simple way to make sure everyone is on the same page. FD is known for its Salmon Pink paper it uses for its newspaper. This is such an essential part of her identity that it’s also a part of her online identity. It took me a little getting used to but by now, I love it.
FD 1 - Design System

What's inside a Design System?

Colors are never a bad idea. Documenting them is always a simple way to make sure everyone is on the same page. FD is known for its Salmon Pink paper it uses for its newspaper. This is such an essential part of her identity that it’s also a part of her online identity. It took me a little getting used to but by now, I love it.

What's inside a Design System?

Colors are never a bad idea. Documenting them is always a simple way to make sure everyone is on the same page. FD is known for its Salmon Pink paper it uses for its newspaper. This is such an essential part of her identity that it’s also a part of her online identity. It took me a little getting used to but by now, I love it.
FD 1 - Design System

What's inside a Design System?

Colors are never a bad idea. Documenting them is always a simple way to make sure everyone is on the same page. FD is known for its Salmon Pink paper it uses for its newspaper. This is such an essential part of her identity that it’s also a part of her online identity. It took me a little getting used to but by now, I love it.
FD 1 - Design System

Designing a Custom Grid

After defining the colors, I went on to the next challenge. Besides the revenue from subscriptions, the FD (like many others) are dependant on the income of advertorials. This is realized by also displaying banners The website is responsive. Meaning the layout adapts to the width of the device it’s presented on. Banners on the other hand are fixed sizes and are not allowed to scale. That’s why we needed a custom grid which understands the dimensions of banners. The blue rectangles represent banner sizes. A grid exists of 12 columns. The sidebar on the right sometimes is 1/4th and 1/3rd. In our Custom Grid, we’re able to use the largest banner-size possible.
FD 2 - Custom Grid

Designing a Custom Grid

After defining the colors, I went on to the next challenge. Besides the revenue from subscriptions, the FD (like many others) are dependant on the income of advertorials. This is realized by also displaying banners The website is responsive. Meaning the layout adapts to the width of the device it’s presented on. Banners on the other hand are fixed sizes and are not allowed to scale. That’s why we needed a custom grid which understands the dimensions of banners. The blue rectangles represent banner sizes. A grid exists of 12 columns. The sidebar on the right sometimes is 1/4th and 1/3rd. In our Custom Grid, we’re able to use the largest banner-size possible.

Designing a Custom Grid

After defining the colors, I went on to the next challenge. Besides the revenue from subscriptions, the FD (like many others) are dependant on the income of advertorials. This is realized by also displaying banners The website is responsive. Meaning the layout adapts to the width of the device it’s presented on. Banners on the other hand are fixed sizes and are not allowed to scale. That’s why we needed a custom grid which understands the dimensions of banners. The blue rectangles represent banner sizes. A grid exists of 12 columns. The sidebar on the right sometimes is 1/4th and 1/3rd. In our Custom Grid, we’re able to use the largest banner-size possible.
FD 2 - Custom Grid

Designing a Custom Grid

After defining the colors, I went on to the next challenge. Besides the revenue from subscriptions, the FD (like many others) are dependant on the income of advertorials. This is realized by also displaying banners The website is responsive. Meaning the layout adapts to the width of the device it’s presented on. Banners on the other hand are fixed sizes and are not allowed to scale. That’s why we needed a custom grid which understands the dimensions of banners. The blue rectangles represent banner sizes. A grid exists of 12 columns. The sidebar on the right sometimes is 1/4th and 1/3rd. In our Custom Grid, we’re able to use the largest banner-size possible.
FD 2 - Custom Grid

Get in the groove, with vertical rhythm

Readability is extremely important for every website or application. However, do you present extensive articles? Then it only becomes more important! Certainly when you want to present your information as reliable and professional. Not only the font you use has an impact on readability. Line height, letter spacing, contrast, and white space are just as important. By using an 8pt grid, you ensure that a balanced vertical rhythm is created. An 8pt grid is not just for distances around elements. For example, by implementing it in line-height, distances within elements such as buttons, it becomes easy to align texts. As in the example below.
FD 3 - Vertical Rhythm

Get in the groove, with vertical rhythm

Readability is extremely important for every website or application. However, do you present extensive articles? Then it only becomes more important! Certainly when you want to present your information as reliable and professional. Not only the font you use has an impact on readability. Line height, letter spacing, contrast, and white space are just as important. By using an 8pt grid, you ensure that a balanced vertical rhythm is created. An 8pt grid is not just for distances around elements. For example, by implementing it in line-height, distances within elements such as buttons, it becomes easy to align texts. As in the example below.

Get in the groove, with vertical rhythm

Readability is extremely important for every website or application. However, do you present extensive articles? Then it only becomes more important! Certainly when you want to present your information as reliable and professional. Not only the font you use has an impact on readability. Line height, letter spacing, contrast, and white space are just as important. By using an 8pt grid, you ensure that a balanced vertical rhythm is created. An 8pt grid is not just for distances around elements. For example, by implementing it in line-height, distances within elements such as buttons, it becomes easy to align texts. As in the example below.
FD 3 - Vertical Rhythm

Get in the groove, with vertical rhythm

Readability is extremely important for every website or application. However, do you present extensive articles? Then it only becomes more important! Certainly when you want to present your information as reliable and professional. Not only the font you use has an impact on readability. Line height, letter spacing, contrast, and white space are just as important. By using an 8pt grid, you ensure that a balanced vertical rhythm is created. An 8pt grid is not just for distances around elements. For example, by implementing it in line-height, distances within elements such as buttons, it becomes easy to align texts. As in the example below.
FD 3 - Vertical Rhythm

Bringing structure to Typography

The “Financieele Dagblad” uses both Serif and Sans Serif fonts. In our Design System, I added hierarchy and standardization within our font use. Meaning in Sketch, you’ll only have a certain amount of choices with increases consistency and developer happiness.
FD 4 - Typography

Bringing structure to Typography

The “Financieele Dagblad” uses both Serif and Sans Serif fonts. In our Design System, I added hierarchy and standardization within our font use. Meaning in Sketch, you’ll only have a certain amount of choices with increases consistency and developer happiness.

Bringing structure to Typography

The “Financieele Dagblad” uses both Serif and Sans Serif fonts. In our Design System, I added hierarchy and standardization within our font use. Meaning in Sketch, you’ll only have a certain amount of choices with increases consistency and developer happiness.
FD 4 - Typography

Bringing structure to Typography

The “Financieele Dagblad” uses both Serif and Sans Serif fonts. In our Design System, I added hierarchy and standardization within our font use. Meaning in Sketch, you’ll only have a certain amount of choices with increases consistency and developer happiness.
FD 4 - Typography

Redesigning Widgets

It’s great when you’ve set the rules to even the playing field. But that’s when you discover you’ve got more work ahead of you. When you create the rules, you should lead by example. Thus I redesigned the sidebar widgets. New typography, abiding the rules of an 8pt grid and suitable to use in our new custom 12 column grid. There were more. So many more!
FD 5 - Redesigning Widgets

Redesigning Widgets

It’s great when you’ve set the rules to even the playing field. But that’s when you discover you’ve got more work ahead of you. When you create the rules, you should lead by example. Thus I redesigned the sidebar widgets. New typography, abiding the rules of an 8pt grid and suitable to use in our new custom 12 column grid. There were more. So many more!

Redesigning Widgets

It’s great when you’ve set the rules to even the playing field. But that’s when you discover you’ve got more work ahead of you. When you create the rules, you should lead by example. Thus I redesigned the sidebar widgets. New typography, abiding the rules of an 8pt grid and suitable to use in our new custom 12 column grid. There were more. So many more!
FD 5 - Redesigning Widgets

Redesigning Widgets

It’s great when you’ve set the rules to even the playing field. But that’s when you discover you’ve got more work ahead of you. When you create the rules, you should lead by example. Thus I redesigned the sidebar widgets. New typography, abiding the rules of an 8pt grid and suitable to use in our new custom 12 column grid. There were more. So many more!
FD 5 - Redesigning Widgets

Impact

Consistent effort + time = results

That print media had a rough time, is no news. That’s why it was extra exciting to raise the paywall. The question was if we would lose readers because of this. Which it did not. Ever since 2012, digital memberships have grown with 60%. In 2020 the OKR of growing to +100.000 paid subscribers was successfully achieved.

A word from our client

"I had to chance to collaborate shortly with Phillip at FD Media and it was a pleasure. He is an experienced and professional UX designer, and at the same an enthusiastic, witty team player so a nice person to work with. We had quite a lot of design challenges on our plate. Philip had great ideas on how to improve certain areas that we haven’t even thought of. He took control of the design process to introduce a more structured approach and guided us in our first steps for Design Sprints. So if you need a UX designer for your team, Phillip is someone who I recommend."
Willem-Jan van den Bichelaer
Willem-Jan van den Bichelaer
Product Owner FD digital (a.i.)
Back to Cases →

Schedule your free Digital Innovation session today

On your free phone consultation, one of our experts will discuss Strategy, Innovation Goals and explain our methodology.

Schedule now →