8 weeks
Nebelkampf was an eight week long project.
Cus­tom engine
Nebelkampf was devel­oped in the cus­tom ‘Hex Engine’, spe­cial­ly designed for dig­i­tal board games using hexa­gon tiles.
Team of 16
This team con­sist­ed of five design­ers, six pro­gram­mers, and five artists.
Win­dows
Win­dows was the tar­get plat­form for this project.
UX Design­er
I was respon­si­ble for design­ing the UI, UX, and onboard­ing for this project, and helped playtest­ing. UI art & imple­men­ta­tion were done by oth­ers.

 

Nebelkampf was a dig­i­tal board game with hexag­o­nal tiles, since the pro­gram­ming dis­ci­pline built an engine for this in the months before. We used fog of war mechan­ics that only allows play­ers to see the con­tent of tiles their units are look­ing at, in which each unit has a dif­fer­ent view range and oth­er spe­cial abil­i­ties. Thus, it became a game about infor­ma­tion gath­er­ing.

My job was to make sure play­ers under­stood all their options and had to remem­ber as lit­tle infor­ma­tion as pos­si­ble.

The final ver­sion of the UI. Art was made by some­one else.

UI Concepts

One of the sketch­es for inter­face ele­ments.

I helped playtest­ing the game, then I made a vari­ety of visu­al research, mock­ups, and prac­tice ani­ma­tions to get a clear idea about which direc­tion to go into.

Explor­ing ‘ghosts’, where you would see an indi­ca­tor at the loca­tion you pre­vi­ous­ly spot­ted an ene­my. Made in Pow­er­point using ani­ma­tions.

After that I made some inter­ac­tive mock­ups to test things out.

A demo of char­ac­ter place­ment at the begin­ning of a game. Made in Mock­Plus.

Implementation

In hind­sight, it appeared I took too much time con­cept­ing the UI, and due to oth­er road­blocks like sick team mem­bers and lim­it­ed UI sup­port in our cus­tom engine, we had to imple­ment it hasti­ly. If I would repeat this progress in the future, I would skip the inter­ac­tive mock­up in favor of imme­di­ate imple­men­ta­tion in-game.

Dur­ing playtest­ing our team iden­ti­fied the need to have a tuto­r­i­al, which I did research for and came up with a suit­able con­cept. Our engine didn’t sup­port com­put­er con­trolled oppo­nents, so the train­ing need­ed to be done dur­ing a nor­mal game. After some exper­i­ment­ing, I came up with a non-intru­sive solu­tion:

Mocked up tuto­r­i­al using tem­po­rary art, visu­al­iz­ing the entire tuto­r­i­al flow. Made in Mock­Plus.

Our team was also dab­bling for a long time about how to name the game, so I brain­stormed on that a bit and came up with Hazestrike, Cloacked Com­man­do, Veil­troop­ers, and Nebelkampf, which would ulti­mate­ly become the name of the project. (Although ‘Veil­troop­ers’ is still my per­son­al favorite, to be hon­est!)

What I learned

I researched a lot of UX doing this project, includ­ing psy­chol­o­gy and heuris­tics, and learned how to use pat­terns and sign­posts. There were also some mis­takes made that taught me to imple­ment the UI into the game as quick­ly as pos­si­ble and iter­ate from there. This project real­ly helped me to under­stand the basic of UX and encour­aged me to con­tin­ue with the role on lat­er projects.