While we were doing research about content discovery widgets and pushed one of our own out into the world, we were shocked at how much attention the “Related Post” widget really gets. The natural process was to try and abstract what these links are in their essence, the answer came to us quite simple and obvious: Navigation.
So we started imagining how we’d optimize this product for mobile devices and came to the idea of Streams. It almost seems like the timing was perfect. Zemanta Streams are today a small piece of code that change your site into a stream of atomized content optimized for mobile devices. The product live on a couple of sites, gathering data as we learn about its usage. However, as we were implementing it on new sites we noticed that the initial design was very limiting. So we went to work.
To set some context, there are a few assumptions we are testing out with this product:
Content can be navigation
The idea of streams came from the work we did with related content and the widgets we were already making for publishers. The conclusion was that these simple widgets were in essence the most used parts of sites on thousands of different publishers. They had the biggest CTR out of any other element. These widgets are scattered all over the web and yet quite unified in their form. A lot of companies are actually making a lot of money with these things. No surprise there with the slow death of search and the rise of social and “content discovery widgets” like our own.
Atomization of content
Every walled garden platform is already atomizing it’s content. Take a look around, there are streams everywhere, they’re somehow just not present on the “open” web yet. Atomization reduces information overload, makes navigation friendlier and is easier to contextualize. Finally some kind of standard when it comes to content presentation. Streams also create a stickiness with some simple psychological work I wrote about already.
Making it bleed through
We agreed we need a minimal design framework that would allow just enough customization so the branding bleeds through with the content staying intact. We have a number of assets that we get from our clients available to play around with:
- Base branding colors and typefaces
- Title of article
- Body text
- Excerpt (we make it on our own)
- Image (not always)
- Video (rarely)
With those in mind, I turned to what their desktop sites look like and tried to abstract the information architecture that gave me a clearer overview of what I was dealing with. We prioritized it and started iterating.
We decided we needed three things: color, typefaces and the logo. These should differentiate one stream from another enough to convey branding.
States, affordances & interaction
We embraced the idea of cards early on. Pieces of content would be neatly tucked in a card that would expand upon engagement. Each card comes with a title, cover image, excerpt and metadata. Each card also comes with a customizable border on top or bottom of the image which brings out the branding. The background of the card can be the secondary color or just a tint of grey to distinguish it from the background.
The data and user interviews show it works well enough even when its implementation is wonky. So there’s a lot of space for improvement.
Variety & perception
After working with publishers and their data we know that it can be seriously messy. Some posts have images. Some don’t even have any text, just a video. Some are just images.
So if you imagine a stream of closed cards that don’t have images, things can get boring. So we decided to make a few iterations of each kind of card by either removing/adding images and excerpts.
One of the best features of Streams is that it solves mobile monetization for Publishers with content ads. We built the very thing with monetization in mind.
In streams, ads can be either promoted content or typical display ads. Promoted content can look and be of great quality. Sadly, the world rather clicks on the worst bullshit available. We try to ensure that the content is top notch, because that’s what what the company stands behind. There’s that great Guy Debord quote that can be so disgustingly misused in this context. In one of his movies he narrates: “Spectators do not find what they desire, they desire what they find.” And this is quite at the base of everything when you want to abstract what Zemanta does these days. Readers don’t find content they want, they want the content they find.
Nooks and crannies
I took 10 of our clients that could possibly install Streams on their sites and tried to use their content and branding to mock up what it would look like. There was enough to play around with (borders, colors) that I could make one Stream different from another. A rare feeling of elation washed over me. I rarely feel good about anything but for some reason I felt okay about this.
This was one of the best design exercises I’ve had while working at Zemanta. We had a clear goal from beginning to end and for once we get to play with the whole property of the site. Now it's time for iteration, learning and more iteration.
Feeling good about work wouldn't be possible without Tomaž, Boštjan and Florjan being such collaborative people. If you own a site with a lot of traffic and you're losing money on mobile, Streams might just work for you.