The Mystery Is Resolved: The Rain That Never Stops, Cakes and Frightened Cats

Everybody loves a good riddle, but when you design one, you never know how it will be perceived until you try it out. The new Smashing Mystery Riddle1 didn’t emerge over night, and after weeks of fine adjustments and many — many — test runs, we prepared some coffee, pressed that shiny “Publish” button and, you know, started waiting for tweets. And now, exactly two days later, it’s time to reveal the mystery and announce the winners. Oh, you want to figure it out2 first? Well, then please close this tab since there are (obviously) spoilers in this post.

The Mystery Riddle

Admittedly, the new riddle turned out a bit harder than the previous one. Again, we didn’t want it to make it easy and we also didn’t want to make it too hard since most people would just drop it at some point. We did want to challenge you to be creative and think hard though, and finding this sweet spot of complexity took time and patience. So within the five weeks since the initial idea was conceived, we ran 17 various tests on various variations of various animated GIFs.

Well, obviously we got some of the testers totally confused and disoriented, and probably also annoyed and frustrated, and perhaps even angry since they had to stare at the infinitely looped GIFs for quite some time. Over the first two weeks of testing, out of 14 people not even one single person could solve the riddle! Now, that did not make for happy testers for sure! (Oh those poor, poor souls!).

In fact, once you start running tests and introduce little variations of GIFs, and edit the hints and change file names, you start interpreting things that are just not there, and you start seeing animated GIFs all over the place. At some point we started thinking about running looped animated GIFs within looped animated GIFs within looped animated GIFs (“Inception”), and we even created3 prototypes4 for that. (Seriously.)

Inception5
The Inception idea was interesting to explore, but failed miserably in our tests, confusing testers. Large view.6

Guillaume7, the designer of the GIFs, wasn’t happy with this idea, and we weren’t sure what the heck we were doing. Also, testers went insane and complained about massive headaches and eye strain. That’s not a feeling you want to explore. Well, most of you at least. Going back and forth in our prototypes and drawing boards, by the end we had something that we felt was just right, and on average took around 38 minutes to solve.

Level 1: The Flying Voyage

Well, the rules were the same, and the game wasn’t much different either. We presented a mysterious animated GIF that contained a hidden message which had to be found. Once you resolved the mystery, you’d see a Twitter hashtag displayed in plain text. So again, just like last time, there wouldn’t be any room for vague interpretations. The solution would be displayed in plain text. And the only hint was to watch out for the file name. And just like the last time, the main difficulty was finding the right idea to pass level 1.

Smashing Book Mystery
Level 1: The only hint was to watch out for the file name.

So how does it work? Well, if you look very closely at the animation, you’ll notice a steaming cup of coffee on the table with a sign: “Do Not Drink Hot”. Is there a way to cool down the cup of coffee? Initially, we wanted to have something like a responsive animated GIF, which would change depending on the screen resolution, and which would kind of simulate the cooling down of the coffee with JavaScript and/or media queries. However, this would be a bit too easy to detect for our smart audience, so it was a no-go.

Smashing Mystery Heat Map8
Surprisingly, you can see many clicks outside the image on the right side — perhaps this is where the birds were supposed to fly out? We’ll never find out. Large view.9

Now, if you watch out for the file name like you are asked to, you’ll discover that you are expected to catch the birds. Since it’s an animated GIF and it isn’t linked, clicking on any area of the image won’t help at all. Neither would an analysis of the color levels or frames lead you anywhere. Some readers noticed that a Twitter hashtag potentially could be a hex color code, so we started receiving lots of very… well, interesting tweets containing various hex values for the Twitter birds and surroundings in the room. It must have taken quite some time, but this was the wrong direction to take. Sorry about that!

So, how can you catch the birds? Well, since nothing is clickable, you have to change something else. Ah! Right. Let’s try changing the file name of the image to something like… open-the-window.gif10?..

Still catch the birds11
Changing the file names doesn’t really help. You still have to catch the birds.

Aha! So that’s a blind alley. Well, there is a steaming coffee pot on the table. Are you getting closer? Or is it just a distraction? Well, there is a note at the bottom. Changing image URLs won’t get you anywhere. That’s a bummer. But you are now supposed to look outside the window and notice what kind of birds you see. Well, they look like… Twitter birds, right? And according to the file name, you still have to catch them.

