“The who, what and why of UsVsTh3m” – Martin Belam at Hacks/Hackers London

On Tuesday evening I spoke at Hacks/Hackers London about one of the projects I’ve been working on for the last couple of months — UsVsTh3m.

An experiment

UsVsTh3m has been funded by Trinity Mirror. It is part of a series of initiatives the company is doing to invest in digital. I think they would be the first to admit that historically they have under-invested in the area, and the idea was to try and launch something that would attract an audience that the group don’t currently reach with their existing national and regional brands. Essentially we’ve been charged with proving that, divorced from the existing production methods and priorities, Trinity Mirror can produce web content that people want to share. And they wanted to test a more lightweight way of publishing.

A very fast experiment

And we’ve been doing it very fast. Having got Rob Manuel, co-founder of B3ta, on-board as the editorial lead, we held a one day workshop at WilsonFletcher’s office to hone the proposition. From that day, to the day that we launched was five weeks. That included hiring staff, as well as building the site.

Our original launch plan was an already ambitious six weeks. I knew that Trinity Mirror were truly serious about being lean and launching quickly when I pointed out that I wouldn’t be around for most of the week when we proposed to launch, and the response was not “Fine, we’ll have some meetings to decide on a new launch date” but “So, can we bring launch forward a week then?”

Why UsVsTh3m?

The name explains the simple conceit behind the site. Each day we try and produce some vaguely topical internet LOLs, and the rest of the internet produces topical LOLs. We publish our own, and link out to the things from elsewhere that seem good. At tea-time we send out an email rounding up the day, and announcing who has won — us or them. Rather like Ian Hislop’s team on HIGNFY, we don’t really ever expect to be funnier than the whole of the rest of the internet, but the point is more to put aggregation on an equal footing with original content production. We know that by the end of the day we need to have a balance of things we’ve done and things they’ve done in the newsletter, which keeps us actively scouring the web for good ideas.

But why the 3 in Th3m?

All of the social media combinations of Us Vs Them were taken. Damn you j nickels and your single “time to write cool shit” tweet.

Actually it is kind of handy, as it means we can have a unified name for our domains and social media accounts, and it is really easy when searching social media or Google to spot when people are talking about us or linking to us.

Why use Tumblr?

We’ve started publishing using Tumblr. There’s a question about why we wouldn’t use Trinity Mirror’s existing CMS, or roll our own platform for what we are trying to do. The answer is simple. We are aiming to reach 18-30^* year old people who love looking at funny stuff on the internet. Tumblr already has a squillion of those using the platform. Why wouldn’t you go and publish there, instead of trying to drag those squillions kicking and screaming off to somewhere else?

And prototyping our content to see if it works is just as important as prototyping the code. In the time a business like Trinity Mirror would usually take to set up the meeting to have the conversation about the CMS, I’d set up a Tumblr account and we were publishing.

^*(+40-ish people who still think they are 30, ahem.)

Product principles

One of the ways that we kept focus on launching was to define a set of “product principles” early on. These aren’t hard and fast rules, but they helped us set the direction of travel.

#1. Social. Not SEO.

Trinity Mirror knows how to do SEO. It doesn’t know how to reliably do social. Our concern is to produce content that will be propagated virally on the web. To that end a prominent part of the design is the share buttons at the foot of each article, and we think more about the sharability of headlines and tweets than their SEO keyword value. We don’t churn out something to try and catch the tail-wind of a Google Doodle, we try to write about things that the internet is already interested in sharing socially. We’re interested in reverse engineering the magic of things that go viral, to work out how to consistently tap into that.

#2. Visual. Not articles.

We want to make sure that the site is very rich and visual, and so the way we treat things like a popular Twitter hashtags is to try and illustrate the best jokes and examples. The news industry is dreadful at turning visual jokes into 600 word pieces. The classic example of this for me is when the NASA Mars Rover “accidentally” drew what looked like the classic graffiti “cock and balls” on Mars. Every news outlet on our planet wrote a piece about it, including exciting paragraphs like “Mars is the fourth planet in the solar system” and outlining how much it had cost to send the robots to space. All the piece needed from an UsVsTh3m point of view was “NASA draws cock and balls on Mars” and the picture. Job done.

