1. Mr. President
  2. News

Mr. President News

UX Challenges in Porting a Complex Tabletop Game to Digital

When working on a port of a tabletop game like Mr. President, a key area to focus on is simulating the tactile experience of board game into the digital world. The transition from physical board games to PC games presents a unique set of challenges that require a deep understanding of user experience design principles. The goal is to ensure the digital version retains the essence of the original while providing an intuitive and engaging experience for players, whether they’re new to the game or longtime fans. Here I’ll walk through some of the primary challenges involved in porting Mr. President to PC and how we're approaching them to create a seamless digital experience.

Replicating the Physicality of the Game

Tabletop games involve tactile experiences: players draw cards, roll dice, and physically move pieces around the board. This tactile feedback is deeply satisfying, and its absence in a digital environment can impact the overall experience. So, we're approaching Mr. President with not only a direct port of the design of the game, but also a strong focus on retaining the "feel" of the tabletop experience. The challenge here is designing a digital system that feels interactive without the direct physical touch of pieces. So we lean on animation, skeuomorphic elements and simple interactions to keep the sensation of moving a token or the thrill of a dice roll. We're relying heavily on sound an animation to reinforce this simulated real-world movement.

We use “docking” cards and tray systems to help simulate the tactile nature of playing around the actual physical board. Audio and animation will support this.

Managing Game Complexity

Strategy-heavy games like Mr. President come with a set of complex rules, mechanics, and game states. In a physical space, players can reference rulebooks, look at a game board, and consult each other for help. However, in a digital version, those same complexities can become overwhelming if not presented clearly. Translating a game's intricate rules and mechanics into an intuitive, digital interface can be a logistical nightmare. How do you present all the game states, player options, and ongoing actions without overwhelming the user? We're dialing in on a set of patterns that we'll use to make the game state and decisions presented to the player simply and as quickly as possible. One handy reference we use is an Information Architecture map of the game screen:

This Information Architecture map helps the developers keep specific types of information grouped, and helps manage cognitive load on the player.

This helps keep the team aligned on what pieces of information go where, and what key variables need to be presented to the player to make decision making easier. This layout also helps us design onboarding systems, tooltips, and other dynamic help systems that can help guide players through complex mechanics. Making sure that the right kinds of information are put in a consistent and logical place will keep the interface from feeling cluttered or confusing.

Visual Design and Aesthetic Choices

Mr. President's artwork, from the board’s design to the artwork on cards, plays a significant role in its identity and appeal. When porting to a PC game, there’s a balance to be struck between staying true to the original aesthetic and adapting it to work on a screen. How do we retain the charm and visual appeal of the original artwork while adapting it for the constraints of a digital interface? Additionally, the medium shift will require us to rework how certain visual elements are represented, and create space for more art, sound, and narrative flavor than a physical game can offer. A UX designer needs to carefully evaluate the game’s visual identity and translate it in a way that still feels familiar to players. This might involve digitizing artwork for clarity on a screen, adjusting elements for better readability, or even designing animations that bring static artwork to life. Keeping the game's visual theme intact ensures that players still feel the same atmosphere as they did in the physical version, even in a new medium.

Balancing Player Autonomy vs. Digital Constraints

The tabletop version of Mr. President relies on a level of player autonomy where decisions are made in the moment, and the flow of the game is open-ended. This flexibility is something digital versions must replicate while adhering to the constraints of the digital medium. In a PC game format, players may feel constrained by the computer’s rigid structure, limited by the controls and the lack of room for organic, unscripted gameplay. So, our solution lies in designing intuitive controls and systems that give players as much freedom as possible within the digital environment. Allowing players to process rulesets and make decisions within an open interface can help maintain a feeling of freedom. While most of the changes in board state are deterministic, we always present the player with a clear choice of actions and all RNG is manually elected by the player. We also don't want the game to invisibly automate state changes, since that hinders player learning and understanding; we’re designing through detailed step-by-step flows for all the various actions across the game, and tuning how to convey the state change information clearly and concisely.