Okay, so you could just head over to Twitter and do a simple search for “Catch the birds”12. Well, it isn’t particularly helpful. (Except that there are quite a few frustrated readers like us, though, so that’s probably a good thing. Well, at least we aren’t alone out there!). But wait: could #catchthebirds13 be the hidden hashtag? Well, potentially, yes, but the riddle clearly says that the hashtag will be hidden in plain text, so probably not.

But wait a second. If the hashtag doesn’t seem to be right, what about the Twitter handles? Let’s try to @CatchTheBirds14. Bingo!

Smashing Book Mystery15
Level 2.16
@CatchTheBirds17 would help bring you to Level 2.

Landing on “The Flying Voyage”, it looks like you are on the right path, and you’ve passed level 1. It wasn’t too easy, so a coffee break is probably well-deserved before we proceed to the next level18. Oh wait, the coffee — what about that sign on the table saying “Do Not Drink Hot”? Could it be a key as well? @DoNotDrinkHot19. Right on! At this point you are supposed to start feeling pretty awesome.

Indeed, the hints for each level are hidden somewhere on Twitter, so the question now is how to use the clues in animated GIFs and file names to pass the levels. Well, this will involve quite a bit of work.

Level 2: The Book Jungle

So, the tweet has brought you to another animated GIF, and it looks like the main character already got his coffee and is now reading the book. The file name says that “something is wrong here” but there’s nothing wrong with a cat being afraid of thunder… right? So what else could it be?

Smashing Book Mystery
Level 3: The file name says there’s “something wrong here”… but what could it be?

The couch? Check. The window? Check. The tree? Check. The table? Check. The portraits on the wall? Check. The book? Wait a second. Isn’t the Smashing Book20 held upside down? The cover of the book is displayed on the right page so how can the character actually read it? Could it be that we have to flip the book somehow or turn it around? Perhaps with, well, @FlipTheBook21, @TurnTheBook2622, @TurnOverTheBook23 or @RotateTheBook24?

Smashing Book Mystery25
@TurnTheBook2622 would help bring you to Level 3.

Excellent. You’ve reached level 3 and apparently you are halfway through! You deserve warm milk, cookies, and probably a donut as well. Apparently, that cat afraid of thunder was just a sneaky distraction—you better watch out for those! Let’s proceed to level 3.

Level 3: The Broadway

Okay, the book is now in order, and that mysterious person keeps drinking coffee and reading the book. The file name says that “these donuts are making me thirsty…” Now this sounds familiar. Isn’t it a reference to Seinfeld27? Maybe that’s where you should look, or maybe it’s just yet another distraction. In fact, if you think about it, that character can’t be that thirsty since he keeps drinking all the time. Could it be that it’s the cat who is thirsty? Let’s try to @FeedTheCat28. Oh, well. It was worth a shot.

Smashing Book Mystery29
Level 3: These donuts are making me thirsty…

But what do we know now? We know that @CatWantsMilk30, so what if we @GiveCatSomeMilk31? Alternatively, we could @FeedTheBlackCat32 as well. But doesn’t the cat look a bit bored? And since it’s playing with the ball of wool, perhaps it just wants to be distracted? Indeed, that cat is a @BoredBlackCat33, so we could also try @PlayWithTheCat34, right?

Smashing Book Mystery35
@PlayWithTheCat36 would help bring you to Level 4.

Right! But wait a second. Different Twitter handles contain tweets leading to different URLs, and yes, it was intentional. Some handles lead to smashed.by/map while others lead to smashed.by/journey. However, both handles lead to the final level 4.

Now that was a tough one. At this point you should start feeling proud of yourself. Time to get your donuts, and move to the final level.

Level 4: The Dome

So, we can see a similar scene, but it looks like it isn’t about the book any longer. The mysterious character seems to be busy examining the New York map, so he must be preparing for the trip already. Now there is something really weird about that clock making quick rounds on the wall. Could it be somehow connected with time travel, or time ticking too fast, or something like that? Or is it a just another distraction?

Smashing Book Mystery37
The final round in the mystery wasn’t necessarily the most difficult one, but it took quite some time to get your head around.

The clue in the file name is the question “Where are you going?”. Well, obviously you are going to New York, but there really is nothing you could do with “New York” alone. The main prize for solving the riddle is a trip to New York as well as a SmashingConf NY ticket.

So where exactly will the conference take place? Oh, okay, the TimesCenter, right off Times Square. Wait a second. Times. Square. Could it be a hint? On the wall, we have a clock showing the time, and we have a square and something that looks like a map. Could @TimeSquareMap38 be a solution? It is indeed! Now obviously, @TimesSquareMap39 would be a solution as well (and so would @TimeSquareLine40 and @TimesSquareLine41), but your path will probably cross Times Square as well, so you could just go @ToTimesSquare42 as well.

