Keep Craft – Adapting the Browser Game UI to Mobile

Keep Craft – Adapting the Browser Game UI to Mobile

The most challenging aspect of bringing Keep Craft to mobile, without a doubt, was redesigning the UI. The browser version’s UI takes full advantage of the fact that most players view it on a large computer screen. This is great for gaming on the PC, but this same UI would be a disaster when shrunk down to the scale of a mobile phone.

Those of you who have played Keep Craft in the browser no doubt understand this challenge, but for those who are unfamiliar with the game I encourage you to check out this GIF for an example of how the UI might look in the very late game. Pretty hectic huh?

We spent a couple weeks playing around with UI concepts (most of them getting tossed out) until we found something that finally worked.

pasted image 0


Top Resource Frame: At its core, Keep Craft is all about resource management. Everything you do in the game either costs or creates resources and so it was essential that the player can see their resource count and production at a glance. The player can switch between their two resource types, raw & crafted, by tapping the arrows on the sides of this frame. For ease of use we have this window automatically switch to crafting when the player is creating a crafted item.





Middle Frame: Settling on a look for this frame took a bit of time. This part of the UI is fairly dynamic, as different tabs contain different types of information besides just the icons and containers you see above, but the heart of it boils down to what you see here. Different games and applications choose to present this type of window in different ways, but in the end we borrowed the typical icon grid that many mobile users are used to and combined it with the Info Frame below in order to present information to the player in the most succinct and clear way possible. Familiarity is a very powerful thing when working with UI.



Info Frame: To me, this frame is the most important part of the User Experience. This is the frame through which the player makes their most meaningful interactions with the game: buying buildings and items. It is also the frame in which some of the most important information is presented (What different elements actually do, and how much they cost).

It is important that the information displayed here be very clear. To accomplish this we used the two-column layout as well as red and green coloring to separate production and consumption. The frame changes color based on whether or not the player can afford to buy the selected item, and they can clearly see how many resources it costs compared to what they have. The art and the layout are very strongly connected here. We went through many iterations before arriving on what you see here. We actually have a few more changes in mind for this frame before launch (both art and UX), so expect it to look even better by then.

BottomBarBottom Bar: Keep Craft starts off with only one tab, but keeps adding them as the player advances through the game. Keeping with standard mobile convention we placed this bar at the bottom. One thing I do not like about it currently is how much scrolling is required to get through the whole list. Before we launch expect the icons to be spaced a little more closely together to minimize scroll required.





So there you have the basic look and functionality of the mobile version. Especially in such a UI heavy game, it’s hard to overstate how important constant testing and reiteration is for the UI design process. Every time we launch a heavy playtest block we find things which we can improve on and make more clear. A lot of the little details you see in the UI Gifs above are actually results of this feedback. For my next dev blog entry I will go over a few of these changes – how the UI looked originally – what the issue was – and how we fixed it.

In the meantime enjoy a few more gameplay GIFs below: