DR. QUIRK'S GAME CARDS

Dave Quirk was kind enough to gift me a pack of the game cards he'd developed to teach people about renewable energy during his workshops.

The cards can be played in a simple Top Trumps format, but more complex games are possible in which players compete to build efficient, low carbon cost systems.

Acquisition of these cards was a turning point in my design journey as I now had something that I know there was demand for and that could benefit from being uplifted to digital format.

I know had direction and strengthened resolve!

DESIGN FOUNDATIONS

I started by building out sample graphics in Blender 3D. This would allow me to apply them in different interface designs, rapidly testing different ideas.

I built a 3D model of the Isle of Man in Blender using a reference image downloaded from Google.

My initial thoughts were to apply a wireframe material and leave it like that, really enhancing the cyber feel and creating a great aesthetic within the Hololens environment.

The interactive environment would have a visible, underlying grid to aid with the cyber aesthetic but also to control placement of components within the environment. I used Blender to generate the grid given the ease with which the programme can simulate orthographic depth.

I downloaded a pre-fabricated wind turbine model from Adobe Stock and applied the wireframe material to it, again to play to the cyber aesthetic.

On final rendering, I kept all my models in orthographic perspective to communicate something technical. The objective was to create a game that felt technical but fun, as well as being cyber, almost futuristic themed.

INITIAL DESIGNS

With the sample models in place I used Adobe XD to try various design ideas. In this instance, using XD was a quick if not quicker than sketching, allowing me to rapidly move and assess the impact of different layouts.

At this state I was looking to get a sense of the best layout by blocking out the main sections of the interface, namely a main section, a section for component cards, and a section for overall system data.

Using just the cyber-technical colour palette I'd derived following moodboarding, I designed the Island View (main map) and component selection screens.

I am still designing with Hololens/tour bus in mind at this point, but I think it wise to get a general sense of how the interface would look and feel on a standard screen, building out from there. This is partly because I am aware of the extra work that is needed to expand to environment design, so this current approach creates an escape hatch if the Hololens/tour bus design route starts to look unfeasable.

Each screen contains a number of stats on component and system attributes, including some icons I placed bottom-right to give immediate feedback on performance.

The system data uses component category reference numbers taken from Dave Quirk's original card games (SP, ES, etc.). Dashed lines show the flow of power from one component to the next, and summary data for each component category is shown at beneath its enclosure. This all ultimately leads to a combined data panel, showing all of the stats included in the original card game.

The current goal is shown to the bottom right of the map/grid. These goals also reflect the game suggestions included in the original card game, in this case to building a viable system with the lower possible carbon cost.

So that players can directly see what their system includes, turbines are placed on the map/grid with yellow bases (intended to be pulsating when animated). I included statistics on cost and emmissions directly above the placed components, too, but I knew that this could make the map very convoluted as the game progressed, so I reluctantly included it in early designs.

Placement of mini component cards is left of the screen whilst overall system data is at the bottom. This felt like the best way to optmise space and facilitate understanding. (Early experimentation with cards at the bottom felt less intuitive, but I would build a test design of this nature a bit later to be sure.)

REFINED DESIGNS

With the general layout seeming to work, I could focus on some finer points.

Each mini component card needs a quick means of identification, so I decide to create some simple icons for that purpose. They're just 100px, wireframe renders of simple 3D models I built (excluding the solar panel and turbine, which were prefabs).

I've also noticed that the island doesn't stand out very much from the grid background, so I enhance its border.

The introduction of a subtle gradient from the bottom of the screen to the top makes the display a little more visually interesting.

So far I've been working as though all the screens will be the same dimensions and share similar data. This was to get a feel for the general design, but at some point the displays will be completely separate: one per player and a central, shared display.

I therefore decide to start separating the display designs to see how things play out on each. I figure that an iPad would work well for testing purposes, so I design to iPad dimensions.

The interface was feeling a bit impersonal to me at this stage, so I decided to introduce avatars that players could choose.

To save time, I searched for cyber-themed avatars in Adobe stock. I found cyber-punk avatars that fitted my envisaged design perfectly. I leave them unchanged for now in order to continue testing broader design ideas.

While I'm still playing with broad design ideas I decide to take another look at an alternative layout, with system data displayed vertically and components displayed horizontally. Notably, I'm still assuming that component selection will be visible on a shared screen.

I also have a go playing with the cyber-punk/synthwave colour palette.

Despite trying many configurations, I couldn't get the colour balance right. I'd come back to this later I my design evolved, but for now I decided to stick with the cyber-technical palette exclusively.