<– Previous Post

Now that I’ve discussed parts of the development with decision making, marketing and scheduling with the documents. Now I will discuss something more akin to the User Interface and the aesthetics of the game. Something that I am familiar with the details since I worked on this part the most. This has its own part in the development because this has more for me to unpack that warrants it’s own progress report part.


User Interface

Now, originally, I researched a lot of user interface in the game for mobile games. There are plenty of research material I can find in the game with how they work. What the menu looked like, what the overall selection looked like and how you interact between them. I will cover each part and explain in detail what I did for each process and hopefully you’ll learn something out of it.

The Main Menu

On the main menu, I decided to make it as simple as I can. With only a few interactions, direct interaction between selecting a level, going to the shop and adding credits, we tried to make the interactions simple, clear and aesthetically as pleasing as possible.

So what I did was made a mockup of it, it goes as follows:

Originally, we had a small base as follows, I decided to make minor changes from the fonts to a more direct format. I also removed the social media sections because we ended up scratching that part off the game.

The base was made to simply add two simple things on it. What changed was adding a direct shop UI in between the setting and the achievements button. This makes for easier access between the menu and the shop.

After developing the game further, I planned to have animations done when pressing the settings button. And I was able to do so, format them and work them out with a script and an animation tutorial.

This is the semi final result, we decided to remove the social media buttons at a later point in time due to not being able to complete the social media integration.

Final Result

The Level Select

So while researching a level select screen, I had a look of what it’s structured as. I noticed a lot of interesting selection of areas which we can use as a base template for the game.

Base examples and inspirations are shown below:

Image result for candy crush level select

This format is more favourable since the themes are more appropriate and the levels are more structured in the way that would help blend with the aesthetics as well as making sure it fits overall, marketing wise as well. In fact, based on our persona of an 11 year old, this aesthetic choice seems fitting in a way, making it look as friendly as it can.

So the design concept is made:

Originally, we wanted something more akin to camera control, with the level buttons are dragged based on your thumb, using them to drag the camera upwards revealing the later levels. This idea was scrapped due to the programming issues and the structure of the game preferred on a five by five basis. We also added the heart on the top right indicating the number of lives you have and play out based on the format I researched upon. The examples shown up above are left corner while ours was on the right corner, with the shop section and the home section at the top left corner. The idea was that we wanted to position them that way. Less a strategic choice and more of an aesthetic one. But positioning can be subjective depending on UI structure.

The Shop UI

The shop user interface has a lot of changes to cover. We originally wanted to have extra features in the game, but ended up cutting a lot of it out due to time constraints. So we only ended up with two features, the life feature and the coin (in-app purchase) feature.

In addition, we did do a lot of changes from the sketch format as well. Some aspects were more akin to the structure base that’s less a folder and more similar to just interaction between the button sections and showing the currency layout.

But in the post release update, there will be some changes, due to aesthetic differences as well as lack of clarity in some of the price for the game such as life, which was supposed to say 100 on the side. This lack of foresight is something that should have been rectified earlier, but we were pressed on many other issues for this to gloss over, which by technicalities, is an excuse. A horrible one at that.

So lesson for this, try and be more concise and clear before you produce something.

Game UI

Game Over Screen

We changed a few things for this, such as how much coins are earned as well as having the layout not taking up the entire screen too much, fitting for the game. Although it could be debatable that the screen may be too small.

These are some of the interface element changes I decided to design aesthetically. Change wise, I would explain more, but these should be enough examples for you to start considering your own design and how it would overall work on the scope of things.

With this, I can conclude that some of the changes that are made here are based on what issues we come across, thus requiring a lot of adapting to the changes to do. If you’re going to work something like development (especially in games), these are the types of things you have to deal with on a basis. I haven’t even gotten around to physics and that would be on another level of frustrating simply because of the code required to complete them.

Last part will cover on reflections and further aspects of the game production that I missed, from development to production scheduling and even testing and analytics.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s