Some types of actions can be surfaced in a single panel to help reduce searching time around the entire board state to find a target decision.

Porting Mr. President to PC is a delicate balancing act between honoring the original, providing an engaging user experience, and adapting to the constraints of digital platforms. My job here is about crafting an experience that makes players feel at home with the game, keeping the vibe of sitting at a game table while they actually sit in front of a screen.

An overview of our Figma design document that helps us architect the interactions and edge cases common in games of this level of complexity. We expect to illustrate well over 300 unique screen states during development.

Ultimately, the most successful digital adaptations capture the essence of the original game while enhancing the experience through thoughtful design. By addressing the unique challenges of game complexity, tactile feedback, and visual design, we can create a digital version of Mr. President that gives the same fun, stress, and power fantasy that players love in the physical version.

Contemporary Conflicts in Mr. President

Since Exia and GMT announced the digital adaptation of Mr. President, players have often observed that a lot has happened since 2020 (the end of the era Mr. President covers). Mr. President covers a recent time period, well within living memory, and all but the youngest players will vividly remember many of the real-life crises that challenged America at that time.

But players who haven’t gone deep on the tabletop version will rarely be able to appreciate the look-ahead in the design. Gene Billingsley, the designer of Mr. President on the tabletop, anticipated a wide variety of possibilities, making logical inferences about the state of the world, and about variations on events that didn’t occur prior to 2020 but might have. This card also puts Gene’s design philosophy on more subtle display: just as Mr. President emphasizes bipartisan cooperation as the key to lasting positive change, the design also emphasizes crises that Americans of all political persuasions can agree represent meaningful threats and risks to American interests.

One such case is card #45, Russian Hybrid War in Eastern Ukraine:



This is a Cascading Event that has the potential to cascade very steeply and quickly! The first time it occurs, the impact is mild: a single Tensions marker in Russia and one in NATO. But when it recurs the first time, the conflict can get out of hand.

Why? When Russia takes its actions, high Tension levels can increase its Conflict Tracks (it has two: one for Ukraine, and one for NATO). So, if you read the whole card, you’ll see that this is one of the few cards that can cause an auto-loss for the player. And the risk of auto-loss is even higher than it first appears, since a Russian war against NATO also ends the game. The card therefore poses multiple risks, and only the one on the card is obvious.

The situation is even riskier than that, though - high Tensions for NATO can also increase the Russia-NATO Conflict Track. They can also induce NATO to initiate a cyber attack against Russia, which likewise can drive Russian tensions even higher. And the play-around for this Crisis, to prevent Russian invasion of Ukraine, requires the US to keep Relations with Russia at 3 or higher or ensure its Influence in Eastern Europe remains low. That can be a tall order - there are many game events that place Russian Influence in Eastern Europe.

If a war does start, the card indicates Ukraine begins at strength 3; Russia’s base strength is 10, so unless the US intervenes, Russia will have a significant odds advantage whenever War Progress is resolved - and that happens immediately when the war starts as well as during the designated segments during the turn. And Russian victory over Ukraine might not seem that bad - just +1 Influence in Eastern Europe and a bonus Action in Russia’s next activation - but those are worse than they look, especially since there’s nothing to stop a subsequent Russia/Ukraine conflict.

ADDRESSING THE CRISIS

Timing is critical in Mr. President. In the 2nd Edition, allies with sufficiently high Tension levels will see their relations with the US degrade before they take unilateral or joint actions, and this card has the potential to put a lot of Tension on several US allies. So if this crisis materializes after NATO and the UK have already taken their actions, it’s likely to have less impact (at least prior to Stage 3, when an invasion can occur).

