UX Design — Yağmur

Story Keeper

A work in progress

Dungeons and Dragons was chosen for this project. It came to be when I was trying to teach my friends how to be a dungeon master. I have been doing it for so long that things that come to me as second nature to me are hard to learn. However, I feel that everyone can be a great storyteller when given the right resources, and I wanted to put together a very simple ux design for a mobile app with limited information for beginners to play around without being overwhelmed by everything. A basics toolkit so to speak.

Softwares used so far: Photoshop, Illustrator, and Miro

Overview

Everything can be overwhelming when you are first starting out. With a game like DnD that has a massive catalog, it can be pretty scary to want to be the one that runs it all. If we limit the possibilities of what a DM can do, it can be much easier for someone to want to pick it up. Smaller maps, less monsters and villains, overall less to keep track of. This prototype is supposed to be a starting off point only that DMs will hopefully feel confident enough to never use again. The prototype also allows for personalization so that the DM can have fun with their planning and turn it into a little storyboard if they choose to do so.

Interviews

Through interviews with established DMs and newbies, I was able to make a list of the things that DMs find necessary and overwhelming, and through elimination, I was able to come up with this simple “necessities” that should be included as a starting off point. I also had these people look through pre-existing apps and take notes of what they find useful and what they find overwhelming.

Takes the user to the overview page of the last active game.
Gives the user to decide whether they want to load a game someone has shared with them or manually put in the campaign information themselves.
A list of games that have been archived by the user. Clicking on a campaign takes the user to the overview page of said campaign.
This page allows the DM to see the characters, NPCs, treasures, inventory, and inn/shop inventory with names and simple descriptions only. It is simply an overview of the most important things.
A page where all of the player’s characters are visible with names, conditions, HP, AC, race, and class. Each character has a toggle to minimize their information to their name and age. This allows to keep the page less busy and helps keep track of what happens each round.

This page also can be used to keep track of how characters are affected in each round.
This page is a DM character tracking sheet with colors, and a photo that the players or the DM can pick for their liking. It allows for personalization and makes the game more friendly other than the busy character tracking sheets. It allows for a slower play also.
The encounter builder is likely the most overwhelming page out of everything as it is the main part of the game. The page allows for a bullet point list for important plot points, a list of allies, enemies, and a combat sheet. The compendium of the villains is ideally pulled from the official DnD sources and the app suggests randomized monsters depending on the difficulty the DM chooses for the encounter.
This page is for any notes the DM wants to take for any encounter or plot point. It suggests titles for the beginner such as; worldbuilding, important plot details, secrets, clues, rewards, loot players have, maps, and more.
Lets the user change parts of the campaign by taking them back to the manual set-up page. This is only a button and not a page of its own. Shows as a hamburger menu on the top right corner.

Information Architecture

The sitemap step was relatively easy to put together after narrowing down which pages were the most important for a good campaign. With only 9 pages to think of, the navigation was a breeze.