Even among the many wonderful World Cup interactives and news apps we saw this year, the NYT’s Spot the Ball was a standout, both in conception and execution. We spoke with the team behind it about the project’s design, world-class Photoshopping, and surprising inspiration.

Q. How did you decide to do this project?

Alastair Coote: First off—the important confession is that I didn’t come up with the idea of Spot the Ball! The idea actually goes all the way back to the 70s, in the UK at least, where newspapers ran it as a cash prize competition that looked something like this:

The original Spot the Ball (source)

We had an open call for World Cup ideas, and I kept thinking back to that old idea and how a modern variant might look. We obviously weren’t going to replicate the cash prize element, but wanted to keep some spirit of competition in there. I spent a few hours playing around with different ideas and ended up with a prototype that looked like this:

Our original prototype idea

That prototype was also useful in pitching the concept—rather than forwarding around a dry text description of the concept, we could have people play a mini-round for themselves. Once it was approved we started talking to the News Design team about how we could improve the look and feel beyond the bare frame of the prototype. Editorial Designer Rumsey Taylor took it on.

Rumsey Taylor: The design stemmed from a working prototype, and in response to that, two improvements were made: one, to make the photos larger, and two, to “gamify” the interactions, that is to make the interface playful in addition to informational.

Accordingly, we introduced the idea of rewarding the user, which is to say her guesses could be good, bad, or perfect. So we came up with a color system and language to articulate the idea of success or accuracy. From there it was a matter of fine-tuning the interactions to ensure that the whole package was intuitive and, most importantly, fun.

Step 1: Default call to action

Step 2: Call to action morphs into cursor; background overlay fades to 0% opacity

Step 3: On click, the cursor locks into place; confirmation appears nearby

Step 4: The circle fades into full opacity; the soccer ball fades in

Step 5: The circle changes color according to the accuracy of the guess; confirmation fades in beneath the image (not shown)

Step 6: The range of guesses fade in; the overlay fades in beneath the guesses and above the image (not pictured)

Coote: Rumsey, Interactive News intern Colleen McEnaney, and I set about merging the design into the prototype, and making it mobile-ready.

Q. What is up with that Photoshopping? It is crazy good. (I assume it took forever.)

Sam Manchester: Thanks. I want to make sure people have no idea where the ball is. It could be anywhere. If we do five photos where the ball is on a field of green (easy Photoshop), people will pick up on that and the game will be easier and boring. My feeling is that if the game is just hard enough people won’t get bored, they’ll be challenged, and they’ll want to come back and try again in the next round. So I choose photos with complex backgrounds, and sometimes they take forever. But it’s fun, and I love it when people come up and tell me they tried to find the Photoshop errors as a way to cheat the game. Good luck with that.

Q. The social/score comparison trick is really nice. How did you implement it, and have you seen it used as you expected it would be?

Coote: One of the goals when creating Spot the Ball was that it should be very resilient—you’re never sure exactly how much traffic you’re going to get, so it’s always sensible to plan for the worst. So, rather than depend on an a forever-growing database in our data center, we encoded the challenge data in the URL. That URL data was decoded in the browser, too—so we could scale without worrying about server capacity at all.

Baiting the social media hook

That was, until we looked at social media integration. Both Facebook and Twitter depend on server-generated meta tags for summary information, so if we wanted to display custom text, we had to use server-side page generation. Not ideal, but there was still no database involved, so our servers managed to cope with the user load quite easily.

Not that it was all a wasted effort—it means that once traffic has died down on Spot the Ball we can decommission our backend servers entirely. It’ll result in the loss of that custom metadata, but Spot the Ball will be able to continue living on and only cost us pennies in S3 storage.

We were very happy with the way people responded to the functionality—our social team did a great job promoting it and came up with the idea of people being able to challenge our Sports Editor, Jason Stallman, to a game. That was a hit.

One particularly interesting use we’ve heard of is people forming ad-hoc group competitions by posting their scores and links in Facebook comments to each other. Next time we do something like this the first improvement we’ll make is better facilitating group play.

Q. Have you consciously changed the way the game works as you iterate through the rounds? (It seems like the cues that were obvious in Round One are much less available in later rounds, and I’m wondering how much of that is intentional.)

Coote: Users picked up the game a lot quicker than I thought they might—we ran some A/B tests with layout tweaks that held the user’s hand more, but it turned out they weren’t necessary. This in turn had an effect on the copy—there was less of a requirement to explain every step of the game, instead we kept it short and let users play.

Q. How has reader performance gone through the rounds? Is the game getting harder, or have some rounds been easier?

There hasn’t been any significant change in reader accuracy through the tournament—many readers joined halfway through the tournament so perhaps it would be unfair to expect it of them.

As for whether it’s gotten easier, we’ll leave that for readers to judge. You would think that the last round—which was five photos of the same goal—would be easier, but I don’t think it was. Of course, I can’t say for sure—one of the downsides of working on a project like this is that I always know where the ball is and can’t play myself!

• Share on Twitter
• Share on Facebook