How we designed the iTunes of journalism
Making people pay for journalism by licensing over 200 fonts.
Six months ago we launched Blendle, the iTunes of journalism, in the Netherlands. Using our service, over 140,000 users (that’s almost everyone in our country ;)) can read the best articles of every newspaper and magazine, paying only for the articles they like.
Last week we announced that The New York Times Company and European publishing powerhouse Axel Springer are investing 3 million euro to help us launch Blendle in other countries.
We believe that a big part of our success so far comes from our design: we think the layout of an article is as important as the article itself, and that’s why we invested a lot of time and money creating a premium reading experience.
Over the last 1,5 years we’ve made hundreds of sketches to figure out what paid journalism should look like online. The hardest part of it was that we had to come up with something that would feel more valuable than any other website. Because, why should you pay for an article that looks worse than an article that you can read for free?
We tried lots of different things, but every time we ended up with Flipboardish designs: beautiful, but without the soul of the original newspaper or magazine. A tabloid article should look a bit trashy, an article from a stylish magazine should look, well, stylish, and an article from The New York Times should feel like it’s an article from The New York Times.
So we decided to try something else. What if the reading experience of articles in Blendle would be as close as possible to the original experience of the articles? The results were stunning: by using different fonts, colors and layouts for every single newspaper and magazine, the articles suddenly felt more valuable. And by emphasizing the original publication our users get a better idea of what kind of article they’re about to read (whether it will be a gossip magazine or an analysis on the expansion of the European Union, for example).
Templates
From that moment on, we decided to create a new template for every newspaper or magazine that joins Blendle. Every time we design a template that represents the identity of the newspaper best. That template includes font families, sizes, weights and colors. My colleague Laurens translates these values into different CSS-templates: a version for the timeline, for the desktop reader and another one for the mobile reader.
The reader
We used the same strategy for our article reader. We made the bold decision that desktop and iPad users should scroll horizontally through our web app – yep. We did that to create an online reading experience that’s closer to print, that uses columns, contains no ads, that doesn’t feel like any other blog or website. Although we’ve got a vertical reader for mobile, we expected quite some negative feedback in the beginning — especially since everyone is used to scrolling vertically on the web. But instead, people just loved it.
The cover image of an article is shown full screen on the left side of the article. The article reader opens with the first 300 px of the image visible, to make sure you can start reading immediately. If you swipe to the left, Blendle shows the rest of the image. If you swipe to the right, Blendle shows more text.
All content is placed on a baseline-grid with a line-height of 30 px to make sure the content is aligned perfectly at any resolution. That’s pretty cool, however also limits us to change the line-height of for example the H1 title. The line-height is locked to 30px, so increasing the font size of the H1 means a relatively smaller line-height.
The consequences
The consequence of creating a new CSS template for our current 75+ newspapers and magazines is a huge font-set of 200+ web-fonts. To make sure we load as fast as we can while delivering a perfect reading experience, our developers built a system that examines the content and decide which fonts are necessary and should be loaded before rendering the columns. This way, only visible fonts are loaded. Font-sets are stripped of unused foreign characters that won’t be used.
But more importantly, publishers and users love it. We even got some publishers saying we managed to translate the identities of their newspapers or magazines to the web better than they have done at their own websites. And users, well, they’re just buying a lot of articles.
The next steps
Launching Blendle was one big adventure, but this is only the start. Since we launched over 140,000 users registered and 20% converts to paying users – a huge conversion rate. Over the last few months we’ve continued to add more and more features, most of them based on our assumptions. Sometimes our assumptions were wrong, sometimes they were right. Now, it’s time to analyze that data that we’ve gathered, and start optimizing. We’re making Blendle smarter. Faster. Smoother. Sexier. We’re improving discoverability. Readability. We’re adding more animations. We’re going to launch an iOS app, and are working hard to launch in new countries. So much to do, so much fun!
Of course Blendle isn’t perfect yet and we’re working hard to improve it, step by step. Feel free to send me any suggestions or thoughts at jort@blendle.nl or at Twitter: @jortdevries.
Jort de Vries
Lead designer of Blendle
P.S. We’re looking for a senior UX designer to help us improve Blendle!
