The Making Of World Hockey Championships Update 2 – More Menu Design and Device Challenge

WHC-The-Making-Of-World-Hockey-Championship

I have made some more progress on the game user interface in the last couple of weeks.  We have completed more of the user interface layout for the store, tournaments and have overcome a layout issue.  I will show you exactly how we solved it.

 

We did go back and make some improvements from the last milestones of this project.  There is a lot of back and forth as different parts of the app impact each other.

We added a store to the game for users to buy skill levels and chat packs with their coins/bucks and can purchase in-game currency.  The World Hockey Championships is using a two currency system with coins and bucks which is very common in many games.

Our graphic designer thought it would be a nice touch to add tabs at the side to go between the different parts of the store.  Check it out –

Hockey Game Coins Store

I also added bucks, skills, chat packs and promos tabs.

I am hoping that this will be more fun and let people compete at different levels.  This way, like a hockey game where a team can change their line halfway through, you can change your skill sets midway through a game.  It lets people step it up when playing tougher players and makes it more fun.

Hockey Game Player Skills

The Challenge

We faced the issue of different screen sizes and ensuring the game looks good on both phone and tablet.  When using the iPhone, it is a longer screen than when using an iPad.

The Main Menu would look like this on the iPhone.

IMG_1872

and like this on iPad Air

Screen Shot 2016-07-26 at 4.15.22 pm

On the iPhone, the user can see three full buttons but the user cannot tell there is a forth button you can scroll too.  You can see the third partially on the iPad.

Each side has a different resolution and we need to account for many of them.  For my testing, I took the iPad Air and iPhone 6 Plus.  On the iPad, the image is 1024 x 768 and on the iPhone 6 Plus the image is 1920 x 1080 (resource on resolutions – http://www.iosres.com/index-legacy.html) which means that the screen is about 33% wider on the iPhone 6 Plus than it is on the iPad.  The iPad size overall is bigger, however, we need to keep in mind the ratio of weight and width.

This issue applies to many devices, especially Android where we had to look at both the width and the height.

The Solution

In order to fix this, we kept changing the positions of buttons, the width of space between the buttons on the main menu and trying to get it to work.  I had input and testing from a programmer, graphic designer and we worked back and forth to see how we could resolve this.  Once we got it right on the iPhone, it would not work on the iPad and vice versa.  In order to fix it, we had to reduce the size of buttons to about 90% and this made it more appealing to different devices.  We wanted the user to know they can scroll, so they had to see some part of the third or forth button.

The game originally will have only two buttons for one on one play and tournament.  The third and forth button are there if we want to add more features later.  I am still thinking about how we can keep the menu flexible to add more later.

For future projects and this project, we will keep this in mind that when building out the graphics and layout of a screen, we need to remember that not everything will work the same way.

On the two main menu pictures above, if you look at the smaller buttons on the top (profile, free coins, coins, bucks), you may notice the space between te profile and free coin.  This space is needed or the buttons will clash on devices (like iPads) that are not as wide.  It is not based on size of the device, but how far each button is from the sides and other buttons.

Also…

In this past week, I did reach out to some other app developers and started discussing what else I would need to do for this project and got a lot of feedback around user testing, quality testing and automated testing.  I did set up a page for beta testers, now realizing there are many more types of testing we need to do as we progress, and that testing can happen at many levels.  I also learned that the marketing stratgey will be a big learning curve and costly.   If you are with the media and want to write a post on us, I would appreciate that.

You can send us an email or  your app to be featured to – appstorepromotion@apple.com and to make sure marketing is done right appstoremarketing@apple.com.

Beta tester, I would appreciate that – http://mokoolapps.com/blog/world-hockey-championship-beta-testers

I will keep you posted on the progress.  Please let me know if you have any questions at mukul@mokoolapps.com

Cheers,

Mukul

The Making of World Hockey Championships Update 1

WHC-The-Making-Of-World-Hockey-Championship

This is the first update for the World Hockey championships.

I have been working on the design phase of the game for over a year now. A month ago, we started the programming part.  Starting with game design, the graphic design last year and building a framework for my vision of this game.

The challenge was to find good programming partners who can make our vision come to life. About a month ago, we added a team of programmers who have done a fantastic job so far.  Right now we are a team of 7 (3 programmers, 2 graphic designers, 2 business/marketing/game designers).   I am guessing we have put 2,000 hours in so far and got another 5,000 hours until its completed next year.  Wish us luck.

The goal of this game is for people who want to spend a few moments shooting puck and have a fun, real-time experience. The average gamer has changed, they don’t sit and play for hours, they play for minutes.   They don’t need a deep level of sports.  You don’t need to know the players or build a team. Play for a minute or keep playing for an hour. As you get better, play for more coins against people who are at your level around the world. The real-time experience makes it more fun or you can also choose to play offline.

Now you know the vision and background on how we got here, let me show you what we have done so far. We are working from the outside in, starting on the menu, login, etc.

Update 1

The splash screen when you enter the game has some cool moving lights while the user waits to connect.

World Hockey Championship Splash Screen

You can see that there are two game modes – one on one OR tournament. You can play real time against other people. We have also added other features to make the game more fun including coins, bucks, mini games, missions, etc…more on those as we develop.

 World Hockey Championship

The first of the two games plays in one on one. You can play in real time against another person. If no one is available, you can play against the computer. You choose the amount of coins

 Hockey Game One on One Multiplayer Game

The second game mode is playing in a tournament style. Where the player can play against other players.

Hockey Multiplayer Tournament

The game will have daily missions to earn coins. There are also 3 ongoing missions at all times and life time achievements like win 10 games.

Hockey Game Daily Missions

Stay tuned. I will keep posting as we progress in our development of this game. If you have any suggestions, please reach me at mukul@mokoolapps.com

Cheers,

Mukul