3 Words: A case study
With the first version of 3 Words almost finalised, I thought I’ll write my account of the process of making the game, including our inspirations, process of design and development and other interesting tidbits.
How it all began
The history of the game begins in a seemingly normal YouTube session of watching talk shows. I was watching an episode of The Late night show with Jimmy Fallon where he was playing a game called 3 word stories with Benedict Cumberbatch. The game involved each of them taking turns making a story, 3 words at a time to get the other person to guess a word that one of them knows. It was hilarious to see them try and guess the word and it struck me that this could make for a fun game for mobile. I immediatey went ahead and told my two best friends, Ashiq Muhammed and Aishwarya Nair about the idea and they both seemed really appreciate of the idea and before I knew it, we had a team of creatives, designers and programmers.
An MVP is born
So an MVP (Minimum Viable Product) is a term used in the startup culture for the smallest possible prototype possible that can be made to show off an idea and how it would work. So for us, an MVP consisted of the three of us, a group chat on WhatsApp and a notes application. Yup, thats it, no fancy prototyping software, no design or wireframes, and no servers or even a single line of code. In order to see if the game could work, we wanted to try out how it could work, what would be the mechanics involved and how the game logic would work. So one of us would note down a word in the notes application, and take turns to make a story three words at a time until one of us guessed the word. Right off the bat we noticed that without any restrictions, it was possible to guess a word pretty quickly.
So we came about with the idea for taboo words- words that would be predetermined that you wouldn’t be able to use while getting the other players to guess the word.
Going with the theme of the game we started off with three taboo words to make it interesting enough. We then thought of different scoring mechanisms, tried playing the game with two players and three players to see how that changes the game. This was when we discovered we would have to pick an option for games with more than two players and this also became a way of scoring points.
An MVP (Minimum Viable Product) is a term used in the startup culture for the smallest possible prototype possible that can be made to show off an idea and how it would work.
Getting framed
Now with the idea for the game and it’s logic fairly finalised, it was time to get to the nitty grittys. Nope, we still haven’t got to a coding yet, there’s quite a bit of work to be done before that my friend. Firstly, we needed to decide on the schema for our datastore. Now this game being a multiplayer game, we had to have a single game state that was synced across devices and we had to make sure the latest version of the game state was pushed to every device as soon as it was ready. Now whats a game state you ask? Well, a game state is a snapshot of the current state of the game (Duh right?). It stores data like what who all are playing the game, whose turn it is, what are the players score right now and so on. For example, in a chess game, the game state would contain the position of all the pieces on the board, the pieces that each player has killed and collected and whose turn it is right now. It could also contain metadata like when the game started, and how long has it been since the last move in case of timed matches.
In our case, we employed the use of a service called FireBase for our database. I cannot recommend it enough! It’s a platform to create apps and the beauty of the system is it keeps your data synced with the DB automatically without having to code any of the upload/download, transactions and concurrency logic yourself. We were also lucky in that they have support for cloud functions, code that runs in the server when some specified criteria is met. This allowed us to create what we call a watchman. This system is responsible for keeping the game going. It starts the game when everyone is ready to play, awards a victory when someone guesses the game right, sets the time when the game started and all that. This allows us to maintain consistency in the game state, even if the players have varying internet speeds and devices. It also allows us to make sure that you cannot hack the game and award yourself points as the watchman is the only system that can award you points in the game.
Remember, we still havent written any code yet, this was all done on a notepad with a pen.
In our case, we employed the use of a service called FireBase for our database. I cannot recommend it enough!
Looking pretty
At this point, we were ready with how the game would work and all the details we would need for our game state, we were ready to get designing. So I load up my favorite UI design software, Sketch. Again, cannot recommend it enough. I opened up a tab to go through Dribbble, a website for show and tell for designers, to look for inspiration. I was heavily inspired by the shadows, the parallax effect and the colors of the following shot by Matt Thompson that I decided to use that as the basis for the front page of our app.
I then decided to design the rest of the game using this front page as a theme. So I went with a two tone look for every page, white and a dark blue with ample white spaces, a light blue as an accent colour, clean and bold typography, and large, dull shadows to give it some depth. I also used the parallax API in iOS to give it an added dimension and seem like the interface is responding to you.
Also the original front page of the app is now being scrapped in favour of a design that would show more data at a glance due to more categories being added and it getting increasingly difficult to find the category you’re looking to play.
Finally starting to code
At this point, we are ready with design mockups of all the pages and the logic for the game and the datastore schema, time to get coding! Being an iOS developer, I decided to go native for that platform using Swift 3 and UIKit to create the app. But since our Android developer was not available at the time and none of us knew Android well enough to create this app in Java, we decided to take a different approach. We were sure we didn’t want to build the app in a webview as it would have been extremely slow and laggy and would not give our players the experience we wanted. So we decided to take a gamble and go for React Native. React Native is a framework built by Facebook that builds on top of their existing React framework by using the native OS’s views and other low level elements to render, leading to blazing fast performance for an app written in JavaScript. We were apprehensive to start work with a framework from Facebook as we were already burnt before *cough* Parse *cough*. Also I was extremely doubtful as to how much performance we could squeeze from an app written in JavaScript. And I have to say, React Native blew us away. We could get native feeling and performant apps that felt right at home in Android written in JavaScript. I know you can write cross platform in React Native, but this time, we just used it for Android but I will be sure to try it on iOS for our next project.
For coding the app, all we had to do was import any of the libraries we needed like Google Sign in, Facebook Sign in, Firebase, Image caching libraries and so on and hack away at the keyboard till it was ready.
And I have to say, React Native blew us away. We could get native feeling and performant apps that felt right at home in Android written in JavaScript.
And we were ready to launch
And on the third of June, 2017, 3 Words was live on both Android and iOS. On the first day of our launch, our amazing friend Anjana Soman went ahead and created a group on WhatsApp for players to find a game that’s running right now. This group was a godsend because it had the greatest group of users and friends you could ever hope for. They kept playing the game, no matter how many times it crashed or got stuck (forever grateful to you guys for that), and gave us constructive criticism, suggestiongs for the game, bug reports and helped fill up our game database with more words, taboo words for existing words and new categories. Here’s a small list of new features that we built in the app based on suggestions from the group’s members:
- A lobby system so you can play with anyone around the world if you don’t have any friends with you who are free to play with you.
- More than 3 taboo words.
- An option to view the word in the middle of the game as the new set of taboo words were hard to memorise.
- A profile page to see how many wins you have and how many games you’ve played.
- Badges for user achievements.
So as you can see, that is a lot of help we’ve got and most of the suggestions and bug fixes aren’t even listed here. We really wanted to create a token of appreciation for these supporters and so we have honoured them in our tutorial page.
Where are we at right now
At the time of writing, it has been 12 days since we launched and we are already at 222 authenticated users! Users play an average of 10 hours of 3 words every day combined and this number is steadily growing. We are currently working on the biggest update since the game launched with a redesigned front page, new categories, a new global lobby, lots of performance updates and bug fixes to make the gameplay the smoothest it’s ever been. The server code has also been getting tweaked everyday to make it bug free and much faster than ever before.
So in conclusion, 3 words has been our most successful endeavour to date, with the fastest uptake we’ve ever had in our apps and the most time being spent in the game. To all those who have downloaded the app, rated it or played it, you have our endless gratitude and we will be working relentlessly to make the app even better and smoother to make it a really enjoyable for everyone. To those who haven’t got the app yet, do please give it a try, you can find the links to download it at https://3words.onvo.in. I will be writing more about our experience soon! Namaskaram :)