#3. Every sentence a tweet.

“Every sentence a tweet” replaced “No paragraphs” as a product principle. This is one we clearly haven’t stuck to, but the idea is that we shouldn’t be writing things that aren’t tweetable. Every line of every article should be something that people will think is funny enough to tweet by itself. In part this is a way of reminding us that we are not in the business of writing 500 word articles. It is more a statement of intent than a hard and fast rule.

#4. A stream. Not sections.

We launched without any navigation on the site whatsoever. Our key use case is someone on their phone, who has just slightly lost interest in whatever it is they are meant to be doing — whether that is queuing for coffee, watching TV, or talking to their significant other. UsVsTh3m should provide a stream of funny and/or interesting stuff for them to swipe through whilst idling.

#5. Minimum Viable Product.

We took the idea of the minimum viable product to heart. What was the very least we had to do in order to get live and publish? Which essentially boiled down to hire some good people, open a Tumblr account, start publishing. OK, there’s a lot more to it than that, but we avoided all the usual big publishing business curveballs of integrating with an existing CMS or workflow or analytics or advertising solution. It’s a little bit held together with string in places, but until we’ve proved there is an audience we don’t want to over-invest.

The “BBC Radio One middle manager problem”

One worry during the project was that our pitch essentially boiled down to: “Oh hai internet! We are a couple of fortysomething slightly geeky managers in a big newspaper company. We’d like to make a really popular website for you young’uns”. We began to call this the “BBC Radio One middle manager problem”, after the way that the station’s average audience age crept up during the late eighties and nineties as a tier of middle managers commissioned pop radio they wanted to listen to, not pop radio for a young audience. I don’t think we’ve solved that problem, but we do have some ideas of how to tackle it.

The slither of ice

There’s a line in a recent Doctor Who episode about the Doctor having a slither of ice in his soul.

That is how I see UsVsTh3m and why in my original blog post trying to recruit people I talked about political comedy and satire like The Colbert Report or Saturday Night Live or Have I Got News For You?

I think we can do funny internet viral stuff that occasionally strikes a political nerve that is the slither of ice, in tune with the Mirror’s position as the best-selling left-leaning newspaper in the UK.

Yes we do cat gifs. We also stick it to the EDL — making animated reaction gifs of their erstwhile leader at his most gormless on TV, and comparing them to the best little loop of Beaker you’ll ever see.

And we dropped the ‘C’-bomb on oaf Nick Griffin in comic form.

Or using jokes about Osborne’s “Shamburger” to show how they’d moved the media agenda away from discussing his austerity politics.

The edge to the humour and the politics makes it harder to dismiss it as “haven’t you just sort of done lame Buzzfeed but with less content and on Tumblr?”

Our model. Our skills overlap.

The publishing industry tends to silo people into writers and reporters and editors, and pictures and graphics and image people, and technology people.

Although they all work together to produce the paper or a website, they seldom get the chance to cross-skill, and legacy structures prevent collaboration. What we’ve done differently is assemble a team of five where everybody to a greater or lesser extent can write for the web, use Photoshop like a boss, and code.

And we are improving at it all the time, because as we work on content, we are trading skills and swapping techniques.

Build fast.

I’m very proud of how quickly we went from concept to launch, and part of that is because we started building from day one. The very first designs were done in the browser by finding a Tumblr theme — Mesh — that I liked the look of, and which seemed to have the features I wanted, and then started hacking it.

Designer Chris Lam did some great work on the logos, typography and icons, and we hired William Turrell to do a proper job of finishing it off and cross-browser testing the code.

But essentially I opened a Tumblr account and starting hacking.

