Quote Codes Diaries 10: UI and App Designs

Hey Guys,

Sorry about the delay, we have just been really tied up with the launch of Quote Codes on Android! Once again, cheers to everyone who have downloaded and are enjoying our game. It has been an amazing ride.

Now, Let’s get on with the topic! Previously, I previously talked about our design failures and wayward thought process in Quote Codes Diaries 8: Design and App Failures. Today we learn how we turned the failure into success by simplifying  our thought process and getting things in order.

App Flow

It was important to get the app flow right. We ditched the clunky and confusing method of making this digitally and focused on physically jotting it down on paper to get the app flow . Our goal was was to divide the app into 2 segments:

Menu

  • Home Screen
  • Credits
  • Settings
  • Categories
  • Archives
  • Tutorial

Gameplay 

  • Gameplay screen
  • Game End Screen
  • Game Options (Skip, Unlock Clue etc)
Quote Codes Diaries 10: UI and App Designs
We kept things simple this time by taking the traditional route of jotting down the app flow on paper.

UI Design and Interaction

After sorting the app flow, Our next challenge was design and interaction. Unlike most mobile games, Quote Codes gives the users loads of options and screens in the form of Clue, Skip Quote, Categories, Archives, Settings, Credits, etc.  We wanted to give each option its own separate page. Cramming all of them into 1 page would be too confusing.

So how do you add that many pages in the app but not make the UI confusing?

The idea turned out to be ingenious for us.

Quote Codes Diaries 10: UI and App Designs
The simple stacked card system allows us to add/remove pages easily

A simple card system stacked did the trick. This allowed us to make the whole layout of the app dynamic and really simple. We could easily add or erase any page and still maintain the same aesthetic and design.

Next was the the design of the individual pages. Since Quote Codes is a word based game, we wanted to keep everything textual (word based) and to-the-point.

For instance, in SKIP, instead of showing an icon and hoping the user would understand, we decided to add directives with YES and NO button: SKIP THIS QUOTE AND COME BACK TO IT LATER.

Quote Codes Diaries 10: UI and App Designs
Our aim was to use direct questions so the player never gets confused

Similarly for Categories which allows the user to select the various themes of quotes, the design as you can see is really clean and understandable. The Categories are arranged alphabetically and the search bar on top gives the user easy access to search the various themes. Once again selecting a theme will open a drawer confirming your selection in the same “YES” “NO” format.

Quote Codes Diaries 10: UI and App Designs
Categories is one of the main pages of the app. Clean well defined structure was important here.

UI Animations

And then finally it was time to merge them all together. Our aim from the start was to treat the user with subtle and cute animations throughout the app and not just gameplay. Animating the Card menu and the Ui buttons was a lot of fun.

So thats it! Thats how Quote Codes was designed. So far we have covered everything in design right from conceptualization, to implementation. Next Diary will be a treat! For the first time we will have our champion developer Kunal taking you guys through the whole development of the app. Let me tell you, that it is purely brilliant and insightful. Do not miss.

Till then Dont forget to download Quote Codes. It is available on iOS and Android for Free!

Quote Codes Diaries 8: Design and App Flow Failures

Hey Quote Coders,

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.

  1. Game Play
  • 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)
  1. Menu
  •  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.

Quote Codes Diaries 8: Design and App Flow Failures
Even we were getting confused looking at this

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.

Quote Codes Diaries 8: Design and App Flow Failures
This was our first attempt at UI for Quote Codes

Our initial thoughts were to use the primitive font as main headers in UI which as you can see looks too cryptic and cluttered.

Quote Codes Diaries 8: Design and App Flow Failures
Using the Primitive Font as headers in UI made it confusing

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.

Quote Codes Diaries 8: Design and App Flow Failures
Though it looked fun, this design was not at all practical for our word game.

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.

Quote Codes Diaries 8: Design and App Flow Failures
A completely fresh approach with new color options, icons and fonts

New funky icons

Quote Codes Diaries 8: Design and App Flow Failures

Quote Codes Diaries 8: Design and App Flow Failures

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 Diaries 8: Design and App Flow Failures

From The Archives: Thermo Clock Android App

So this is turning back the pages of time when we had just started out. The Thermo Clock Android App was probably our very first venture into app development. We wanted to test the waters as they say.

The idea of the app came while looking at the various methods to depict time besides the standard format (analog and digital). We basically had to show a quantity variation and decided to use the stardard thermometer as our guide.

Thermo Clock Android App Pixel Drop Studios
A Thermometer design is pretty good to depict quantity

Thermo Clock Android App

Taking the standard mercury thermometer, we assigned every hour as the number and added  divisions within the hour. Four divisions of 15 mins or Twelve divisions every five minutes, that was left for the user to choose.

Thermo Clock Android App Pixel Drop Studios
Every hour is divided into Four divisions of 15 minutes or Twelve divisions every 5 minutes

Initially its a greyed out number, then gradually the ‘mercury’ inside it rises which shows the passage of time. Half the number filled meant it is half an hour past, a quarter filled means 15 minutes had passed and so on.

Thermo Clock Android App Pixel Drop Studios
Rising mercury shows the passage of time

The concept was to find a rather relaxing method to track time. (inspired by the Pomodoro technique). Just a simple timer – Set the time and you get an alarm at the end of it, that’s it. A timer that keeps you away from distractions.

Thermo Clock Android App Pixel Drop Studios

The Thermo Clock was primarily aimed as an Android timer. We were going through our old work and thought to check if the idea resonated with anyone out there. Do let us know if you guys think it’s worth pursuing.

Damn, all this just takes us back to the start…(ala coldplay)

 

Do You Think We Should Develop This App?

View Results

Loading ... Loading ...