Jeff Behrenhauser - UX/UI Designer
Jeff Behrenhauser - UX/UI Designer

Jeff Behrenhauser

UX/UI Designer

D&D ARCS Combat Simulator brings TTRPG combat to life with group augmented reality

86%

Players agreeable to introducing 3D AR technology

79%

Players not satisfied with combat scenarios

68%

Adventurers want better ways to visually represent their Heros

77%

DMs would prefer a better ways to plan combat scenarios

The Problem

Most D&D players on both sides of the campaign agree; prepping and delivering for a TTRPG campaign can be frustrating and tedious. With character sheets to manage, narratives to create, and battles to conduct, DMs and Adventurers are always looking to free up time to enjoy the game and share more time with each other. In fact, when asked, most frustrations stem from too much physical material to manage, rules to recall and impose, battle mechanics, and a lack of hero and combat visualization support. Moreover, the general consensus of players overwhelming responded positively to adding some level of hero and combat support technology to reduce time on superficial details and enhance the overall experience.

Despite the fact that most in the study group had knowledge of existing support technology in the D&D gaming space, their opinion was that it is superficial and less interactive to the gaming experience. Furthermore, they didn’t want to alter their TTRPG into a video game and preferred introducing technology as a support tool but not replacement of the in-person experience. Perhaps, introducing next-level AR technology would help minimize the clutter and maximize their TTRPG gaming experience!

The Solution

D&D ARCS AR Combat Simulator brings your heros, combat engagements and campaign narratives to life with Augmented Reality!

Hold on to your chain mail, because the D&D ARCS Combat AR Simulator and Visualizer mobile app has arrived! No more clearing and resetting the game table from world maps to combat scenarios. Hero development and combat scenarios now play out in real time AR using your mobile device or pair with your favorite wearable technology.

Visualize your hero in 3D as you intended with weapons, armor and equipment, historically accurate to classic D&D era standards in amazing CGI. Test your hero’s mettle in the Combat Arena to maximize battle effectiveness for an upcoming campaign. Dungeon Masters can build narratives, map dungeons, and plan epic combat scenarios with chosen campaign players. And now, with our integrated fantasy AI collaborator, you can play more and prepare less!

In addition, ARCS is now synced with D&DBeyond and 5e-compatible, so upload your favorite Heros, narratives, dungeons and more without missing a beat. There’s something for everyone…

Adventurers:

  • Hero Visualization (AR)
  • Hero Manager
  • Combat Arena (AR)
  • Combat Visualizer (AR)

Dungeon Masters:

  • Combact Visualizer (AR)
  • Combat Builder
  • Campaign Manager

The Research

First, I performed a comprehensive mix of process experience surveys and interviews targeting both Adventurers and Dungeon Masters. Then, I followed up with separate questions tailored specifically for Adventurers and DMs to attain feedback on their individual successes and frustrations with the game, as well as thoughts on introducing AR technology into their experience. I also interjected my own research and personal experiences with the D&D gaming process.

This helped determine pre-game , in-game and post-game activities and processes, including any successes, frustrations and challenges they faced along the way. The data and feedback will be used to shape Personas and Journey Experience Maps for both DMs and Adventurers. Empathizing with the totality of the gaming experience and their individual challenges and provide a roadmap to an optimal digital support product without diluting the original TTRGP experience.

Next, I crafted pervasive personas for a Dungeon Master and Character Player from the data collected. These two personas document general demographics and summarize the average individual’s motivations, goals and obstacles that cause their frustrations and other dispositions. It also provided an opportunity to notate specific personal influences, related stories of use, and other scenarios that could help add to the solution and build a better experience. This process allowed me observe the similarities of DMs and Adventurers play significantly different roles in the D&D game, they tend to share similar friend groups with demographics and 

