During a RPG game session, the game master has to manage a big amount of information, keeping track of characters,enemies, their power, life points and other elements. There are a number of available apps on google play and app store, but none of them provided a fluid and hassle-free experience, which is a crucial element, as interruptions break the flow of the game session. Aiming to fullfil this need, I decided to create my own, the RPG Helper, providing a practical touch-based, fluid user experience. Below you can read about the thought and app creation process.
"The personas created based on a 60 participants poll helped to consider the needs from different users"
Even though I am a RPG Player, I started with the creation of personas to a get a better view of user profiles and
possible use cases. The personas were based on the data collected from a poll with 60 participants. Though I went quickly over this first iteration, it helped with the requirement gathering and made me consider the possiblity of having different versions of the app for Players and GM's, which I decided to leave for later updates, focusing on creating a MVP for the moment.
After going over the requirement analysis, I proceeded to create the first wireframes, considering both the Minimum Viable product and the extra tools that should be added later. The app had to work properly using the phone in vertical position, so it wouldn't require the use of both hands and had fit in the narrower screens like the iPhone 5, that made the task of fitting all the features quickly accessible quite challenging.
"The focus was to include all the crucial information in one screen, while at the time same time allowing to quickly perform the most recurrent task"
I wanted to Include many auxiliary features to avoid the need to change apps during the session, but the main focus was to provide a practical tool to manage the battles, including all the crucial information about the participants, while at the time same time allowing to quickly apply damage to characters, which is the most common action performed. A drag and drop system, with a permanent on-screen num-pad was the solution to reduce the number of "clicks" required.
First wireframes
"The always-on num-pad and a drag and drop solution resulted in 50% less "clicks" required when comparing to competitor apps"
In the first tests I noticed that though the sound effects were nice to have, "character condition" was a game rule that affected the game a lot more directly, and hence I included them in the space originally set for the sound effects.
Being happy with the proposed interaction flow, I proceeded to work in visual style of the app. The fantasy nature of Dungeons and Dragons asks for a fantasy \ medieval direction, but I also had to consider current app design trends. I came up with a couple different styles, from a pixel art 90's RPGstyle to the standard Google Material, but ended-up with darker colors and solid icons.
Next step was to produce the high-fidelity mock-ups on photoshop. Providing a good sense of the final product and led to some other adjustments in the positioning of certain features like the sound effects and reducing the amount of data shown in smallers screens. It is still unfinished and requires a lot of polishing.
Still unfinished HF mockup
I am currenlty working in the development of app. I decided to go for the hybrid aproach using HTML 5, Javascript and CSS and Cordova\Phonegap, as It would allow me quickly port the app to Android and iPhone. I'm also use SaaS, Angular JS and jQuery.
Based on feedback from the Dungeons and Dragons Community, I plan to add more random generators and a service to allow players and GMs to keep their game info accessible from anywhere using the cloud.