Our original idea was that the desktop version of the site would present you with a multi-column “wall of content”, which would have been a very radical approach.

In the end, we decided once it was populated with real content, it was too overwhelming. But it is an idea I might return to. “Mobile first” is a bit of a trite ciché, but that’s what we’ve tried to be. To build a site that works well on the phone, and then scales up a little bit so that it doesn’t look silly on the desktop.

Iterate fast.

We’ve already released several different versions of the site design in the first four weeks, including adding some global navigation. Because of our devotion to the idea of the stream I steered away initially from any navigation, and especially from having traditional sections. We now have links through to our email sign up, the most socially popular posts, and our interactive “toys”, plus a little hand-crafted story list at the foot of each page.

Learn fast.

Everything we do has click tracking on it so we can see how much links are being used. We added “Read our best stuff” as a button at the foot of each article. In the first two days it was only clicked 80 times. So I changed the words. The click rate increased marginally. It is the kind of micro-analysis of elements on the page that you rarely get to do on a big content website, because there is just “too much stuff”, and too much legacy, and too many people who need to sign off the slightest change.

The “Toys” are our distinctive USP.

When we launched I was a bit worried that people would just shrug and say “Oh, meh”. The “toys” are our USP and differentiator. We’ve put out a string of what you might call “interactives” in order to build reach and attract attention. And to be funny.

Icefail

The first “toy” we launched was Icefail, a parody of the New York Times’ “Snow Fall” and the Guardian’s “Firestorm”.

I don’t want to spoil the joke so you should probably just go and look at it. It’s worth looking at it on both desktop and mobile, as it behaves differently on each. This did well for us, and got a bit of attention in media circles.

It is an amazing feeling launching something and watching people tweet about it. I know people involved in both “Snow Fall” and “Firestorm”, and it is incredible how something intended as a gentle rib-tickling takes on a whole other life once people start tweeting “FUCK YEAH! TAKE THAT NEW YORK TIMES!” alongside the link.

Doctor Who Plot Generator

“6 lines of JavaScript that write Doctor Who plots indistinguishable from the current series…” was next. This did really well, and ended up causing SFX to do a little blog post about us. It started as a fairly straight attempt to generate plausible sounding spoilers for the forthcoming 50th anniversary special. But then we realised that spinning it into a criticism of the show’s recent run and putting sillier ideas into made it funnier.

I do feel bad for having joined the long dishonourable tradition of Doctor Who superfans trolling the current production team by saying “It isn’t as good as it used to be”. Rob made me do it, honest. There were 100,000 fake Doctor Who episodes generated in the first 24 hours.

Recycle, recycle, recycle

We used the Doctor Who code to make another couple of quick generators, with the idea of adding something new each time. We built one that mimicked troll-ish comments on various news sites, and one that made up spurious arguments against equal marriage and then assigned them to some ludicrously named Lords and MPs.

Spurious Linkbait console headline generator

We built a thing to troll the gaming community by making up silly headlines about the Xbox One and the PS4, thinking this would generate megaLOLs and be massive on Reddit and gamer forums. It sank without a trace. Rather than build this, it would probably have been less effort for me to identify the 200 people who looked at it and personally go round to their house and tell them an unfunny “Knock! Knock!” joke.

Why did that happen? Generator fatigue, perhaps? We hadn’t added anything new. And perhaps we made a mistake in not choosing to troll one side or the other. It generated headlines alternating between Xbox and Playstation, but maybe we should have just decided to build something mocking Playstation fanboys that Xbox fangirls could get behind.

Or perhaps it just wasn’t funny.

Game Of Thrones Facebook app

Our first interactive that used Facebook as a platform got the names of your friends and plugged them into a plausible Game Of Thrones narrative where they ultimately all meet horrible untimely grisly deaths. As we say “Like Game of Thrones? Secretly like fantasising about your friends dying horribly? Boy, have we got the app for you.”

Ed Balls Teaching Typing