If this Crisis is in your pool, obviously a top priority will be to contain Russian influence and limit its ability to make war before the invasion occurs. You can also pursue stronger US relations with Russia to deter invasion, but with the 2nd Edition’s new limits on how frequently Summits can be called, that may be a tall order. You’ll want to prioritize keeping Regional Crises in Eastern Europe low and Alignment high, since those are the prerequisites for eliminating Russian Influence markers.

But don’t worry. No doubt the rest of the world is perfectly calm, and your domestic situation is tranquil and cooperative. Right?

Creating Art for Mr. President

When I had the chance to step-up and become the Art Director on Exia Lab’s first title, Mr. President, I quickly jumped into the opportunity. It seemed like a dream to me when I was approached by our CEO Jonathan Pan about creating Americana portraits and paintings. My love for the country that has opened up so many doors since coming from my native El Salvador. and the opportunity to create American-Style 1960’s art is nothing short of a dream come true.

For this portrait of a non-descript President, I used many references from different presidents of history, and since we are doing Americana, I wanted to take the iconic JFK portrait as a source of inspiration.



It first starts with a painter’s sketch. For key art, I sketch roughly the subject as I always did on my long portfolio graphic pads with charcoal, and I just draw it with Photoshop and custom pen brushes.



At this point nothing much changes, over the years I have amassed quite a bit of brushes in Photoshop, but I also have curated a lot.



I painted this by layering colors on the Canvas a traditional, but prompting nothing on Photoshop’s Generative Fill. This technique allows for the paint to sort of morph around your brush, giving you completely different results simulating a painted canvas texture (most notably seen on the side of the jacket) - where the imperfections become the art style, then you are free to polish as normal using the kind of brushes I have.



Notice how through the magic of Adobe’s Generative Fill for example, it saves me tons of time on having to paint (and repair) many brush strokes at once, and I can always see where and how I would paint it (or refine it if I choose) - for this portrait believe it or not, I went with the rougher version (top) because I did want some of the violent brushes there for the style, as opposed to the more tamed and clean (bottom).



For his face everything was painted by hand, with the brushes using the Generative Fill method, leaving my signature brush strokes on his face to give it that more classic portrait look.



Classic Americana Portrait of the President, which we of course as good artists paint on a separate layer against the background so we can then using the same method, paint his desk and papers behind it to deliver the final cover art. Final Artwork comprised of over 240 layers of digital oil paint.



One of the ways I like to approach my work is through the use of new technologies. I believe, generative AI technologies such as Stable Diffusion, ComfyUI, and the ability to create my own visual models (and LorA’s), trained in my own style and locally run only in my Nvidia 5090 are the way to progress as a creative in this new world of art. Using ComfyUI and my models is also another in-painting technique and I have my own workflow, but - we will save that for a different day.



Thank you for taking the time to read this and I hope this has been informative, as I will aim to keep updating regularly with more behind-the-scenes, on how crafted we create our art here at Exia, using all the new technologies that we have available as creatives in this new era.

Until then - go paint and bring color into your life.

Step Into the Oval Office

Mr. President: The American Presidency 2000-2020 is a game about being POTUS. And it’s unique. Most American politics games, both digital and tabletop, are about elections and campaigning; in this game, you’ve already won the election and must now govern. Likewise, most games in which you get to lead America focus on a narrow slice of that leadership. Not in Mr. President. You’ve got to take on the entire presidential portfolio: running the war on terror, dealing with domestic crises, managing your Cabinet, working with US allies and rivals, passing your domestic agenda through Congress, confirming Supreme Court justices if a seat comes open, and every other responsibility that comes with sitting in the Oval Office.

The game is an adaptation of the tabletop version, the result of a 9-year design and research process. It has a vast amount of content, ensuring tons of replayability - hundreds of crises and events, dozens of actions for the player to choose from, and subsystems capturing the whole range of presidential opportunities and challenges. Players can opt for the sandbox scenario, which puts them at the start of a 4-year term that encompasses a general variety of trends and events of the early 21st century. Or, if a player wants to see if he or she can do better than an actual president, there’s a scenario for each presidential term. Want to see if you can navigate the financial crisis, pass health care reform, and contain Iran better than President Obama did? Do you think you can deal with 9/11 better than President Bush did, perhaps even also achieving Bush’s objective of Social Security reform? Mr. President lets you take your shot.