Smashing Book Mystery43
“Nothing like a good ol’ cake”. But you know, cake is a lie, right? An alternative final GIF animation in the Smashing Mystery.

If you followed another path, you’d land at a different URL with a different animated GIF. You won’t find a map on the wall but instead a chocolate cake with a cherry on top. But wait a moment. The cake is a lie44, so is it another distraction or isn’t it? If you follow the same train of thought as with the alternative animated GIF, you probably will end up with @TimeSquareCake45 or @TimesSquareCake46. Could it be…? Is it…?

Smashing Book Mystery47
Phew! @TimesSquareMap48 revealed one of the final hashtags: #TimeSquareCircle.

Yes! Now you solved the mystery, and as it turns out you really are awesome! The secret hashtag is now displayed in plain text in the tweets from these accounts. Now that was quite a journey, wasn’t it?

Mystery Solved! And The Winners Are…

You didn’t have to discover all the secret hashtags, but potentially you could find #TimeSquareLine, #TimeSquareCircle and #TimeSquareCenter. In fact, within two days over 400 readers found at least one of these hashtags which we didn’t really expect.

Some of you were quicker than others. While the first riddle back in November was solved within four minutes (!), this one took more time to crack. The first correct hashtag was tweeted by @typeform49 53 minutes after we hit that shiny “Publish” button, with more and more tweets containing the right answer shortly after that. In fact, it turned out that our dear readers are absolutely smashing indeed: #TimeSquareCenter50, #TimeSquareCircle51 and #TimeSquareLine52.

The first place was earned by the person who was the quickest to solve the riddle. We allocated prizes to the other lucky winners randomly, though the requirement was that at least one of the hashtags had to be found. The winners can select any prize of their choice (be it a bag, a Smashing Library account, printed books or anything else). And they all get the Smashing Cody Stress-Relief Ball53, too. All winners have been contacted. The winners are:

Congratulations! And thanks to everyone who participated! We hope we didn’t waste too much of your productive work time (and didn’t cause too many headaches either).

Behind The Scenes

Guillaume Kurdjian
Guillaume Kurdjian6564 is a 22-year-old freelance illustrator and animator from Nantes, France. Guillaume likes to experiment with stuff on his computer and climb trees.

Just like the last time, we worked with talented Guillaume Kurdjian6564 on a series of animated GIFs66 for the riddle. This time the discussion thread was a bit longer, and after thorough conversations and prototypes, we ended up with over 30 different GIFs, drafts, and ideas that were thrown away, as well as the ones that made it to the final stage.

All designs were a series of iterations to make the overall riddle not necessarily perfect, but just right. So a big “thank you!” to Guillaume for following through and being so enthusiastic and kind about all the changes made.

At almost every point throughout the design process we wondered if Twitter might suspend some of the accounts. With 42 Twitter accounts registered over five weeks (we considered using different synonyms), we are still receiving lots of notification emails every single day. And, oh my, it really wasn’t easy to find meaningful Twitter handles that were still available.

Scenery67
Guillaume designed the scenery first; it was a starting point for the mystery riddle.

Besides, you have to work within Twitter restrictions on the accepted characters and the number of characters per Twitter handle (15 chars). It took quite a lot of testing and playing around on the Twitter registration page, and lots of alias emails to make it all work, and lots of CAPTCHAs to be filled in, and obviously, lots of coffee to stay sane! Since we had already played with file names for the first riddle, we had to be a bit more creative about how readers moved between the levels. The critical point was the clue given if the reader changed the image URL in the browser, and it took a lot of experimentation to get it right.

Where are you heading?68
Actually, we wanted to use TimeSquareCircle as a final Twitter handle, but we couldn’t register it due to Twitter’s length restrictions. So we tried TimeSquareLine, TimeSquareMap and TimeSquareCake instead.

Initially we wanted to use “Mystery: Level 1″, “Mystery: Level 2″, etc. as Twitter names, but that would make it searchable via Twitter, so we decided to use code names for each level, according to the King Kong storyline that we’ve used throughout Smashing Conference New York. So the user journey went from The Voyage, to the Book Jungle, to Broadway, to the Dome.

Waiting for round 3 already?69
Are we waiting for round 3 already?