“Ed Balls Teaches Typing” was described on Twitter as “the best game not launched at E3”. Taking the Ed Balls tweets Ed Balls memes to its logical conclusion, we built a throwaway toy that simply tested how fast you could type “Ed Balls”. It recorded your personal best and made a satisfying “Ta-daaa!!!” sound when you completed the task, and proved to be horribly addictive. We very much enjoyed watching people taunt their friends over Twitter with the scores they’d got.

It gave us the chance to be meta about ourselves as well, as every raging internet success deserves a navel-gazing “how we made it” feature. We wrote “16 behind the scenes secrets about ‘Ed Balls Teaches Typing’”, which included early sketches of the game, a reveal of how you could cheat, and the astonishing claim that it may have “cost the UK economy as much as £451.99” in lost productivity.

The explainer post also serves another purpose — with a purely stream-based site, something like “Ed Balls teaches typing” quickly slips down the pecking order of the front page, so finding a new twist to re-link to it can prolong the half-life of a silly meme-toy like this.

Twitter = attention. Facebook = traffic.

You’ll often see a lot of people on Twitter telling you that Facebook is dying, that it won’t be around in five years time, that usage is dropping off and other tales of woe. Our experience is that launching something like “Ed Balls Teaches Typing” creates a lot of sound and fury on Twitter, but that doesn’t always convert into masses of traffic. A link tweeted by someone with a million followers may only generate hundreds of visits.

By contrast, Something that has gone viral on Facebook though — which our “14 kinds of Facebook people you want to block, but you can’t because they’re sort of your friends” has — will deliver you shedloads of traffic. Absolute shedloads. And all without anybody really noticing, because the sharing happens at a friend-to-friend level on that platform, not in the grandstand public show-off arena that Twitter is.

“Toys” for internal use^*

We’ve also made some interactives to help us build the site itself. “Stormy” is a comedy brainstorming tool, that allows us to enter candidate ideas for articles into a database. We have workshops where we pair Trinity Mirror staff with stand-up comedians and comedy writers to produce article ideas. These all get chucked into the database.

We then go into “battle mode”, where we are given a choice of two of the ideas and asked to vote “which is best”. Human beings are simply rubbish at picking out the best ten ideas when faced with a list of over 200, but choosing between two things is a doddle. It is a good old-fashioned bubble sort, and after we’ve hammered away voting for ten minutes, we have a list that has collectively ranked all the ideas we have generated. We then pick the top few, and go through them one by one fleshing out the idea as a group.

^*Yes, that section heading does look a bit smutty now I read it back.

Recycle, recycle, recycle (slight return)

And that gets recycled too. Battle mode features in Sicktionary, our astonishingly puerile crowd-sourced thesaurus of euphemisms. The Viz Profanisaurus is a dictionary named after a thesaurus, so we thought why not do the same thing, but as a thesaurus named after a dictionary, and make it more interactive. Based on some very dry medical definitions of the human body and human activities, users can sign in with Twitter and add euphemisms to them. You can use your real name if you really, really want to, but by default we assign a ludicrous double-entendre or euphemism as your username. You can add new euphemisms, or go into battle mode to let the cream rise to the top, as it were. We hope it will be used by authors of smut everywhere.

Attention to internet detail

You should probably view the source on most things we do. Ed Balls Teaches Typing has an ASCII art Ed Balls hidden in it.

Code for things like the Doctor Who plot generator or the linkbait Xbox One/PS4 headline generator contain comments that are aimed at the audience. Between the five of us we’ve got about a gazillion years of experience of making things on the web, and that is getting poured into cramming as many jokes and memes as possible into everything that UsVsTh3m does.

Problems. Regrets. Mistakes.

Awkward. It has been pretty much been a perfect launch. So presumably some massive calamity awaits us, lurking in the shadows.

