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!