So this is it! It was quite a journey, but we hope it was worth it. We are really sorry about all the unproductive hours that you spent solving the riddle. Well, kind of. Now, are you ready for the third round? ;-) Stay tuned!70

Footnotes

  1. 1 http://www.smashingmagazine.com/the-new-smashing-mystery-riddle-smashingconf-ny/
  2. 2 http://www.smashingmagazine.com/the-new-smashing-mystery-riddle-smashingconf-ny/
  3. 3 http://provide.smashingmagazine.com/mystery-riddle/inception.gif
  4. 4 http://provide.smashingmagazine.com/mystery-riddle/endless-inception.gif
  5. 5 http://www.smashingmagazine.com/wp-content/uploads/2014/01/inception.gif
  6. 6 http://www.smashingmagazine.com/wp-content/uploads/2014/01/inception.gif
  7. 7 http://guillaumekurkdjian.com/
  8. 8 http://www.smashingmagazine.com/wp-content/uploads/2014/01/mystery-riddle-full-opt.png
  9. 9 http://www.smashingmagazine.com/wp-content/uploads/2014/01/mystery-riddle-full-opt.png
  10. 10 http://provide.smashingmagazine.com/mystery-riddle/open-the-window.gif
  11. 11 http://provide.smashingmagazine.com/mystery-riddle/still-catch-the-birds.gif
  12. 12 https://twitter.com/search?q=catch%20the%20birds&src=typd
  13. 13 https://twitter.com/search?q=%23catchthebirds&src=typd
  14. 14 http://www.twitter.com/CatchTheBirds
  15. 15 https://twitter.com/CatchTheBirds
  16. 16 http://www.twitter.com/CatchTheBirds
  17. 17 https://twitter.com/CatchTheBirds
  18. 18 http://smashed.by/thunder
  19. 19 http://www.twitter.com/DoNotDrinkHot
  20. 20 http://www.smashingmagazine.com/books/#the-smashing-book-4
  21. 21 https://twitter.com/FlipTheBook
  22. 22 https://twitter.com/TurnTheBook
  23. 23 https://twitter.com/TurnOverTheBook
  24. 24 https://twitter.com/RotateTheBook
  25. 25 https://twitter.com/TurnTheBook
  26. 26 https://twitter.com/TurnTheBook
  27. 27 https://www.youtube.com/watch?v=DRaLpHoZA8E
  28. 28 http://www.twitter.com/FeedTheCat
  29. 29 http://provide.smashingmagazine.com/mystery-riddle/these-donuts-are-making-me-thirsty.gif
  30. 30 http://www.twitter.com/CatWantsMilk
  31. 31 http://www.twitter.com/GiveCatSomeMilk
  32. 32 https://twitter.com/FeedTheBlackCat
  33. 33 http://www.twitter.com/BoredBlackCat
  34. 34 http://www.twitter.com/PlayWithTheCat
  35. 35 https://twitter.com/PlayWithTheCat
  36. 36 https://twitter.com/PlayWithTheCat
  37. 37 http://provide.smashingmagazine.com/mystery-riddle/where-are-you-going.gif
  38. 38 http://www.twitter.com/TimeSquareMap
  39. 39 http://www.twitter.com/TimeSquareMap
  40. 40 http://www.twitter.com/TimeSquareLine
  41. 41 http://www.twitter.com/TimesSquareLine
  42. 42 http://www.twitter.com/TimeSquareMap
  43. 43 http://provide.smashingmagazine.com/mystery-riddle/nothing-like-a-good-old-cake.gif
  44. 44 http://www.urbandictionary.com/define.php?term=the%20cake%20is%20a%20lie
  45. 45 http://www.twitter.com/TimeSquareCake
  46. 46 http://www.twitter.com/TimeSquareCake
  47. 47 https://twitter.com/TimesSquareMap
  48. 48 https://twitter.com/TimesSquareMap
  49. 49 http://www.twitter.com/typeform
  50. 50 https://twitter.com/search?q=%23TimeSquareCenter&src=hash&f=realtime
  51. 51 https://twitter.com/search?q=%23TimeSquareCircle&src=typd&f=realtime
  52. 52 https://twitter.com/search?q=%23TimeSquareLine&src=hash&f=realtime
  53. 53 https://shop.smashingmagazine.com/smashing-cody-mascot.html
  54. 54 https://twitter.com/typeform/status/428163049002782720
  55. 55 https://twitter.com/_indri_/status/428180968935919616
  56. 56 https://twitter.com/alecsandru/status/428316555621847040
  57. 57 https://twitter.com/JoseLuisAlmagro/status/428652271765692417
  58. 58 https://twitter.com/GregorTerrill/status/428182381804015618
  59. 59 https://twitter.com/brassy/status/428171091597479938
  60. 60 https://twitter.com/inkterina/status/428824006586675200
  61. 61 https://twitter.com/graveshow/status/428525877823930368
  62. 62 https://twitter.com/veljoni/status/428568625859923968
  63. 63 https://twitter.com/Senff/status/428192209876185089
  64. 64 http://guillaumekurkdjian.com/
  65. 65 http://guillaumekurkdjian.com/
  66. 66 http://bisouslescopains.tumblr.com/
  67. 67 http://provide.smashingmagazine.com/mystery-riddle/scenery.gif
  68. 68 http://provide.smashingmagazine.com/mystery-riddle/where-are-you-heading.gif
  69. 69 http://provide.smashingmagazine.com/mystery-riddle/waiting-for-round-3.gif
  70. 70 http://www.smashingmagazine.com/the-smashing-newsletter/

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops and loves solving complex problems in large companies. Get in touch.

  1. 1

    Had good fun solving this one, though it turned out to more elaborate than I thought at the time. When I saw the birds, I just went over to Twitter and did a search on ‘mystery resolved’. Using People search, some familiar profile pics popped up. Presto!

    0
    • 2

      Wow…You realize you could’ve won the trip if you did this immediately after the Riddle was published?

      0
      • 3

        Vitaly Friedman (editor-in-chief of Smashing Magazine)

        January 30, 2014 6:14 pm

        Actually we removed the text “Mystery Solved” from all accepted solutions. And I don’t think that we’ve forgotten to remove it from any Twitter handles?

        0
  2. 4

    Loved the puzzle! Had a lot of fun cracking it with my colleagues :-) Thanks for the fun!

    0
  3. 5

    Thanks for this, this was amazing, it was a lot of fun and not very easy!

    0
  4. 6

    I am sure I would never figured it out :/

    0
  5. 7

    Loved this contest…although 53 MINUTES? I was never going to beat that person with my paltry time. I made the consolation list though! Sweet! (I can no longer say, “I never win anything”)

    0
  6. 8

    This was a great riddle. props to the creators of it.

    next time make a riddle that doesn’t involve twitter.

    twitter is gaybot.

    0
  7. 9

    I have to say while I quickly was on Twitter searching for accounts, I needed more than 2 hours to try @catchthebird.

    I tried @bird, @twitter, and even @Larry, the name of the Twitter logo bird. Boy I went crazy over this. But after @catchthebird I knew I have to form the username as a sentence instead of the object (contrary to the gifs in the first riddle).

    Great riddle guys!

    0
  8. 10

    Very good work by all.

    I got stuck on the first level for 15 minutes before switching to the Twitter handles, but by then I had to get back to work and only (so close https://www.dropbox.com/s/1ighicrvf3b4kka/Screenshot%202014-01-30%2015.49.11.png)

    After being redirected to the new image when changing the file name I thought there was something in the message.
    “Changing the URLs won’t bring you anywhere” would usually be written as “Changing the URLs won’t get you anywhere”. Get, GET, GET variables in the URL. That sparked a series of ?catch=twitterbirds, ?get=birds etc etc. I went too far down the wrong road :D.

    0
  9. 11

    I figured the first hashtag in a minute but then got stuck and didn’t solve anything…

    0
  10. 12

    Hey Vitaly,

    We’re pretty chuffed to have won! Thank you very much!!!
    Please get in touch to make the arrangements.

    Speak soon.

    0
  11. 13

    How could I not think of turn the book? I kept trying “reading the book upside down” and “backwards” and so on… But I was excited to atleast go past level 1. Hope to go to the next level in the next mystery puzzle :) I love the concept. Great work people!!!

    0
  12. 14

    Too bad I don’t like Twitter. But it was fun reading through it all. Congratulations to the winners!

    0
  13. 15

    Hey hey hey I’m among the winners! Received your message but unable to DM you like you asked, so please hit me up via email? :)

    0
  14. 16

    I had a feeling I needed to get on Twitter to solve this, but it went live at 8 EST when I was at work…that blocks twitter…and doesn’t allow employee wifi access…and all I have is a corporate DumBerry (on which app downloads are also blocked). Not sure I would have solved it anyway, but at least the Smashing Newsletter is always free and I can look forward to each edition of that!

    0

Leave a Comment

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

↑ Back to top