The Mystery #2 Is Resolved: The Rain That Never Stops, Cakes and Frightened Cats
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Sponsor OWD on GitHub
Start with a free demo —
Take a break with a 3D game built on Netlify!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 Riddle 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 out 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 created prototypes for that. (Seriously.)
Guillaume, 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.
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.
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.gif?..
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”. 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 #catchthebirds 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 @CatchTheBirds. Bingo!
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 level. Oh wait, the coffee — what about that sign on the table saying “Do Not Drink Hot”? Could it be a key as well? @DoNotDrinkHot. 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?
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 Book 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, @FlipTheBook, @TurnTheBook, @TurnOverTheBook or @RotateTheBook?
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 Seinfeld? 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 @FeedTheCat. Oh, well. It was worth a shot.
But what do we know now? We know that @CatWantsMilk, so what if we @GiveCatSomeMilk? Alternatively, we could @FeedTheBlackCat 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 @BoredBlackCat, so we could also try @PlayWithTheCat, right?
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?
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 @TimeSquareMap be a solution? It is indeed! Now obviously, @TimesSquareMap would be a solution as well (and so would @TimeSquareLine and @TimesSquareLine), but your path will probably cross Times Square as well, so you could just go @ToTimesSquare as well.
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 lie, 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 @TimeSquareCake or @TimesSquareCake. Could it be…? Is it…?
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 @typeform 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: #TimeSquareCenter, #TimeSquareCircle and #TimeSquareLine.
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 Ball, too. All winners have been contacted. The winners are:
- Typeform has won a roundtrip to New York and the full Smashing package (took 53 mins to find the solution),
- Indri Kenens
- Alecsandru
- José Luis Almagro
- Gregor Terrill
- Emanuela
- inkterina
- Chuck Moulton
- Velja Matic
- Mark Senff
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
Just like the last time, we worked with talented Guillaume Kurdjian on a series of animated GIFs 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.
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.
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.
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!
Further Reading
- Smashing Mystery Riddle #3: Have You Figured It Out Yet?
- The Smashing Mystery Riddle #4: Have You Figured It Out Yet?
- The Smashing Mystery Riddle #5: Have You Figured It Out Yet?
- The New Smashing Mystery Riddle #6 (Failed): Have You Figured It Out Yet?
(vf, mrn)
