Dungeon Master app

TLDR Together with a team of designers, I developed an early interactive prototype for a scalable admin tool for digital freelancers. Having just finished a branding project with the same client, I mocked up a polished UI for the prototype as well.

Tools: Figma
Skills: UX Design, Prototyping, Usability Testing, UI Design

A section of the Dungeon Master prototype's dashboard.

The Challenge

Coordinate without mandating

Raid Guild is a Decentralized Autonomous Organization (DAO). It's sort of a co-op, coordinated on the blockchain. There's no hierarchy, and everyone contributes what they want to. The Guild takes on jobs (called Raids) by assembling teams of interested experts and making a pitch to the client. At the start, the Guild was small enough to coordinate Raids manually. But as it grew during the crypto boom, Raid Guild needed better tools to manage over a hundred freelance members.

Research

Hands on experience

A section of a digital whiteboard containing sticky notes outlining the flow of a Raid Guild project.

In addition to conducting interviews with Raid Guild's project managers, as Guild members all of us had participated in Raids before. There's no research quite like trying something for yourself!

Finding the balance between flexibility and structure was our highest priority. If the app was too locked down, no one would want to use it. If it was too open, no one would know how to use it.

So we developed some key guidelines for our design.

Dungeon Master trusts its users. Raid Guild values agility over durability. Giving the user greater control over the app opens it up to human error, but also allows it to be useful in more situations.

Dungeon Master is self-evident. A user should be able to pick up and use Dungeon Master without being trained on it. Structure should be provided in the form of informative copy, tutorial elements, and tooltips.

Dungeon Master is not a project development tool.​ There are plenty of those out there already, with bigger teams and more experience. Instead, Dungeon Master should allow users to integrate their preferred project management tool.

Design

Automation as a support tool

We decided to incorporate automation only where it supported a user's manual use of the app. We designed this app before consumer AI tools really took off, but the idea was the same. The app didn't do anything that users couldn't do themselves, but it auto-populated some data and structures that our users found useful.

An example of a project view in the Dungeon Master prototype, showcasing the Update Feed.

An example of this is the Update Feed. Project managers need a way to quickly check the status and history of a project. Dungeon Master isn't as granular as a full project management app, so most updates are input manually, as free text. But to reduce busywork and increase readability, certain actions trigger an automatic update, using settings that app administrators can edit.

Testing

Clarity is key for adoption

The prototype dashboard for Dungeon Master.

We created an interactive prototype to allow users to explore the entire flow, from finding an unclaimed project to shipping it. The biggest friction point we ran into was unclear button and field labeling. The Guild already uses a lot of jargon, and we were trying to formalize it through the app. As a result, we opted to be as clear as possible, even if that meant losing some of Raid Guild's signature feel.

Branding

Expanding the style guide

I had also just finished a project helping Raid Guild build the style guide for their website. I took that work and applied it to a Dungeon Master screen.

A page from the Raid Guild style guide exhibiting its Hesh ethos, with strong black lettering and an intense pink gradient background.

I quickly realized that the style guide wasn't granular enough. We built it for a website, and it didn't have visual language for displaying dense information. I had to adapt styles used on interactive elements, like buttons, since the original versions looked overwhelming when placed close together in rows, as they might on a dashboard.

A section of the Dungeon Master prototype's dashboard.

The live version of the app toned down a lot of Raid Guild's signature look for the sake of clarity, but I wanted to stay as true to the spirit of the brand as possible, without sacrificing functionality.

Result

Conquering the dungeon

Faced with one of Raid Guild's most ambitious internal projects, we delivered a thorough and tested prototype on a tight timeline. This project became one of the cornerstones of the live app being used by the Guild today. You can check out the prototype in Figma, along with my visual mockup.