A new encounter feature added to the existing D&D Beyond mobile application.
To kickstart the process of introducing a new feature, I initiated by crafting a survey and seeking out participants with prior experience in playing D&D. By targeting individuals well-versed in D&D, I aimed to uncover the challenges they encountered when tracking character initiatives and managing enemy encounters. Simultaneously, I sought to understand the specific features and functionalities participants were seeking in an encounter tracker.
The Most Difficult Part of Tracking Combat Initiative
-When summons have same initiative
-New enemies or player characters roll into initiative after combat has already started
-Keeping the order
-Lack of visual aid
-Tracking bonus actions
-Spell activations and debuffs times
-Circumstances changing initiative during combat
-Tracking buffs or effects
Kinds of Features Users would like to see in a Digital Combat Tracker
- A way to track spell effects and how much longer they can last for
-A clear distinction of whose turn it is
- Clear display of the initiative stack, with the option to hide enemies or NPCs that have not been encountered yet.
-The functionality to advance to the next turn, causing the visual stack to shift down, leaving the current turn at the top.
-Health bars to show character health, and enemy health(only visible to DM)
-Ability to keep track of HP and status effects
-A reminder to for players if they have to roll a save(either the beginning or end of their turn)
-Easy to use, not overly complicated
-DM can see health bars for everyone, status effects, a place for players to take notes on the encounter that all players could see
I began by constructing the Task Flow to guide my understanding of the typical user's journey when it comes to creating a combat encounter within a digital tracker. This step was essential in breaking down the user's actions and interactions to ensure that the design would align with their expectations and needs.
Once the Task Flow was created, my next step involved developing a User Flow to illustrate the various pathways and options available to users. The aim was to map out distinct routes, with the majority of them leading users toward the seamless creation of a combat encounter, ensuring clarity and efficiency in their journey.
After finalizing the User Flow, I transitioned to crafting wireframes within Figma, comprising a total of nine pages. I then moved on to constructing a mid-fidelity prototype to validate the user-centric design flow. Following user testing and feedback, I extended the design and user flow with the inclusion of additional pages, such as a swiping animation and a dropdown for enemy information. This expansion resulted in a total of 16 pages within the prototype.
Given that this project involved the addition of a feature to an established application, I dedicated significant attention to maintaining consistency with the existing color palettes and design styles in my high-fidelity design. I used screen captures from the existing application as a point of reference throughout the design process.
During the development of the high-fidelity pages, I encountered two potential design choices for the "add" button, which allows users to include characters and enemies. I created both designs and conducted a preference test with four users to gather insights on which option they believed harmonized better with the overall design.
After concluding the user preference interviews, I proceeded to develop the high-fidelity designs. As the high-fidelity design neared completion, I found myself working on a total of 17 pages to craft the user flow for the combat encounter. The user journey begins within the existing Campaign page of the D&D Beyond application and then transitions into the newly added section of the application.
With the prototype created I was able to oversee usability tests. I was able to find 4 participants to test the new feature for the application. Each participant was told to go through the process of creating a combat encounter and saving the encounter. The usability tests helped me build out an affinity map to show what aspects of the flow were functioning and what areas needed to be improved upon. A recurring comment from users was wanting to be able to delete old encounters from the encounters tab as well as there being issues with there not being a clear separation between enemy and character on the create page.
With the user feedback from the participants I was able to make edits to the high-fidelity designs to help improve the user flow of the new feature. I made extra pages to allow for the created encounter to be deleted from the “Encounter List” page when the user is finished with it. There is now a "swipe left to delete" action added to the original page for the “Encounter List”. I added a header to the “add character and enemy” page to help differentiate between the characters and enemies when they’re listed out. I created a page to show what happens when an enemy is killed. I moved the “Add Initiative” header from that page to be closer to information.
This project spanned approximately 5 weeks, involving phases of research, design, testing, and iteration. The objective was to seamlessly integrate a new feature into the existing D&D Beyond application, aligning with its functionality and design aesthetics. Working on this design was particularly enjoyable due to the challenges posed by adhering to an established style guide. In the absence of an official style guide, there were instances when locating the precise colors or images proved challenging and necessitated creative problem-solving. Overcoming these constraints was both rewarding and a valuable learning experience. Thank you for reading.