Adobe Creative Cloud

September 8, 2016 /UX/UI Design /

Strategy Game ‘Diplomacy’ Receives a 21st Century Facelift in Adobe XD

David Brusstar uses Adobe XD to prototype a mobile version of the classic board game

Diplomacy is the kind of much-loved, much-played strategy game that falls into a league of its own. First released in 1959, the game takes players to Europe in the days before WW1, having them battle and negotiate with each other as nations. Games can take a day or more to complete, and players often take turns playing by mail (or email). Inspired by his love for the game, UX Designer David Brusstar envisioned a 21st century way to play this very 20th century game.

“Strategy-wise it’s very unique and fun. It’s a board game, but the experience is actually better in a remote digital setting,” said Brusstar. He and his college friend Matt Stephens (an iOS engineer) decided to design a digital version.

“As it stands there are several web-based diplomacy clients but none of them are really user-focused. I thought it would be a fun project to try to design it for mobile,” said Brusstar.

From Paper to Prototype In A Jiffy

Brusstar started by drawing out the layout of the game board, writing down what he knew about the game’s mechanics, and envisioning how he could display all of that on a screen.

“I wrote out the different necessary features to compensate digitally for an experience that was originally designed to be in person. Everything else was done in XD,” he said.

Pencil wireframes

Pencil wireframes

Brusstar began mocking up screens and linking them together in Adobe XD to create a cohesive wireframe. He used the app to implement graphic features, and soon had a full-on prototype to show off.

Four screen flow

Four screen flow

“It’s the integration from early wireframes through prototypes that you can send to other non-designers to click through and provide feedback. You feel as though you’re using a more polished prototype even though it doesn’t take as much work to get there,” he said.

“It limits the amount of time necessary between sketching out a product and when you can start showing it around and getting feedback. XD really brought forward what I was ultimately trying to get to.”

New+Attack+Support

Diplomacy prototype in action

All the Tools In One Place

With Adobe XD, Brusstar says he was able to design an interactive mockup without having to use multiple programs. He says there was no “conflict” in the process.

“When you don’t have to go back and forth between programs, between all stages in your design process, it just feels much more organic and pleasurable to use. It provides the fluidity of work flow that is otherwise hard to achieve,” he said.

The end result is a prototype Brusstar hopes will turn into a fully-engineered version of the game one day soon. He says even hardcore players, like himself, might find themselves liking his digital version even more than the original board game.

Full mock-up of Diplomacy

Full mock-up of Diplomacy

“What you lose in the immediate social aspect of the game, you make up for in the flexibility of fitting it into your life. Rather than having a 10-hour game where you’re sitting in one place with 6 other people…you get longer turn windows, the ability to play over distances, automated turn resolution, and players can start another game right after one ends,” he said.

He says the idea of possibly creating an original app from scratch is a daunting task, but Adobe XD has been a major help.

“It’s hard to work on things that you feel are really unique, and do them in a way you can be proud of. Being able to execute something you feel you’re taking an interesting and unique take on is big. XD really helped with that challenge,” he said.

With any luck, Brusstar’s XD prototype is just the beginning of his big vision for Diplomacy’s 21st century future. We can’t wait for the chance to challenge him one day soon…

UX/UI Design

Design. Prototype. Share. All in Adobe XD.

Go from idea to prototype faster with Adobe Experience Design (Preview) CC, the first all-in-one tool for creating and sharing website and mobile app designs. Test drive the XD preview and tell us what you think.

DOWNLOAD