The personas, including survey and interview data, were used to build out scenarios, goals and expectations that assisted in fleshing out a general Journey Experience Map. The Journey Experience Map documents Dungeon Master(DM) and Character Player(CP) processes for preparing and executing a D&D campaign from start to finish. I had the chance to empathize with and understand their frustrations along the way, mapping out the process in stages. I rated their satisfaction to reveal opportunities that could greatly improve their experience without infringing on some of the more traditional aspects of the game they found enjoyable.

Then, I developed a comprehensive list of goals and expectations based on the revealed opportunities learned from the experience journey map for both DMs and Adventurers. This included competitive research as well as drawing from my own experiences and observations within the D&D game space.

Research results concluded that hero visualization and management, simplified battle planning, and combat visualization were among the top frustrations for DMs and Adventurers. I decided to add a few more of my own to round out a more complete one-stop-gaming experience, including a Campaign Manager with narrative/quest builder and Arena Combat for live AR combat hero battle testing and optimization. Add-ons outside of the survey feedback will be tested for UX/UI as well as game experience efficacy.

Before pursuing an interface and design direction, I had to clearly define opportunities as functioning features the user will interact with to complete tasks as extrapolated from the Experience Journey Map. Each feature is fleshed out, user benefits with desired results clarified, and an assigned user category is designated to be prepared for use in the user flow chart. Click on the Feature table for details.

D&D ARCS targets two experienced key users in the TTRPG space, (Dungeon Masters and Adventurers) with unique features that enhances the experience and optimizes gameplay:

Adventurers:

  • Hero Visualization (AR)
  • Hero Manager
  • Combat Arena (AR)
  • Combat Visualizer (AR)

Dungeon Masters:

  • Combact Visualizer (AR)
  • Combat Builder
  • Campaign Manager

The Design Process

Product Strategy

Before design can begin, product goals must be clarified by establishing user features, defining applied technology, exploring creative references and other usability expectations. These are extrapolated from the research documentation along with with observational analysis of the D&D fantasy gaming space. This core data will inform a comprehensive user flow chart which will guide how the ARCS user interface is designed, developed and optimized for the end user while keeping true to the research and goals established.

User Flow Chart

Then, I developed a working user flow chart in Figjam to visually plan and document the ARCS user journey. Additionally, the user flow helped expose optimal routes for task achievement and maximize satisfaction. This also illustrates how, when and where shared data is exchanged so DMs can sync their campaign’s with their selected Player groups and Adventurers can reliably build and save Heros.

Creative Research

Equally important to the interface is the creative visuals and design of the user experience. Keeping in mind that first and foremost, the ARCS app is not only a functional tool, but must also play a role in visually stimulating, accurate character portrayals and combat scenarios. Assisting player imagination is a top priority D&D players take seriously with very high standards.

My competitive research specifically targeted the original D&D Beyond mobile app and it’s UI. I also referenced D&D modules, printed manuals, and Kickstarter games within the same role playing space. This research challenged me to make a better interactive product that would improve upon what is already accessible to fantasy Gamers.

herofilter-lowfiherofilter-hifi
heroviewer-lowfiheroviewer-hifi

Low-Fidelity Wireframes

Next, I created initial low-fidelity wireframes to visualize the layout and realize potential design direction suitable to the user’s experience. The ultimate goal in this process is to basically flesh out both user flow and interface in it’s rawest form to provide the best user experience possible. This will limit frustrations and provide maximum viability as empathized in the journey experience. Updates are actively made jointly to the user flow chart and low-fidelity prototype designs throughout the process to optimize and properly balance the experience at both UI and UX levels.

Examples provided include before and after Low-Fidelity and Hi-Fidelity 1st generation UX/UI designs. Some designs include heuristic updates, but not exclusive.

Hi-Fidelity Prototypes

Working Prototypes Created in Figma for i1 Usability Testing

A hi-fidelity prototype was then created from the low-fidelity wireframes with a fleshed out user interface(UI) and design. UI/UX refinements were ultimately revised in the user flow chart and likewise throughout the hi-fidelity prototyping process.

