Creating the user interface for iPhone Apps is a great challenge where we have to break some paradigms and keep some things in mind such as the fact that we have a really limited space to work on, the application has to be as much obvious and easy to be understood by users as we are able to do it. Also, the visual is such an important part, since we have thousands of Apps being sold on iTunes Store every day and grab the customers attention is not an easy task at all.

This time we have a new challenge and everyone at Surgeworks is really excited working on this project, which is called MATHO. It is an iPhone game.

Steve Chase, owner of Education 4 Free, came to us with his MATHO iPhone puzzle game for a re-design and OpenGL ES optimization. The game is pretty cool and has a great potential, I must confess I spent some hours of my day playing the game instead start working on the iPhone game re-design, sorry Boss.

Since I started working to Surgeworks, almost one year now, I had the opportunity to work on tons of iPhone Apps and it is becoming an addiction to me. Well, at least it is a nerd addiction, I just have to find out if it is healthy or not.

MATHO is a BINGO style math game for students, where the player must select the correct answer that is displayed on the game board. Just like BINGO, when five answers are solved in a row horizontally, vertically or diagonally the player wins the game. There are four games, addition, subtraction, multiplication and division. The difficulty level can be changed by adjusting the maximum value of the numbers displayed in the problem.

Although this iPhone game is nice, the visual was not so attractive and re-design the iPhone game interface became our main goal to be achieved. Mauro has coordinated the project, Sergei Inyushkin is our iPhone OpenGL ES senior developer who will be improving the functionalities of the game, Renato Carvalho and I are working on the interface design.

Pre- Production

Renato and I usually follow some steps in all projects that we work together. We started MATHO iPhone game re-design discussing a lot about navigation, accessibility and usability in order to find a solution that is going to give to users a really good experience playing the game. At this part, the navigation flow and the interface elements of the screens were defined. A fast and efficient way to plan and define how things will behave and look is drawing a prototype on a sheet of paper. Doing it this way makes making the changes that might be necessary  much easier.

Some questions on the iPhone games sprites and available OpenGL ES functionality appeared on this phase and were quickly resolved after discussing with Mauro and Sergei.

The Concept

At Surgeworks, most of the employees work remotely. Our team is distributed all around world and using online collaboration tools help us to work together without being at the same office. Dropbox is an amazing one, which allows us to share our project folders with all surgeworkers that are participating on a determined project.

Before starting designing any interface design project, we first do a research looking for pictures and articles that represents the theme that we are working on. It gives us a series of ideas and helps to find a great concept to work out. We gather all materials into a folder on Dropbox and then everyone from the team is able to give suggestions and participate in the creative process. Also, all the design work that is being done is placed there.

MATHO is an addicting iPhone puzzle game whose target are students aged between 10-25.  Steve Chase sent to us some screenshots of games he believes having a good look that appeals a similar target, which is what he was looking for. The references he has sent used blocks as elements and have a cartoon style. We agreed that it would be a great approach for the game’s target, however we had already thought on an alternative solution that we really wanted to propose. We decided to create both and see which one would fit better to Steve’s necessity.

Both have a great visual appeal, however with very different concepts. The first concept presents the “cartoon idea” using drawings, games, toys and other elements to create the scenario. The second one presents the concept of a school, where elements such as chalkboard, handwriting and chalk were used.

The problem was that all of us, the Surgeworks team, liked a lot both of them. They are great solutions for this iPhone puzzle game design. We agreed that both were suitable for the game audience and Mauro decided to let the client choose which concept will be used.
Here we have the curious result: although the client was looking for something going more to cartoon and childish elements, he has chosen the proposal number 2, which was our initial idea.

His first impression of the cartoon concept was that it may appeal to too young of an audience with the blocks, crayon and bright colors. A sample audience within the iPhone game target also picked the school concept.

We hope you like it too!