In this case study I take a look at how playing the New Yorker cartoon caption contest could be improved to support wider participation and better overall experience.

Summary

To begin with the end – here’s my design:

Screen Shot 2016-04-06 at 12.09.27 PM

The Setup

It was a dark and stormy winter night. Seattle dark, Puget Sound stormy. Nothing to do in weather like that except stay inside and read something dry.

And so I was leafing through my New Yorker backlog stack, which had begun to tower. Like many New Yorker readers, I love the cartoons. Even when you’re on a high speed catch up mission you have to read the cartoons. And you definitely have to read the inside back cover, where the famous cartoon caption contest runs faithfully week after week.

The inside back cover of The New Yorker.

The physical magazine is a good medium to take in the current contest, see who won last week and scan the final captions for next week. But if you want to try your hand and enter the contest, or scan past contests, or see which past contests you submitted a caption for – well then you have to go online.  And that’s where the current experience becomes a little sub optimal.

The current New Yorker page for the contest could be much better.

You can’t click on the cartoon image to expand it for a better view. It’s hard to scroll through past contests (and somehow all the thumbnail images for them are broken).  There’s a lot of data under the hood that either isn’t displayed at all or isn’t displayed well (how many votes did each of the three finalists get last week?).  And for an activity that is nothing but social (if you make it into the finalist round, the next thing you do is mount a vigorous campaign to ask everyone you know to vote for your caption), the contest has no social media interaction at all.

Also – what I really want is standard notifications to keep me on track each week.  I want the system to let me know when the contest is open, when a winner has been announced, how much more time I have to submit a caption, etc.  No brainer there.

An obvious UX thought came along: Why not an iOS app for the contest?

The Business Context

As it so happens, the timing for taking a fresh look at the New Yorker cartoon contest UX is good. Just a few days ago Cartoon Editor Bob Mankoff announced that revolutionary changes were afoot at the contest. What’s coming? A big increase in participation, he hopes. Today, because a physical prize is awarded each week, no one under 18 is eligible to play. Certain countries also cannot participate because of legal arcana around the prize. So by eliminating the prize, Mankoff hopes to see weekly submissions grow significantly from the current 5,000 level.

With that increase, New Yorker staff will need a better way to cull down the raw pile of first submissions to the 50 or so picks that start the internal editors’ review that results in the three final choices we readers vote on. And it looks like the magazine intends to start asking readers to help in the initial culling by voting up down or sideways on EVERY weekly submission (you can do as many as you want). That and they’re also using AI.

NEW. Give an initial rating to ALL submissions each week.
NEW. Give an initial rating to ALL submissions each week.

What the New Yorker wants for the cartoon contest is:
* more engagement
* more people playing
* more people following
* more people voting on raw submissions
* more people voting in final contest

How might they achieve these goals?

Brainstorming

First thing I did was throw out raw ideas and analysis in text.

UX patterns – a cartoon is perfect for a card pattern. It has some associated stuff (mainly a caption, votes, image), and we like to flick through one after another.  Should be easy to deal with core object of a cartoon.

Swipe left, swipe right? For the new step of voting on initial suitability of weekly submissions (which could be simplified to two choices yay or nay – not the current three), need a way to quickly vote on each caption and move on at high speed.

If users opt in to app, they could receive notifications:
* when new raw submissions for the week are ready to review
* when three final captions have been selected
* when winning caption has been selected

Key end user functionality:
* Easily view the current contest and submit caption
* View past contests
* Be notified of key events, deadlines
* See vote data for finalists
* See my past captions
* Share current contest with my caption to social media (to encourage people to vote for me)

Sketching

Next I did some sketching in GoodNotes.

Here I thought some more about the IA of a cartoon (again using the card pattern) as well as the cartoon life cycle (state diagram).

After this drawing (it’s ugly – but I’m getting better!) I was pretty happy about the core cartoon object at the center of the problem space.

New Yorker Contest
Quick sketching in GoodNotes. What is the essence of a cartoon?

Static Prototype

Next stop: Sketch.

I opened up Sketch to think about screen basics.  I didn’t spend too much time here because I knew I was going to use Atomic.io for my interactive prototype.

As soon as I saw the Tinder-like yes/no buttons, however, I felt pretty certain that was the way to go.

Screen Shot 2016-04-06 at 11.29.08 AM
Building screens in Sketch.

Interactive Protoype

Finally, I used Atomic.io to create an interactive prototype.

I quickly imported screens from Sketch into Atomic.io and added transitions.  You can use the prototype here (best to look at on big screen but will also work on mobile) or watch a quick video walk thru of it.

It’s rough but conveys just enough of how simple and effective an iOS app could be.

Screen Shot 2016-04-06 at 12.08.33 PM

Conclusion

This is a fairly simple example, and the design came together quickly.  With a little bit of work, the experience, usability and engagement of the current New Yorker Cartoon Caption Contest could skyrocket dramatically.

As the venerable magazine gets ready to welcome more people into the contest fold – and especially as it drops the age requirement and opens the door to kids – a mobile app seems like a necessity.  Without it, it’s hard to see people spending the time to review raw submissions.

There are many other obvious features that could roll out in v 2.0 – such as the ability to click a button and post the current contest with your caption on Facebook – thereby encouraging 1.5 billion other users to start playing, too.

4 comments

  1. Hey Win
    Really nice to be able to get the context before diving into the prototype. The community scoring/triage thing is a fun UX opportunity!
    And thanks for giving it a go in Atomic!

  2. Nicely done Win! I love your depth of thinking here in creating a usable experience that’s also delightful for the user and effective for The New Yorker’s brand. You did a great job documenting your thought/design process. I love caption contests, I’d totally use this!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s