Skip to content

Design Specification

Isabel Giang edited this page Apr 13, 2017 · 53 revisions

Problem:

For an experienced Dungeons & Dragons player, leveling up a character is easy, but for novice players, it can be a confusing mess of information. This process is outlined in The Dungeons & Dragons Player’s Handbook, which is large, heavy, and costs over $30 (Amazon). For what is actually meant to be a simple process containing 2-4 specific steps, each individual player must sift through hundreds of pages of new attributes for their character’s specific class, the new spells available, and the spell index in order to get the information necessary to complete those steps. Most groups, or campaigns, only have one of these books between the 4 to 7 people, so when everyone levels up, it is a time inefficient and difficult-to-learn activity. All in all, it can be very frustrating to new players, and inconvenient to the experienced.

While the Wizards of the Coast - the makers of Dungeons & Dragons - have made books that do a wonderful job of easing players into the game mechanics of Dungeons & Dragons and are particularly detailed with the process of leveling up, the information in these books are not an accessible resource to everyone due to the cost and the size of the books, which may be intimidating and inefficient to novice players.

Although there are apps that allow players to store character sheets and automate the leveling up process, these apps do not provide sufficient information to give insight into the choices, or help them with spell decisions, and these players often end up have to use the handbook. Furthermore, these apps require you to use their entire character sheet, they are inflexible for different play styles. Players are forced to copy over information that may already be tracked in other campaign management tools like Roll20 or on the standard paper character sheet. Copying over every datapoint just for the leveling systems on these apps that poorly automate the process is not efficient.

Through our design, we hope to automate the leveling up process for Dungeons & Dragons by providing a simple, convenient and quick way for all players to access the information to level up without needing to use books. Additionally, our solution will have the flexibility to accommodate users who track their character on paper, other D&D apps, or digitally on Roll20 and be learnable enough for novice players to use easily without inconveniencing veteran players.

Solution:

Overview

Level is a web-based application that optimizes and guides users through the leveling-up process for Dungeons & Dragons by acting as an reference that internally stores all the necessary information for leveling up in one place. This is opposed to the conventional level-up process which requires cross-referencing multiple different resources and scanning through many different pages to find the relevant information. By being web-based with mobile compatibility, Level will be accessible to users who do not have reliable mobile phones.

This application also provides a clear step-by-step procedure on how to complete a level-up. Users are able to learn from this application not only the specific bonuses, spells and abilities that they can potentially gain from each level-up, but also what exactly these different spells and abilities do. As leveling up in Dungeons & Dragons frequently requires choosing which of these their character gains, having this information readily available can help users make these choices more quickly and efficiently as they can know immediately the gameplay implications of their choices.

Branding

Logo

The name of the application, "Level" is intended to center the overall theme of RPG gaming - since leveling up is an important mechanic in RPG games - and to evoke both the main purpose of the application, which is to help facilitate the level-up process of Dungeons and Dragons.

Tagline

Updating D&D 5e Characters Made Easy

This tagline quickly summarizes the scope and the purpose of the application while being easy to remember.

Colors

Kelly Green

This color represents the forests and grass lands commonly associated with these fantasy adventures, as well as representing growth, which is what leveling gives to each character.

Grays and Whites

These colors pair well with the green to give a clean, simple, modern feel.

Fonts

While this font was just the automatic font on Sketch design application, its simplicity with sans-serif, and modern narrow lines blended into our vision, so whether or not we change the specifics, we will probably stick to something along a similar path to this Helvetica knock-off.

Mock-Ups

Homepage

This is the homepage, which users will see upon opening the application. Regardless of the class and level selected, throughout the level-up process, the user will always iterate through the Homepage, then Step 1, and the End Results page, respectively. Whether or not the user interacts with Step 2 or Step 3 is dependent on the class and level of the user.

Class and Level Selection

