Power UI

Color Board of the Power-UI screen design mockup.


For my bachelor thesis, I wanted to apply my knowledge from studying with something I am passionate about. So I chose to make the UI for a fictional video game! To take something managable, I created a mock-up for a fictional building-simulation game on mobile. Because a video game UI is highly interlocked with the gameplay, I also tried coming up with a simple gameplay loop.

In the following, the User-Centered Design Process was used to create the product. The steps were as follows: Analysis, Concept, Design, Implementation, Evaluation.

Table of Contents


Because I wanted to make a UI for a fictional video game, I had to come up with a fitting video game genre. The genre itself has a huge impact on how the interface is designed. Generally speaking, more casual games (like Match 3 or Idling) require less UI. So I chose building-simulation as a challenge. Typical building-simulation games are the Anno series or SimCity.

The design followed the Mobile-first principle. It was more important to get the game UI working on a smaller screen, so it can then later be fitted onto bigger displays.

Next I had to decide on a theme. I looked for a theme, that covers one aspect of city building-simulation games: power supply. It is one of the most important infrastructure systems in our lives. Especially in Germany, there have been discussions about Energy Transition for decades. Because natural resources (like coal and oil) are running low, people are investing more into renewable energies.

The game itself should touch on the three different aspects of Energy Policy: Environment protection, profitability and security of power supply. While playing, the player should find a balance between the different systems (like funds, resources, pollution, etc). And to inform those decisions, a complex UI is needed.

In the following, the core gameplay loop is explained with a short tutorial:

The next step then was to come up with the design of the interface. A requirement for the game UI was to be space efficient (on mobile). Screen real estate is limited, and the user should only be provided with as much info as needed. So the default UI is very space conservative, while info windows like finances are more generous.

Wireframe sketch for mobile - Overview
Wireframe sketch for mobile - Research tree
Wireframe sketch for mobile - Current production in power
Wireframe sketch for mobile - Facility list
Wireframe sketch for mobile - History of finances
Wireframe sketch for mobile - Asset list of finances
Wireframe sketch for mobile - Power plant detail view
Wireframe sketch for mobile - Trading resources


After the gameplay loop, the visual look of a game is the most important aspect. I tried looking for usable assets on sites like OpenGameArt or Humble Bundle. But it was obvious, that I needed to create my own assets. Screen design, icons, and game objects all had to be created from scratch, while a (modified) terrain from a Humble Bundle was used.

Icon Design

A lot of information had to be conveyed in a limited space. For this reason, a rich icon set was necessary. The first step was to quickly create many variations of icons that are needed.

In the following, the first version of the icons can be seen. They were also used for the first prototype. The icons themselves range from building types, to resources and generic menu labels and symbols.

The second iteration of the icons was a refinement of the first one. The icons should appear round, friendly and well to distinguish. Overall, the most important icons were redesigned &endash; that means the ones for the build menu or UI state indicators like happiness.

Icon atomic-energy
Icon back-arrow
Icon bulldozer
Icon canal
Icon catastrophe
Icon coal
Icon construction
Icon corn-cob
Icon danger-atomic
Icon danger-electricity
Icon danger-generic
Icon explore-map
Icon factory
Icon insurance
Icon load-shedding
Icon loan
Icon mine
Icon money
Icon natural-gas
Icon nuclear-waste
Icon crude-oil
Icon organic
Icon politics
Icon pollution
Icon power-a
Icon power-b
Icon power-plant-coal
Icon power-plant-generic
Icon power-plant-nuclear
Icon power-plant-sun
Icon power-plant-wind
Icon power-plug
Icon power-pole
Icon question-mark
Icon research
Icon resources
Icon road
Icon ship
Icon sigma-sign
Icon stats
Icon tracks
Icon trading-power
Icon trading-ressources
Icon train
Icon trash-can
Icon truck
Icon uranium
Icon wrench
Icon bulldozer
Icon burger-menu
Icon coal
Icon coin
Icon crane
Icon emotion-1-happy
Icon emotion-2-friendly
Icon emotion-3-indifferent
Icon emotion-4-bad
Icon emotion-5-angry
Icon finances
Icon goal
Icon house
Icon logistics
Icon mail
Icon management
Icon other-buildings
Icon pollution
Icon power
Icon power-plant
Icon power-pole
Icon research
Icon resources
Icon zoom

Screen Design

When doing the screen design, the two layers of game world and game UI came together. Based on the previous wireframes, the screen design was created. The UI elements itself only use little color for styling purposes, because color usage is for info reserved.

Before actually using colors in the screen design, I made sure that the overall look has good values. The UI-Elements should have enough contrast to the game world, so info doesn't get convoluted.

Contrasts in the screen design

In the following, you can see how the Smart TV view looked like. It is very similar to a mobile view, but the navigation in the UI has to be aligned to the two input axis of the Smart TV remote.

Screen design for Smart Tv


A game also needs a world in which it takes place. The terrain should have a simple, friendly and colorful style so it works together with the assets. I used a modified tileset as basis. The world itself is made up of individual tiles (or blocks). On top, there are doodads like trees, bushes or rocks. Also game objects like the power plants itself are placed into the world.

I used the Tiled Map Editor to create the map itself. Terrain and doodads were arranged in a tileset. The map then could be exported as json and reconstructed inside of the game.

Tiles demo of Phaser prototype


The assets for a building game a very important, because the player should see their progress in terms of big cities or complicated setups. To provide the player with plenty of options, many building assets were created.

In the sketches tried using a simple shape language to help differentiate the buildings. For example, most (conventional) plants have a generator housing, a energy source and chimneys. Buildings of type Other buildings have cubes as basic shape.