We’ve found Tumblr fiddlier to publish with than I’d anticipated, especially the way it compresses and renders images. And we are developing a very passive aggressive relationship with the cheeky chimp at Mailchimp, as we’ve struggled to get the newsletter production integrated into the day. In fact we missed out editing some boilerplate text in the email templates for the first couple of days, until some kind soul pointed that out to us. So we’ve converted that into a running gag about not being able to use the software or format the newsletter properly. We think we can get away with stuff like that within the conceit of the “brand”.

But aside from that I really can’t think of too many problems. Eeek.

Infinite scroll is the enemy of these links

One massive mistake is that you can’t reach the email sign up and links at the foot of the front page, because it uses an infinite scroll, and now that there is four weeks worth of content, they are always tantalisingly out of reach.

Well, I say massive mistake…

It does keep getting pointed out to me as a UX error, which is a pretty dumb one for me to have made, but in my defence only 9% of visits to the Tumblr powered pages are the homepage, so 91% of people can reach the links. I’m also of the professional opinion, having looked at analytics over a lot of years on a lot of sites, that people only care about footer links if they notice they can’t be clicked. Footers are generally where links are sent to die by the legal team. In the prototypes, the dummy text for the footer was “Infinite scroll is the enemy of these links.”

Or as we put it in reply to a tweet wondering whether it was a mistake or whether we were trolling the audience: it was a mistake, but leaving it in is us trolling the audience.

We like to think of it not as infinite scroll, but as our infinite troll.

Our community policy

Our entire community policy is:

“Funny is good. Bigotry is bad. Don’t be a jackass. And thanks for being awesome.”

Viral is hard

Amusingly, hindsight means it is always blindingly obvious that something would be a viral success once it has been successful, but the flop of the console headline generator just goes to show that it is incredibly hard to predict what will go viral.

We very nearly didn’t publish the Doctor Who plot generator at all.

I can tell you now that it was funny, tapped into popular culture, and allowed people to express a dissatisfaction with the way the show is currently going, in a light-hearted fashioned. Having worked on it for a while though, I’d lost sight of whether it was actually funny, and was bored with it. I apologetically told the team something like “We could put this live now. I guess?”

Where’s the money?

What is in this for Trinity Mirror? At the moment, institutional learning.

Can we make money from it? We think so.

We have four possible commercial models in mind that we think might be worth experimenting with. Display advertising isn’t one of them. You’ve got more chance of surviving a plane crash than clicking a desktop banner ad. Why would you click scaled-down tiny unreadable banners on your phone?

But our first task is to prove that we can grow audience, and be viral on demand. If we can’t do that, we’ve got nothing to sell.

What’s next?

I have to give due credit here to Malcolm Coles and Chris Ellis and the senior management team at Trinity Mirror, who have basically put up the money, set some ground rules, and then totally given us a free hand to use whatever technologies and content approach we want. I’ve seen a lot of big media organisations set up a skunkworks or “innovation lab”, and then stifle it by making it still play by the rules, but Trinity Mirror haven’t done that. We’ve got access to some great resources — the Mirror picture archive and a duty lawyer, for example — but essentially we are acting like a little start-up.

We’ve already hit some of our early traffic targets, and whilst the figures are a drop in the ocean for Trinity Mirror overall, we’ve already eclipsed a couple of the smaller local and regional titles. Starting lean meant sticking to office hours and only publishing when the core team were around and at work. We are going to be looking to expand the staffing levels, and start publishing earlier in the day. Weekends might follow. We are going to be adding one more “primarily-writery-type-person” and one more “primarily-codey-type-person” to the team.

And we want to keep growing, measuring and learning. I believe it is the only way.

UsVsTh3m can be found at UsVsTh3m.com and of course, on Twitter and Facebook.

Thank you…

UsVsTh3m: Rob Manuel, Tom Philips, David Stevenson, Tom Scott & Martin Belam.
Design and tech: Chris Lam, Tiffany Ong, William Turrell & Paul Curry.
Cheque-writing & giving us space to get stuff done: Malcolm Coles & Chris Ellis.