The Mystery #3 Is Resolved: A Story Of Muffin Crumbs, Shady Characters And Invisible Letters
Email Newsletter
Weekly tips on front-end & UX.
Trusted by 200,000+ folks.
Sponsor OWD on GitHub
Start with a free demo —
Check the frontend report!
Take a break with a 3D game built on Netlify!
We’ve all been there, haven’t we? You find yourself in a coffee shop abroad, sipping cappuccino and chomping a muffin as you realize that your laptop’s battery charge is just about to crush your creative session to dust. Well, perhaps you’ve got your power adapter with you but, of course, it isn’t the right one for foreign power sockets.
So you end up looking around and chatting up with strangers asking for help. Some are more responsive than others, and before you know it, you don’t just have a full battery, but you’ve made a couple of new, surprisingly interesting acquaintances.
As it turns out, forgetting your power adapter is not only a great way to meet fantastic people but also a great strategy to come up with original ideas. In fact, this is exactly how the idea for the new Smashing Riddle was born—in a coffee shop in Zürich, Switzerland—and yes, it was indeed that cinnamon muffin that made all the difference in the end.
Letters Scattered All Over The Place, Like Muffin Crumbs
Animations have a way of drawing attention to themselves. So it’s understandable that a vibrant animated GIF might raise some interest, questions, or perhaps the reasonable concern of friendly strangers. Desperately looking for a charger, I sparked a number of awkward conversations with surprisingly unsurprised, friendly strangers around me.
In the end, as the charger issue was successfully resolved, I found myself sitting behind a large wooden desk, immersed in a profound discussion with a charming, smart math student from Switzerland, and an eager, seasoned engineer from Turkey. It was a fast-paced, inspiring discussion about life stories, experiences, biggest failures and creative endeavours.
As the conversation continued—still sipping those Zürich cappucinos—I caught glimpses of one of the older animated GIFs looping on my screen, and before I knew it, the conversation was all about mysteries, riddles and mischievous animated GIFs. During an intensive, unscheduled, battery-recharge brainstorming session, we came up with a number of interesting ideas, all thoroughly written down, tagged and ready for use. One of the ideas was to play with the letters and the way they would be displayed.
You see, at SmashingMag, we cherish the idea of lasting traditions—be it monthly desktop wallpapers, editorial newsletters or those weird mystery riddles. So in the spirit of tradition, the riddle obviously had to be based on animated GIFs, but we wanted to do something entirely different from changing file names or guessing Twitter handles.
Originally, before my trip to Zürich, we had thought about using a number of invisible semi-transparent “layers” hidden in animated GIFs (erm, hey, we actually should do it for the next one!), and later on we spent quite some time prototyping the “reflection” idea in which a hidden message would be revealed once an actual mirror was placed up against the screen. The latter proved to be quite difficult later on in implementation, especially due to the wide diversity of screens out there.
During the brainstorming session, we came up with an idea to do something along the lines of Scrabble, so the readers would derive clues from a number of GIFs and construct a secret keyword out of the letters discovered in those GIFs. And what if letters were scattered all across the GIFs very much like the crumbs of the muffin were scattered all across my plate? Some letters could be hidden, others would be clearly visible, and all of them would be turned, or flipped, or rotated, or skewed for confusion—very much in the spirit of the “reflection” idea we had in the beginning. That’s one of the ideas I brought back to the office after my trip to Zürich.
A New Mystery, A New Design Challenge
Our previous mysteries required a lot of tinkering and experimentation but, frankly, quite a bit of luck as well. The most important bit was to come up with the right approach. For the new riddle, we wanted to keep things a bit simpler and apparently easier to draw in as many readers as possible without the riddle becoming too annoying after the first few tries.
Of course, the riddle shouldn’t be too easy either, so instead of hiding letters of one single word in GIFs, we felt that hiding parts of a sentence might work a bit better. We needed a twist though, something that would make the riddle a bit more interesting and cause one or two “Aha!” moments. We thought about using lowercase symbols to introduce more confusion but ‘i’ and ‘l’ might look too similar in a small resolution, so instead we looked specifically for letters that could be confusing and decided to rotate them or skew them until they actually become confusing. It wasn’t the only twist though, as you’ll see later in the article—a few fine adjustments and twists were added during the test phase later on.
So when Paul Boag’s new book was about to be published, we jumped right into the idea, came up with a sentence and scattered parts of that sentence across three animated GIFs. Each GIF contained a few scattered letters (all uppercase) that readers were supposed to use to build words. Once you put the words from all the GIFs together, you’d be able to create a sentence—and, of course, no letters should be left unused. So once the sentence is constructed, it had to be tweeted @smashingmag using the hashtag #smashing. Of course, we’d also hidden a few clues in the image captions under each animation and in the corresponding file names.
Easy-peasy? Well, let’s see how it works, and what hidden clues those weird animations contain. (But seriously, who would put skewed letters on the floor and walls anyway, right?)
1. “Change”: Get Out Of That Desk Already
You know it, and we know it: nothing is more frustrating than stubborn management. Usually, changing workflows, processes and culture seems to be impossible, but perhaps something can be done about it after all. At least if you trust the hint provided for the very first animated GIF.
Well, if you are playing Scrabble or any other word-building game, the first thing you have to do is gather everything you’ve gotc. So alright, we have to find three words in the GIF. Let’s collect the letters first, starting from the left-bottom corner:
TCRIEZDOU
Alright. Well, we are smart, so why don’t we just use an online anagram solver to make the sense of these letters? We don’t want to do it manually, right? Hmmmm. No result. It doesn’t make sense. That’s weird. There must be a trap. Perhaps we are missing something: we could argue about “O”, if it’s actually the letter ‘O’ or the digit ‘0’, but apparently we can rule out digits since all characters are supposed to be uppercase letters. But wait a second: if you rotate “Z” through 90 degrees, you end up with an “N”, right? So perhaps the combination is different:
TCRIENDOU
Ah, that’s better. Looks more like English. We’d better watch out for those traps. Okay, if we play around with it, we can figure out that the word hidden here is… NORDIC TEU, erm, TCRIONDUCE, er… aha! INTRODUCE! Nailed it.
Okay, it wasn’t too hard. So what about the two missing words? Same game, same rules. Let’s collect the letters first:
INTRODUCE HCANEGDATIGIL-=
Mmm. Wait, wait. Only letters are allowed, so the yellow sticky notes with an equals sign and the dash are probably another trap since only uppercase letters have to be considered. We can remove them:
INTRODUCE HCANEGDATIGIL
Okay, it smells… easy. Probably the best way to avoid mistakes in discovering the words is to move letters around until they start making sense, probably with CMD+X and CMD+V. Right, right. The shiny new book on the table can’t just sit there on its own—what’s the title again? Digital Adaptation. Ah wait; wouldn’t “DIGITAL” fit nicely here, and in fact, the letters are right there, aren’t they?
INTRODUCE DIGITAL HCANEG
Well, it’s time to do something about that frustration, right? Probably just the right time for a change?
INTRODUCE DIGITAL CHANGE
Bingo! Well, at this point we know that every animated GIF contains a couple of words, but it looks like they might be connected on their own as well. We might try to distribute the letters in an other way, but this solution does look quite fitting. Okay, let’s hope for the best and move to the next one.
2. “Convincing”: They Listen But Don’t Move
Well, perhaps you still have the enthusiasm to convince your colleagues about a more pragmatic, effective workflow. But is it really usually colleagues who need this kind of convincing?
Oh well, at least it looks like those people in the meeting are paying attention to what that guy is so passionately explaining. Again, let’s collect the letters scattered over the table first, and we should keep the variations in mind as well: “M” could be a “W” and “Z” could be an “N”, and “L” in left upper corner looks surprisingly similar to a skewed “J” (by design or by mistake?). So we’ve got:
AHP[L/J]EEA[M/W][Z/N]ETG[N/Z]
Oh wait, there is another one, in the upper left corner under the plant! Is it “M” or “W”? Let’s consider both options. Okay, that’s freaky:
AHP[L/J]EEA[M/W][Z/N]ETG[N/Z][M/W]
That’s quite a few combinations. We must be smarter about this. Let’s look at the image caption. The caption talks about “convincing them”, but what does it refer to? Ah, stubborn management from the first GIF. Perhaps the guy in the GIF is trying to convince… managers?
MANAGE HP[L/J]EET[N/Z][M/W]
Umm… almost. So we have neither “R” nor “S” here, so what else could it be? Ah! Perhaps management?
MANAGEMENT HP[L/J]E
Nice! Well, there aren’t many four-letter-words with “H”, “P” and “J”, so we probably should stick with the “L”. Could it be… HPLE, or to be more precise, HELP. Well, it sounds about right, especially since “help” is also mentioned in the image caption to that GIF.
MANAGEMENT HELP
Good, good, it wasn’t too difficult after all. Oh snap. It was supposed to be three words. Did we miss something? Let’s take a closer look around the room again. The presentation chart has a few graphs on it, doesn’t it? Circles, bars, a pie… but that pie, there’s something suspicious about it! Doesn’t the piece of the pie look like an “A”? An invisible “A”, maybe? Well, it is…
MANAGEMENT HELP A
Alright! That’s a long shot, but let’s go with it for now, and let’s proceed with the last one.
3. “Difference”: It’s Going To Be Just Fine
Alright, we know how it works by now. Look closely everywhere on the image and gather all the letters first: that means looking on the carpet, under the chair and under the plant. And then double-check everything to make sure that we don’t miss anything. Also, we know that we can’t trust the colours and the position of letters, they didn’t help us in the past but instead confused (and annoyed) us a bit.
We know that the words on the floor belong together, in one word. Let’s start with them:
ARE
Oh well, there aren’t too many options here: it could be either “ERA” or “ARE”. Could it be that easy? Well, let’s keep it this way for now, and gather all the other letters, from the left to the right:
HEFRE[M/W]KCTDE[N/Z]FIEEA
And we have something that appears to be a blank piece of paper. What’s that thing now? An invisible character? Or a sign that a character is hidden? Or an empty space? Also, could something be hidden under the book, or behind the picture, or on the other side of the chair? OK, OK, let’s not get paranoid here. Deep breath. So we’ve got three words to figure out here.
Well, it might take a while, so let’s watch out for clues. The guy in the chair seems to have it all figured out. Perhaps we should check the larger preview of the image. Oh snap, its file name is… difference.gif. Is it… could it be…?
DIFFERENCE H[M/W]KTEEA
OK, this sounds about right. The combination of available unused letters doesn’t leave that many options: WEH KTEA, MATE HKE… Hmmm. Well, since the character in the chair is victorious, and it’s all about difference, perhaps he… made it?
DIFFERENCE MAKE HTE
Better! We’re almost there:
[ERA/ARE] DIFFERENCE MAKE THE
Phew, now, that was quite a journey! But wait a second! That guy passing by, giving a thumbs-up to the character in the chair… Doesn’t it look like an “L”? The image caption says that the words on the floor belong together, but it doesn’t say that they build up an entire word. Well, if we added “L” to [ERA/ARE]… Oh:
REAL
“REAL”! So perhaps it’s about making a real difference in the end. OK, let’s keep it in mind for now.
Yes, of course, there might be many solutions and we would accept all of them if all letters were used, but after 45 minutes of collaborative brainstorming we discovered that it was highly unlikely that you could construct an entirely different, perfectly meaningful sentence by using all letters scattered across the GIFs, leaving no letters unused. Now it’s time to bring all these words together and try to construct something more or less meaningful out of it.
“Solution”: Making Sense Of It All
INTRODUCE DIGITAL CHANGE MANAGEMENT HELP A DIFFERENCE MAKE THE [ERA/ARE/REAL]
Okay, well, it doesn’t look too scary! It’s probably as easy as something along the lines of “Help the management introduce digital change: make real difference.” In fact, yes, we would accept all solutions which include “ERA” and “ARE”, but a sentence shouldn’t be just a loose pile of unconnected words. These are all the options which you could build out of this mess of letters:
- Help the management introduce digital change: make a real difference.
- Help management make the difference. Introduce digital. Change era.
- Digital era: introduce a change, help management, make the difference.
- Manage digital era change, introduce a plan, make the difference.
So here we are. A little journey from muffin crumbs to letters scattered all over the place, shady characters and a few invisible characters. Time to reveal and reward the winners.
Winners!
It’s showtime! Surprisingly to us, the riddle didn’t take much less time to resolve than the previous ones. First place was earned by the person who was quickest and the closest to solving the riddle, i.e. have found all the right words in the riddle and leaving no letters unused. Please notice that since nobody discovered the “REAL” bit, we had to relax the rules a little. We raffled the other prizes across the first people who tweeted a correct sentence, and tried our best to exclude copycats. 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 first perfectly correct sentence with no letters left unused was tweeted by Dorin Moise from Brussels, Belgium, one hour and five minutes after the mystery went live, with: “there, make a difference: help management introduce digital change.” It’s not quite correct but it was the fastest and the most precise tweet. Congratulations, Dorin! You just won a roundtrip to our lovely hometown Freiburg for the Smashing Conference Freiburg, a stay in a fancy hotel and a few Smashing Books. Yaaay!
And here are the other winners:
- Paul Rose (1h 2min): “Make a difference, help management introduce digital change.”
- Braunson Yager (1h 17min): “Help management make the difference, introduce the digital era.”
- Charlie Park: “Introduce a digital era; help management make the change.”
- Razvan (3h 21min): “Introduce digital change: help management make a difference there.”
- Livia Labate (Washington DC, USA): “Help management introduce digital change: make a difference there!”
- Eva Kavaliotou: “Help management make the difference. Introduce digital. Change era.”
- Ed Hicks: “Digital era: introduce change, convince management, help make the difference.”
- Andreas Busschop: “Make difference. Help introduce the digital management era.”
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 two times, we worked with talented Guillaume Kurdjian on a series of animated GIFs for the riddle. This time the discussion thread was a bit shorter, and after thorough conversations and prototypes, we ended up with quite a number of 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.
As it always is with a public hashtag, it can be quite difficult to separate between the “real” tweets and copies of the tweets. We didn’t choose the hashtag #smashing by accident since it is a quite “messy” hashtag on Twitter, but it wasn’t good enough since we saw lots of weird activities going on, with people reusing tweets 1:1 which we of course didn’t accept. We did look very closely at the dates and profile and activities of every winner to prevent copycats from winning. (We probably will go with #cats next time or even better—will challenge you to construct the “right” hashtag on your own).
The first GIF wasn’t really a problem for anyone. However, for some weird reason the word “convincing” started to pop up in tweets, although the letter “V” didn’t make its public appearance anywhere—in neither of all those GIFs. Quite a number of readers discovered “game plan” in the second GIF and was confused about the number of words that would be hidden in the second GIF if “game plan” actually was hidden there.
The truth is that “game plan” wasn’t the part of our initial plan, so we take no responsibility for massive headaches or confusion caused—sorry about that!. Also, apparently Wordsmith encountered server hiccups 30 minutes after the riddle went live, but of course we don’t take any responsibility for it either.
The most trouble was caused by the second GIF which caused quite a lot of headache for many readers. You could go as far as trying to decode the movements of the animated character who could be using semaphore, a marine alphabet. This wasn’t the plan either.
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 next round? ;-) Stay tuned!
Further Reading
- The Smashing Mystery Riddle #7: Have You Figured It Out Yet?
- The Ultimate Guide To Cloning In Photoshop
- Hand-Sketching: Things You Didn’t Know Your Doodles Could Accomplish
- The Smashing Mystery Riddle #8, An Emoji Edition
(vf, mrn)