They can be grouped into five categories:

  • Resources
  • Logistics
  • Power Plants
  • Infrastructure
Asset Wind turbine
Wind turbine
Asset Corn field
Corn field
Asset Bucket excavator
Bucket excavator
Asset Tracks
Asset Road
Asset Freight port
Freight port
Asset Natural gas rig
Natural gas rig
Asset Nuclear fuel factory
Nuclear fuel factory
Asset Nuclear waste disposal
Nuclear waste disposal
Asset Plant biogas
Plant biogas
Asset Plant coal
Plant coal
Asset Plant garbage incineration
Plant garbage incineration
Asset Plant gas turbine
Plant gas turbine
Asset Plant nuclear power
Plant nuclear power
Asset Plant oil
Plant oil
Asset Plant photovoltaic
Plant photovoltaic
Asset Powerpole
Asset Pumpjack
Asset Recycling depot
Recycling depot
Asset Refinery
Asset Train station
Train station
Asset Truck station
Truck station
Asset Uranium mine
Uranium mine
Asset Pipeline

3D Models

The sketches were also the guidelines for the 3d-models. An isometric look is common for building-simulation games. For prototyping, only a subset of buildings was created as sprite.

Asset - Civilian Building 1
Asset - plant bio gas
Asset - plant coal
Asset - plant gas turbine
Asset - plant nuclear power
Asset - plant oil
Asset - truck station
Asset - power pole
Asset - truck
Asset - road
Asset - road
Asset - road


In total, three prototypes were created to test the functionality of the UI.

Prototype Axure

Axure is a tool for creating interactive prototypes and specifications. The software was chosen for the first prototype, because it's focus lies solely on UI design. On the one hand, it turned out pretty useful to create a prototype (visual representation) in conjunction with developing the concept.

But using Axure also had it's downsides. With the prototype, seven use-cases were implemented, like placing down a building. For this, collision detection is needed: The player should not be able to place down a building on top of each other. So the logic for this had to be worked around.

Axure Prototype with Logic Programming
Axure Prototype with Logic Programming for Building menu.
Prototype Axure - Placing building
Prototype Axure - Finance management
Prototype Axure - Overview
Prototype Axure - Info window for power plant
Prototype Axure - Modal for demolishing a building
Prototype Axure - Power overview

Prototype Unity

After testing the concept with the click prototype, many shortcomings were obvious: Much of the underlying logic had to be emulated and the prototyping software itself reached it's limits. So as a follow-up, I wanted to make the second prototype with the game engine Unity.

Unity is very powerful, supports multi-platforms and has a rich asset store eco-system. The only drawback is, that the UI-System (UnityUI) is not easily usable. It is based on GameObjects and individual components, rather than markup like HTML & CSS. So I looked for a plugin that could help me and went with XmlLayout.

I also tried putting in some basic gameplay logic. A graph was implemented to accurately handle the electric grid and collision detection was added. But in the end, a prototype with complete core functionality proved too ambitious. Also the UI system still was a hassle to deal with, even with the plugin.

Unity prototype - Breakdown of electric grid
Unity prototype - Formation of electric grid
Unity prototype - Dragging power plant into world

Prototype Phaser & VueJS

Working with Unity made it clear: The most important feature for the prototype is the UI system. So switched technology again, this time to HTML & CSS.

For the game itself, I used Phaser, an HTML5-based game framework. But the UI option in Phaser are very limited. So I set up the UI on top of the game with VueJS. Because both frameworks are based on JavaScript, it was very easy to link both systems together.

With this new system, I went ahead and implemented the basic game logic, like camera movement, map rendering and collision detection. The UI itself communicates with the phaser game via events. E. g. when the player drags a building from the build menu into the game world, the Phaser instance takes over control.

The purpose of the second prototype was to refine the first one and make it visually more appealing. Using the web-based styling options turned out to work great! However implementing the game logic in Phaser was a challenge. For example, there is no native support for isometric maps.

Prototype Phaser - Overview
Prototype Phaser - Info for power plant
Prototype Phaser - Build menu modal
Prototype Phaser - Opened build menu
Prototype Phaser - Placing a building
Prototype Phaser - Finances window

User Testing

The game prototype had to be tested, so it actually was playable by gamers. During the project, two user tests were conducted: The first one with the Axure prototype to test the concept. And a second one to refine said concept and make the game more enjoyable.

In total, 19 participants were tested. During each test, a participant had to answer questions like their gaming familiarity. After that, 7 use-cases were played in the prototype. To be able to compare said tests, a UEQ and SUS questionnaire was used at last.

Overall, the second prototype received good ratings (SUS score of 72; UEQ between 1 and 2 in most categories). People liked the graphics and usability but some were missing more content for the game.

The second user test also was conducted during the Global Game Jam 2020 in Ansbach. It was a lot of fun, especially if you can test your game prototype with highly motivated gamers.

Group shot of the 'Quick and Dirty' team at the Global Game Jam 2020 in Ansbach.
The team 'Quick and Dirty' of the Global Game Jam 2020 in Ansbach.
User Test - 1 Title
User Test - 2 Time sheet
User Test - 3 Data agreement
User Test - 4 Participant data
User Test - 5 Use cases
User Test - 6 UEQ
User Test - 7 SUS
Test 1 Test 2 19 Subjects


In the end, many different disciplines were involved in making this project. Games are a very interesting medium, because they combine programming and art to make something fun and meaningful. Their purpose is the Game UX they provide and I hope I could learn something about making game UIs in the process.

If you are interested in my thesis, please take a look inside: