Obviously the largest group are nouns. They’re easy to describe using visual language. In some cases we had to use color and arrows to pin point the exact thing. Like in words: bangs, cape, petal or bracelet.

 

Second group are adjectives. For all of them (except colors – they're a different category) we decided to use one color set and show them in pairs on the principle of opposites. Yellow color is always pointing to the one in question like on image below: clean, strong, beautiful and poor.

 

Words describing colors on the other hand are always shown as a blob with no stroke on grey background:

 

There are also verbs in Ba Ba Dum. We’ve created a separate color scheme and the activity is almost always performed by the same guy who we call Stefan. We didn’t want to show Stefan peeing or pooping so for those we used a dog. In some rare cases we had to show two stages of the same activity to make it more clear.

 

There are also other subgroups like countries or body parts. You just have to play and find them on your own. 

This seems like a straightforward task but in real life it was not that simple. It’s super easy to make a lot of mistakes when you’re translating just single words. Text that has logic and sentences is much easier to check for errors. So we had to do something about that.

The first translation was always done by a native speaking language teacher or professional translator. The translation is done in an Excel file. Each row has image of the word with english and polish translation. The important thing is to mach translation to an image and to use commonly used words.

After that we import translation to database and we ask 2–4 people to verify the translation. We’ve build a custom web app just for that purpose. Words marked as incorrect have to be commented by a verifier.

 

This is how the app looks like for verifiers. They can see only selected languages.

All of our wonderful voice actors are native speaking, professional readers. Some of them are also language teachers or radio news announcers. This is why they take great care of pronunciation and the reason they sound so awesome.

 

We’re recording at Polish Radio Studios and we’re lucky to work with Grzegorz who is our sound producer. He has perfect pitch and hears things we didn't even know existed.

 

He is not only recording all of the words but he’s also preparing every single audio file. Making sure they’re all nicely leveled with no clicks, pops or choppy endings.

 

It took us 10 months to coordinate the translation and audio recording of first nine languages. It took us only 1 month to add three more. Learning from experience we now know how to do it much faster and smarter.

Drawing is a major part of our daily work. All of our books (and most games) have hand drawn illustrations and (sometimes) typefaces. We always draw on paper because we find it to be easier and faster. Maybe it’s because of our background at Academy of Fine Arts in Warsaw where graphic design was just half of our education. The rest was drawing, painting and traditional graphics arts (like lithography, metal techniques or wood cut).

 

To draw images for Ba Ba Dum we used thin layout paper and black uniPin and Tria markers.

We scanned the images and used Adobe Photoshop to remove all mid tones.

 

We didn’t really want to use bitmaps because we would have to store different sizes for different devices (for example small ones for phones and large ones for desktop computers). Usually there is not much of a choice but this time the images could be easily represented as vector graphics. So we traced all of them in Adobe Illustrator and saved each image as a separate black and white SVG file.

 

Vector images are not only scalable and lightweight but there are also very easy to manipulate. To change a color you just have to type different value in the “fill” attribute. That’s why we can store all images in a black and white version and simply assign color id to each word in the game. When we want to adjust some of the color sets, the images themselves are not changed at all. 

 

Color scheme is assigned dynamically to SVG using javascript.

One of my favorite part of designing and programming is implementing hidden treats. I love to refine details that only a bunch of people will ever see. That’s why I care about my error pages.

 

You’ve probably seen them around. The most common to ran into is 404 (the page is not found) or 403 (access to this page is forbidden) but there is a full list of them. On some pages you’ll see a default browser information but you can add custom pages pretty easily. We used .htaccess file to do that. 

If you want to access a file that is forbidden for you to see you'll get a 403 error.

 

If the page that you're looking for couldn't be found you'll see a 404 error.

 

You'll see this message if your browser is old and doesn't support modern HTML5 and CSS3 standards that are needed for Ba Ba Dum to work (like inline SVG, canvas element or CSS transforms).

 

You'll see this guy if we need a break for a short maintenance or you got a 500 error. We used it only once since the lunch of Ba Ba Dum.

 

If our server is overjoyed with too many users you'll see a 503 error. Generally, this is a temporary state and since we migrated to new servers provider a few months ago we can easily sustain a lot more users.

And finally coding and testing. 60-70% of all time we've spent on making Ba Ba Dum.

A lot of JavaScript , heavy use of canvas and SVG, CSS transitions and transforms. On server side we're using PHP and MySQL.

For more details about component we used check our humans.txt.

Tests of the game. You can play it on your computer, phone or tablet.

Once in a while we’re being ask about words selecting algorithm. How does it work? Do we have any?

 

 

Giving a wrong answer to a unlearned word doesn’t change it’s status.

 

Giving a wrong answer to already learned word changes it back to unlearned one.

 

No matter how many learned words there is in the big pull there will be always only one in the short list.

 

Saving learned words works within game/language combinations. Let’s say you’ve learned 20 words in polish playing game mode were you have to choose one image. Then you switch to other game without changing the language. Those 20 words you’ve learned won’t be learned in this new game/language combination. Thus you can play the easier mode at the beginning and switch to the harder one and check if you can for example type the words you already answered correctly before.

We received some very cool ones like Awwwards, Adobe Cutting Edge and Favorite Website Award twice – regular SOTD and MOTD. We were also a official nominee (one of five) to The Webby Awards.

 

 

Ba Ba Dum was featured on dozens blogs and online magazines.

 

But the most satisfying feedback we got were emails, tweets an other messages from teachers and students of foreign languages from all over the world. Photos like the one below really give us a lot of energy to continue our work with Ba Ba Dum.

Photo from Barbarze Majewskiej-Kosik