Grubby Goblin

Designing a website that connects artists and gamers together to share assets and ideas for use in Dungeons and Dragons

PROJECT TYPE

Independent Project

RESPONSIBILITIES

User Research

Wireframing

Prototyping

Branding

Usability Testing

TOOLS

DURATION

Figma

Procreate

Illustrator

Mural

80 Hours

April 2023

Overview

Grubby Goblin was conceived when I was playing Dungeons and Dragons with a group of friends. I witnessed the Dungeon Master (the game runner) shuffling through papers, furiously looking for a picture of a monster so we could visualize what he was talking about. It got me curious. What are the struggles the DMs run into when running their games?

The Problem

Dungeons and Dragons is a game that has a lot of rules, and information, and the people who run the games have a lot on their plate. On game day, and the days leading up to it, require a lot of preparation. While it is, of course, fun for the Dungeon Master to put forth this effort, there are things that can be done to make the process easier.

The Solution

I created a community-based site that brings artists, writers, and participants in the world of DnD together under one roof, so that they can trade ideas, images and assets with each other.

Research

Background

Budgeting and cutting costs can become essential for couples during the planning process. Although there are many websites and apps that provide platforms for thrifting and buying used products, they tend to be sprawling landscapes and unfocused towards specific needs.

Methodologies

My research plan utilizes the following methodologies to paint a better picture of the path forward:

Competitive analysis

This involves the analysis of potential competitors. The research we obtain could benefit our product by highlighting these site’s short comings, but also build upon what they do right.

User interviews

One on one interviews with people that play or run Dungeons and Dragons, so that I can ascertain what is needed in this community.

My main focus is on Dungeon Masters, but will also interview a few players as well.

Competitive Analysis

To better understand what the world of Dungeons and Dragons needs, I have decided to venture into the world of competitive analysis. The following sites were chosen because they are well known and offer free resources, which will be my main focus for this project.

Straight from the creators, The Dungeon and Dragons official website has some free resources although these mostly involve tips and tricks, and downloadable character sheets. These free resources are useful for learning how to play the game, but the site doesn't offer much in the ways of visual content.

Roll20

Hero Forge

Dungeons and Dragons (Official website)

Roll20 is an online gaming service for D&D and other roleplaying games. Most of the content is available with a subscription but it does offer some free content and resources. At least enough to play a game online with your friends.

Hero Forge is a custom character and miniature creator. Although the miniatures can be ordered for a price, the creation portion is free and can be an excellent way to help visualize your character (with a quick screenshot of course). The site offers hundreds of options to make your character as unique as you want it to be.

Since they are the most knowledgable of the subject, I will be conducting my interviews with DMs, and very seasoned players. It is my hope that this series of interviews will give me insights into what is out there, what is lacking, and what is desired.

User Interviews

The Dungeon Master interview questions are as follows:

  • How many years have you been playing D&D?

  • How do you typically plan your overall campaign when you are the designated Dungeon
    Master?

  • How do you plan your campaigns session to session. What is your method?

  • In all that time, what is are your overall thoughts on the online community? What are the positives, and what are the negatives?

  • When it comes to websites geared towards assets and content, which ones are your favorite, and least favorite? Why?

  • Are there any features that these sites offer that you think of as essential when you are planning your games?

  • Are there any features that you haven't seen, but always wished you had access to?

Research Results

The following are the commonalities and pain points that were revealed during my conversations.

Organization- Organization was a common frustration among 5 out of the 6 participants.

Visual Assets- All interviewees regarded visual assets as extremely important to their games, and believes they are a great contributor to immersion.

Time Management- All participants said they spend a lot, if not the majority, of their planning time looking for assets to use during gameplay.

Personas

I created a persona that reflected the pain points, and motivations that presented themselves during my research

The Dungeon Master persona is an amalgamation of all 6 interview participants.

He struggles with organization, but this could be the result of time management.

The DM feels he spends most of his time scouring the internet for assets, and as a result he has less time to write and plan his story.

My research revealed some interesting new insights, and confirmed some of my hypothesis. I decided to focus less on the organizational side of things, and lean into time management, and the need for free assets.

Since my research revealed the prevalence of laptop useage during gameplay, I decided that my project will not have a mobile version, and would be treated as a companion for those moments.

Design Process

Site Map

I built out my site map and focused on three main sections. I decided to approach the project from the perspective of someone that already has an account and disregard a login section.

This allowed me to focus my energy on the real meat of the site.

Components

I wanted the project to feel like a storybook, or a vintage game.

I want the site to be fun, foster creativity, and and encourage people the play.

To achieve this I have illustrated banners, trees, and bushes to adorn the corners of certain areas of the platform.

I want to create a since of whimsey, and adventure. My hopes are that this stylistic choice will engage the users, and give them a memorable experience.

Wireframes

With my components done I began sketching out low-fidelity wireframes. This stage in the process was very fast, and free flowing.

Mid-Fidelity

Creating mid-fidelity wireframes is one of my favorite parts of UX design. It has the freedom of the low-fidelity wireframes, but at this point in the process you can start to see your creation starting taking shape.

High-Fidelity

This project has been a pleasure to work on, and I had a lot of fun plugging in all my components and illustrative flourishes.

The first thing I tackled in my high-fidelity wireframes was the hero page. I wanted something fun that involve Grubby, and I ultimately settled on an animation.

Here are a couple of key screens from the final product.

Final Prototype

Usability Testing

Once my prototype was completed I found five participants to test my designs usability. The test would see if the project was easy to navigate, and to make sure everything is running smoothly

The Following were the instructions given to the participants.

  • Find some art work

  • Locate "MarkoPollo"

  • Find out more about "MarkoPollo"

  • Find a stor to read

  • Locate "PowerBunni" post

  • Find out what people are chatting about

  • Locate "M _Knight"

  • Find vour profile

The results were in! All participants took the instructions and completed every task with little to no trouble. This gave me confidence that my design was easy to understand and the flow was competent.

Iterations

Through my own observations and the suggestions given to me by my testers, I added the following changes to my project.

Scroll with parent issues- I had some objects that were in “fixed” mode that I changes to scroll.

Fixed spacing issues- This will help with clarity, and making it easier to select the intended options.

What’s Next?

Now that I have fleshed out my project, and its purpose has a tangible vision, I will need partners capable of tackling the backend, to help finish the project.