Users can select the class of their character and the level to which they are attempting to progress by utilizing the dropdown menus (Figure 1a, Figure 1b). Making this choice here is important as the information needed for each level-up is varied and organized based on these two factors.

After selecting their class and level-up choices, the user can click on the "Let's Go" button (Figure 1c), which will progress the application to the Step 1 Page.

Figure 1

Homepage

Step 1

Increase Hit Points

Users are prompted at this page to roll a 10-sided die to determine the number of hit points added to their character. An image of a 10-sided die is provided to assist novices who may not have familiarity with the different pieces. (Figure 2a) This is a step common to all level-ups that will always be completed by the player. As such, the content of this page does not change based on the prior user inputs.

Progress Bar

At the bottom of the page, a progress bar is provided (Figure 2b). A green fill is used to indicate the level of progress that the user has made in the level-up process. This progress bar is present at the bottom of the page for all steps. The progress bar is also intended to evoke or mimic an progress bar that tracks the accumulation of experience points that eventually results in a level-up, which is a common gaming mechanic.

Reference Pop-Up Window

One of the fundamental features of Level is the database of information that can be internally referenced to provide the user with definitions for different terminology or explanations of different mechanics.

This is particularly useful for novice Dungeons & Dragons players to help them become more familiar with the game, but it is also useful for veteran players to quickly determine the mechanics of the many different spells and abilities that are referenced in the level-up process.

Users interact with this feature by clicking on green text on the page - interactive text is visually encoded through green for the application. (Figure 2d) An example of the feature in use is shown through Figure 3, which provides an explanation of hitpoints, where it is recorded on the Dungeons & Dragons character sheets, and its context in the leveling up process. (Figure 3a, 3c, 3d)

Users can close out of the window by clicking the "x" in the upper right corner. (Figure 3b) This is operating on the assumption that the users of this application have some familiarity with modern web applications and browsers, as interacting with an "x" placed in the corner of an application is modern convention.

Next and Back Button

NOTE: Not shown in mock-ups

As this is intended to be a reference and not an application where users store the choices that they make, users will be able to switch back and forth between the pages for all of the steps using the next and back buttons.

Figure 2

Step 1 Page

Figure 3

Picture of reference window Steps N Due to the nature of the leveling system of Dungeons & Dragons, the content and number of Steps after Step 1 vary greatly based on class and level. These Steps generally represent where users gain new spells, abilities or bonuses on the level-up process. The spells and abilities, and the number of spells and abilities that a user is able to learn are restricted by the users’ class and level. For example, only magic-using classes can learn spells. The Action Surge ability, as another example. can only be learned by Rangers and Warriors. Although Wizards can learn spells on leveling-up, a Wizard will only learn two spells at Level 2. Whether a user will have the opportunity to gain these spells, abilities and bonuses is dependent on the level in question – new spells or ability will not necessarily be gained every level, nor will the increases to Attributes, Ability Scores or Proficiency be necessarily the same. For example, the Action Surge ability – although all Rangers can learn this ability, it is not available to learn until Level 3.
The purpose of the Steps is to inform the user about whether or not they learn abilities or spells at their current level, what the available abilities and spells are for their level, whether they or not they gain bonuses, and for whether or not those are gained for Attributes, Ability Scores, Proficiency or something specialized for the class. In the context of the level-up process for the class Ranger for Level 2, only 2 additional Steps are necessary. However, this will change for other classes depending on the changes required on a case-by-case basis.

(NOTE: Although radio buttons are shown in mock-ups at this time, in finalized versions of our interface, we would use bullets or another form of list formatting that does not imply that the user must choose something).

Figure 4

Step 2 Page

Figure 5

Step 3 Page

End

The end screen indicates to the user that the level-up process is complete - also mimicing the idea of experience points (the progress bar) culminating in a level-up after reaching its culmination end point. Users can cycle back to the homepage by interacting with the "Level Up" button at the bottom of the page. (Figure 6a)

Figure 6

End Result Page

Clone this wiki locally