Hi-Fidelity Prototypes Developed:

  1. ARCS Hero AR Visualizer Process
  2. ARCS Arena Combat AR Visualizer Process

All prototype UI framework and designs were created using Figma. Artwork was pulled from fantasy references with photoshop assistance. Hi-fi working prototype demonstrates Hero Visualization/Hero Manager and Combat Arena features for iterative testing.

Design Iterations

Usability Test Plan

Phase one of user testing was set up to test the objective-driven processes of two key product features using Hi-Fidelity Figma prototypes:

Test Plan Phase One:

  1. ARCS Hero AR Visualizer Process
  2. ARCS Arena Combat AR Visualizer Process

First, a comprehensive set of tasks were given to 10 TTRPG players to complete for two different ARCS features. When completed, followup questions were asked about their experience, and graded them with a 5-star rating system. Next, user feedback and comments were compiled, and averages of user ratings were calculated for consensus. Finally, a thorough review with heuristic assumptions were conducted to empathize with user successes and challenges—this determined i2 actionable items.

Hero Manager - Hero AR Visualizer Design Iteration i1

Pulled actionable items from the Usability Test Plan results and added a few heuristic updates of my own:

Actionable Items from the Usability Test and Heuristic Assessment:

  1. Logo Add for more consistent branding
  2. Update AR View button and icon for easy recognition.
  3. Update icons; removed ‘in-campaign’ button; add delete button and text headings for each button.
  4. Move ‘In Campaign’ / ‘Active’ identifier to the upper left corner for visual access. Add both to search filter.
  5. Add slide handle to show hidden content volume
  6. Move icons in main bottom nav to better serve the Hero category. Update the ‘AR Settings’ and ‘Account’ icons for better visual depiction.

Conclusion

A Real Time AR simulator for an Optimal D&D Gaming Experience!

The end product is a well designed, easy to navigate D&D AR Simulator that delivers an exciting gaming experience while optimizing preparation, so DMs and Adventurers can spend more time enjoying the game, and each other. i2 testing continues with results pending…stay tuned!

Developed concept promo videos I created to help push features to partners and investors interested in bringing the project to market.

Growth Achieved:

  1. Build Low- and Hi-Fidelity Prototypes using Figma
  2. Figma dropdown menus, sliding menus, buttons, and other interactive elements.
  3. Building out journey maps, personas, user flow charts, and usability test plans for AR environments.
  4. Low-Fidelity Wireframes for concepting interfaces and interactive Hi-Fidelity Prototypes with design iterations.
  5. Augmented Reality interface UX/UI design

Areas of Improvement:

  1. Better Time Management: The project was done while learning Figma simultaneously causing an extended timeframe.
  2. Dungeon Master Support: I would have liked to flesh out the DM support user experience – never had a chance.
  3. Character/Hero Dev Process: Never fully explored how Players can build/roll new Heros and what the CS sheets look like. This would be similar to D&D Beyond; as this app is built to sync with their character sheet builder.
  4. Figma Variants: Need more training on implementing variant code builds. (ex. Loading % Counter on opening gateway)
  5. Research Data and Metrics: Due to time constraints, I would rather build the data points with real surveyed and measurable data. Data was complied based on my own experiences and competitive research for expediency.

Lessons Learned

This was an Augmented Reality mobile project done through IxDF (Interactive Design Foundation). From beginning to final prototype, I chose this mobile interactive support tool based on my love of the fantasy genre and my own D&D TTRPG experiences with such fond memories of my childhood playing with family and friends.

Understanding the process of campaign preparation and the challenges associated with delivering combat experiences including assisted visualization was revealing, and profoundly opinionated across the spectrum. Rest assured, the biggest challenge I have experienced with this project is the overwhelming depth and extensive detail to which I have only scratched the surface. There are many lessons learned throughout this journey, as well as those that could use improvement or continued exploration.