The MIT Mystery Hunt is the oldest and largest annual puzzle hunt in the world. In 2012, my team, Manic Sages, won the Hunt, which mean that we had the honor/punishment of writing the next year's Mystery Hunt! Besides writing and testing puzzles, I served as art director, which meant I both delegated art and design-related tasks to other team members according to their interests and contributed much of the art and web design myself.

Branding

The gist of the 2013 Mystery Hunt theme was: an evil bank had swindled MIT out of the coin (the object teams search for to win the Hunt). In order for the Mystery Hunt to continue, solvers had to recruit an elite set of experts to help them pull off a bank heist and steal the coin back!

Three entities in the hunt (the evil bank, a sympathetic hacker collective who helps teams figure out the heist and who is needed for it, and the heist team itself) each needed their own branding. Sections of the puzzle hunt website associated with each entity had their own styling (the bank's "intranet" was green, serifed, and sedate; the heist main page was bold, stark, and daring; etc).

Puzzle Presentation

Each round of puzzles in the main section of the hunt was associated with one of the people you needed to recruit for the heist. Each recruit was also associated with a given obstacle that had to be navigated or circumvented to reach the coin.

Each round's section of the website had its own theme based on that person you were recruiting incorporated both into its puzzle mechanics and its web design:

In Danny Ocean's round, each puzzle corresponded to a Vegas casino. A team member contributed an extremely detailed image of the Las Vegas Strip for the round pages' background. Like Vegas, the site design was bright, splashy, and neon.

Feynman's round pages were meant to resemble a typical professor's homepage: basic Helvetica Neue font, the professor's author-photo, and a mostly-monochrome color palette other than grading-pen red for highlights.

Agent 99 (one of the secret agents in the old spy spoof TV show Get Smart) had puzzle pages themed like Cold War-era surveillance dossiers--typewriterlike fonts, physical papers, and a desk with the rotary "shoe-phone" from the show in the background.

As an explorer and archaeologist, Indiana Jones's round design featured weather-worn, old-timey maps with each puzzle associated with a location, connected with the ubiquitous red line indicating travel in film.

The Sneakers round was styled like a command-line interface on an old phosphorescent computer terminal, with monospace text and a color scheme of black and radioactive green.

The Rubik round homepage had a WebGL-based, interactive Rubik's cube on it, with puzzle corresponding to the 27 subcubes. Its design otherwise was extremely minimalist and "designer-y" in shades of white and light gray.

The Coin

A teammate drew the "1-percenter" version of MIT's beaver mascot with top hat, monocle, and briefcase that we used for the hunt t-shirt design. When it came to getting custom brass coins made, I had to translate that drawing into 3D, creating a version for the printer with lighter and darker colors corresponding to the desired heights. On the coin design I also included the MIT motto and put the Great Dome of MIT's Building 10 on the back.