ANIMATION

I began to introduce some simple movement to the design in order to make it feel more real in upcoming rounds of testing. The wind turbine was the first thing I animated due to the simplicity of its movement. The rotation was easy to simulate using Blender's keyframing.

FIRST ROUND OF TESTING

I had something that I felt was ready for some simple testing in terms of aesthetic appeal and comprehension.

Using friends and family connectinons I showed the displays as stills on both iPads and a large television screen to three girls and two boys aged between 12 and 14. Their main observations were as follows:

• They liked the cyber look of the interfaces
• They thought the game looked interesting and would play it
• The screen was a little complicated insofar as it had to much writing
• The game would look more fun if it had more colours in it
• The grid seemed to small to them, and they thought it would be easier to use if it had bigger squares

I went through each of these points in turn to see what changes could be made.

The first changed I made was to show the whole team on the main screen in place of the components. I felt that the components were better placed on individual screens (i.e., on the iPads).

Part of the thinking here was that players would react positively to seeing their own scores, etc., on the main display, and that this could increase levels of competitiveness between players. I was just experimenting at this stage to get a sense of how the sidebar would look. The characters "1st" were placed at the top of the winning team's panel, too, to give feedback to all teams on who was currently performing best.

The stats displayed include the number of clues the player has solved to gain new components, how much money they'd spent on buying components, and their carbon footprint as a result of buying the same.

At some point I would introduce the second team, and it looked from the current design as though the screen would be sufficiently accommondating.

I next introduced the second team and assigned team colours to each team. Now invoking the cyber-punk/synthwave palette, I coloured one team blue and the other red. I kept the gradients previously present as they continued to raise the visual interest of the panels.

I also simplified the data on screen. The complex system data panel was replaced by a simpler cost and emmissions panel for each team separated by a competition reinforcing "vs". Additionally, and in a similarly competitive vein, I changed the title of the main screen from "Island View" to "Competition Map."

One of the components on the map/grid was changed to red to show that the other team had a component in their possession.

I gave the avatars white backgrounds to stand out from their surrounding, but I was not overly happy with this change and eventually went with transparent backgrounds.

I started to design the system data on the iPad side. I thought it would be a good idea to show fuller data to teams about their own systems on their individual devices. At this stage I just looked at replicating a simpler version of the setup I'd previously had on the main screen.

I started to simplify the system data on the main screen even more. I felt that the target audience would respond well to a very visual representation, that is, if possible, with no text at all. To achieve this I introduced energy bars for each factor (cost and emmissions). I would also introduce motiont to the bars to draw attention to them (most likely something like a charge light zipping upwards).

A pause for thought I had was whether to show cost going up (and red at the top) to represent money spent or down (and red at the bottom) to represent dwindly thoughts. For consistency, I decided to have cost go up like the other bars, only for it to turn red towards a predefined amount based on a semi-realistic amount available to the Isle of Man Government (£6 billion).

I also moved the current goal centre stage with bigger text than before. To put pressure on teams and so too excitement and challenge, I introduced a time element that had its display centre-bottom of the screen.

Discussion during testing had revealed that the model of the Isle of Man would be more interesting to the target audience if it was coloured. I did this, while retaining the wireframe shell keep it in line with the game's theme. I used a topographical map downloaded online and used Blender to recolour it to match my own colour scheme and place it on the 3D model. This did enhance the visual appeal of the interface.

I was able to simplify the inferface further by reducing player stats to basic scores. I thought that more detailed information could be available to each player on their individual devices, and that there was no need to clutter the shared screen with this information. A score and ranking system (the players are ordered in terms of performance, best at the top) should be sufficient to induce competitive feelings.

SECOND ROUND OF TESTING

I undertook a second round of testing with the new design in place. Unfortunately I didn't have the same availability of participants this time around, so testing was undertaken with two teenage boys, aged 12 and 13.

Low numbers and all, the test proved very insightful in terms of linking gameplay to graphical aspects. Their main thoughts were as follows:

• There could be cards that give rise to events, choices, or disasters (a bit like those found in Monopoly)
• Players could be on individual clocks that force them to maintain purchased components
• There could be earnings for sending energy to the UK
• There could be an energy steal and/or sabotage option, with purchased protections
• The game should stay as close to reality as possible, but be a little more abstract to enable fun
• There could be a reward system for particular achievements.

Design changes that resulted from the second round of testing included the introduction of badges for particular activies. I came up with titles for nine badges, including:

1. Cluemaster (certain number of cludes solved)
2. Saver (buying cheap components)
3. Builder (just buying a certain number of components)
4. Light Treader (low carbon footprint)
5. Powerhouse (generating the most energy)
6. Money Maker (selling suplus energy through network cables)
7. Home Improver (buying infrastructure improving components)
8. Groundforce (building onshore components)
9. Atlantian (building offshore components)

I created simple badges for four of these for demonstration purposes.

The badges were placed under each player's score on the main screen and in their profile box on their individual screens. As a badge is gained, it is animated on screen by growing and shrinking. This way, the attention of other players is drawn to the achievement (nb. flatvalinor's aquisition of an Atlantian badge at placement of an offshore wind farm in the above animated example).

I decided to introduce a power rating bar to show how much power each team was generating based on purchased components. This would be important for establishing consequences for not maintaining or sabotaging components (i.e., loss of power.

Linked to this I included wind and sun level representations using relevant units of measure. Even if the kids didn't understand the units, they would definitely understand the simple number attached to it, especially as its changing would affect their power levels.

Lastly on the main screen I introduced a large, golden yellow "1st" badge animated with a shine. This was to emphasise the success of the winning team and spur on the opposition, while also providing clear feedback on overall performance.

Based on testing results and changes to the main screen I also introduced some big changes to the individual, iPad screen.

The player's avatar was animated to establish a stronger connection with the player and simple. The player has a clearer view of their own stats than on the main screen, and their team's system data is expanded and animated to show the current living system.

I took a moment to work out how best to display the health of the system components. This would be needed for maintenance and/or attacks from opponents. I also pondered whether players should have a clear way to demolish unwanted components of their own system, perhaps with something like a button shaped liked a wrecking ball.

I found the slimmer, horizontal approach to be the most visually appealing solution to the health status in the end, and thought that players could easily be instructed just to click a component to get an option to remove it. (They would likely also just figure this out intuitively.)

Options to upgrade the system and sabotage oppenents were been introduced. I considered transitions between these screens, and produced an animated example to demonstrate how this would work. Motion considerations were smoothness of transitions and clarity of what was taking place/where the user was in terms of getting back to the home screen.

To this end, the motion utilises easing-in and -out for items that remain on screen and easing-in alone for items that leave the screen. The player's stats collapse into the bottom left of the screen, staying visible and giving feedback on changes caused by the player (like money spent, badges earned, etc.), yet giving way to a sub-menu that allows for inspection of components and sabotage of opponents.

In the example above, we can see a player transition from the team system data screen to choosing and placing a component on the grid/map. Their stats update as they perform this action and the system gives feedback to confirm that they have successfully interacted with the various screens.

In the above example we see the player choose to sabotage their opponent. Their asked to confirm that they really want to do so before launching their attack. Team B's system data appears on the left to show the immediate impact of the sabotage. The map also provides feedback by highlight the attack square and flashing when the sabotage is actioned. Further still, the turbine collapses to show it has been destroyed. At the same time, a bar can been seen shrinking away from Team B's power gauge on the left.