Hope everyone’s doing well. In this week’s Quote Codes Diaries, instead of diving deep into design and tech details, I would like to have a little heart-to-heart about why we chose Quote Codes to be our first App.
Now that we’re almost 2 weeks post release, our stats have exceeded our initial beliefs. We thought Quote Codes was never a mass audience game and that it would appeal only to a smaller fragment of the general population
From a traditional game development point of view, Quote Codes would be a rather stupid idea because we have essentially blocked out all non english speaking markets. And within the English speaking markets, it isn’t a game for the general masses. It is for those who love words, who love quotes, who love puzzles. We intend it to be for a relatively niche audience.
What we have to do is to keep it engaging. For the ones who have downloaded the game – we want you to know that we value our real estate on your screen. We also know that to remain there, we have to provide for an ever evolving app. That is why we chose to do Quote Codes.
Because we feel we can make it a cult classic provided we maintain high standards. Essentially, we wanted something that can grow. Something that we could update forever if required. New quotes, new animations, new themes – An experience that keeps evolving. We weren’t going for a one hit wonder. We wanted a game that would endear.
That’s a reason we made it free – we were concerned about a passionate user base which will remain loyal over the long term. We hope that Quote Codes has met those initial goals and will continue to achieve our expectations.
Till then please don’t forget to download the game HERE, if you haven’t already. Trust us you won’t regret it.
Quote Codes launched this week! And we would like to take this opportunity to thank you guys from the bottom of our hearts for the love and support you have shown towards the game. Quote Codes has been featured by Apple in over 83 countries worldwide and has broken into top 20 in its category in Canada and UK. We are just so so proud and humbled by the reception. Here is the download link again for the ones who haven’t already (Seriously what are you waiting for?) – https://itunes.apple.com/in/app/quote-codes/id1142929451?ls=1&mt=8
Right, lets continue the story of the game. In the previous blog, Joseph explained about his font choice and preference of a very whimsical and fun font. We thought we had something good going but as we started to develop we realized how wrong we were.
Design and App Flow Failures.
The first step we did was try to chalk out the App Flow of the game. How will the player navigate and interact with the game was crucial. We divided the app into 2 segments.
Main Game Screen (The main gameplay screen)
Game End Screen (The screen that shows the decoded quote)
Tutorial (static tutorial screen that shows the rules of the game)
Stats (stats depicting quotes the player has decoded)
Settings (A settings page)
Credits (A credits page)
Categories (Categories section so user can select themes of quotes)
Sometime on Illustrator and I came up with this mess.
Not making excuses but at the time Adobe hadn’t come out with the XD and our first instinct was to use illustrator from the very go.
So after the app flow we tried putting in the designs on them.
Our initial thoughts were to use the primitive font as main headers in UI which as you can see looks too cryptic and cluttered.
In the previous blog, Joseph explained how he thought the DK Clair De Lune font was perfect for the game. But, as you can see from these designs, though it looked alright, it wasn’t really readable and made the whole game scene quite confusing. Plus Apple’s Human Interface guidelines recommend to have a minimum tappable area of 44pt x 44pt. The keyboard buttons were falling short of the 44pt. Increasing them would make everything look even more cluttered.
Try and Try till you succeed.
Right so after those failures we decided to try another fresh approach, scrapped the whole layout, font and structure and try a completely new way by adding new fonts and icons. We even tried inverting and messing around with the colors this time to see how it looks.
New funky icons
Though they looked fun initially, it just felt too much. The whole concept of solving your favorite quotes was getting overshadowed by the funky design and colors. Plus, this used the Hamburger Menu which apple completely hated and they were right to do so – (Watch from 32 mins on HERE)
So 2 iterations of designs and 2 complete failures but we weren’t about to back down. More on this in future diaries.
Till then don’t forget to download Quote Codes – Our quirky word puzzler featured by Apple worldwide (had to say it again :p)
Quote Codes is a word puzzle game where you unlock your favorite quotes by substituting one letter at a time. In every game, each symbol stands for a letter. Your aim is to guess and decode the quotes!
• Beautiful and addictive word puzzle game. • Decode quotes ranging from all themes like Epic TV Shows, Timeless Movies, Classic Disney, Netflix Binge, Legendary Authors and many more! • Over 85 different themes to play. Solve quotes from Game of Thrones, 13 Reasons Why, Rumi, William Shakespeare, Lord of the Rings, Stranger Things and countless more. • Hand crafted custom animations of each symbol. Beautiful minimalistic visual design. • Completely free to play with minimum Ads. Earn coins by successfully decoding quotes! • Universal app with Facebook sync. Play on your iPhone and iPad and your progress will always be in sync.
It has been one amazing journey and we sincerely hope you enjoy the game. Also, be sure to keep checking the blog for our continuation of the Quote Codes Diaries. We will soon be diving deep into our development process and technologies used in the game.
3 more days until the launch of Quote Codes on the App Store, we are so excited! In Quote Codes Diaries 7: Early Designs we look at our initial design process of the App.
How do we adapt our cryptic word puzzle idea into a digital format? This was the problem that had to be solved.
The obvious thing was that the quote had to be in the center.
Now the main problem was how does the player input the letters? We couldn’t do the traditional keyboard layout because it takes too much space and more importantly, it blocks part of the quote. This was a serious problem that had to be solved. Under no circumstance could we block the quote.
After going through various iterations, we finally zeroed on the current format. The slider input option – we had gotten the idea from the song browsing scrubbing gesture on the iTunes app on iOS.
We decided to add the keyboard on the bottom so that the player has no distraction while looking at the quote. On touching a letter on the keyboard we then added a magnification feedback which was crucial.
The next steps were simple. Showing clues – this was adjusted on the top. I then adjusted the colors a bit and added our cryptic Primitive Font. No biggie.
Then came the fun part – Type. We needed another font for the actual input. We wanted to get something contrasting. The Primitive font was minimal, austere, geometrical. We wanted something whimsical and quirky. We finally settled on the DK Clair De Lune font.
I was absolutely in love with the font. The curves on it just gave it a different feel altogether.
So we ended up with this as the design.
I thought we had something just perfect from a visual point of view. Boy was I wrong. More on this next time!
Till then don’t forget to Pre-order Quote Codes on the Appstore here, it comes out on Jan 18, 2018. Pre ordering ensures that the app automatically downloads onto your device on Jan 18