The tabletop version is a monster game; one of the most common player comments about it is “I would love to buy and play this game, but I don’t have the table space” or “I can’t leave a game like this set up for days and days.” Another common comment is “I spend a lot of time finding the right tables to roll on and the right rules to apply.” Exia’s adaptation will remove all of that player pain and present players with a tightened but entirely faithful Mr. President experience. (Images represent prototypes and work in progress - not the final experience!)



But we know there are pitfalls with translating a game like Mr. President to the PC screen. Part of what’s compelling about Mr. President, and other open-ended sandbox simulation style games, is that by reading the rules and pushing the counters, the player gains a deeper understanding of the choices the game offers and how to play towards and around them. A system that automates everything and simply presents the player with results fails in two ways: it denies the player a moment to imagine what’s happening, and it forgoes an opportunity to understand what impacted the chance of success. Exia has an experienced game dev team. We will not fall into these traps.

Like any game about politics and governing, Mr. President expresses a particular creative vision. It portrays the American presidency as a great institution and America as a force for good in the world - but whose potential is strongest when people of different parties and views come together, and when America works well with its allies. Like any creative vision, people will disagree - but in today’s political atmosphere, many players may find Mr. President to be a breath of fresh air.

A World Rewritten: Visualizing Defeat in Mr. President

Ananda:

Mr. President is a game about domestic and world politics, with the highest of stakes. Not counting surprise losses from certain Crisis Cards, there are fifteen ways to insta-lose in Mr. President. That, and the fact that the Core Sandbox Scenario involves a tapestry of different possibilities from the entirety of the 2000-2020 period, means that part of the fun in Mr. President is alternate history.

One of the most fun - and scariest - things about alternate history is envisioning it. To that end, in the digital version of Mr. President, our art director Joshua Balcaceres is doing illustrations that depict the world as it might be, if you make too many mistakes (or if you can't hit a die roll to save your life... or the world!).

One of the instant-defeat conditions is triggered should China reach 15 Influence throughout the world. If this happens, this means the PRC has achieved its core strategic goal of the 21st century so far: the creation of a China-led world order and the subsequent achievement of its global agenda. The picture the player sees, then, is one of the starkest elements of that victory - the successful takeover of Taiwan. And now, you'll hear from Josh, who will talk about the artistic process and considerations that went into visually realizing this terrible outcome.

Josh:

One of the central themes of this piece is conveying, through art, the idea of a nation overtaken—losing not just its freedom and independence, but its very sense of identity. The dominant color is red, symbolizing the PRC’s takeover, and the scene is envisioned as a wide-angle shot of that grim possibility. At the heart of the composition stands Taipei 101—Taiwan’s tallest building—used here to represent the loss of national identity, pride, and progress.



The entire piece is painted in the chiaroscuro style, intentionally using minimal light. If any light appears, it is the setting sun—symbolizing the fading hopes of the Taiwanese people—as PRC destroyers and military helicopters cast looming shadows over Taipei. Chiaroscuro is a painting technique defined by stark contrasts between light and dark. Popularized by Caravaggio, it evokes powerful emotions such as uncertainty, drama, death, and sorrow—all fitting for the scene depicted. This stylistic choice aligns with the visual tone of our Crises Cards.



The term "chiaroscuro" itself originates from artists working with cheap, non-white paper, forcing them to bring light into their images using white pencil or chalk—essentially carving figures out of darkness.



The final touch was adding the PRC flag waving over Taipei 101 subtly, but powerfully.



Go paint some art into the world.

- Joshua Balcaceres
Studio Art Director - Exia Labs