24hr Challenge: Improving Dungeon & Dragons character creation on mobile for younger audiences, utilizing Gen AI

Project Type: Adding a kid-friendly (10-12yo) mobile feature to the D&D Beyond app that utilizes a generative AI prompting interface

Role: UX/UI Designer

Project Length: 24 hours

Methods: User research, brainstorming, user flows, wireframing, mockups, prototyping

Collaborators: Research participants, Sr. Developer

Reduced complex decision making for children by 60%

✨

Reduced time spent in character creation by 88%

✨

Reduced complex decision making for children by 60% ✨ Reduced time spent in character creation by 88% ✨

How might we make character creation in Dungeons & Dragons more kid-friendly?

Dungeons & Dragons can be an intimidating hobby with a lot of front-loaded information. Learning to play can take days, and even with their proprietary assisted character creation via their app D&D Beyond, the process takes several hours. This involves a lot of complex decision making, math skills, and creative thinking that certain younger audiences might struggle with. It also means that younger or new players cannot complete character creation by themselves without veteran supervision. In the world of AI, is there a way we can streamline this process and prompt the AI to create this character for them in a quick and fun way, reducing the barrier to entry?

Dungeons & Dragons is property of Wizards of the Coast. Any and all branding or information shown here belongs to WOTC and is used solely for educational/personal purposes with no intent for infringement or commercial use.

This project was done in the course of 24 hours. Which means it had a couple key focuses:

  • Learn what kids need/want

  • Create a working hi-fidelity prototype of the new user flow

That comes with the caveat that this might not be as polished as a full end-to-end project, and some parts of the prototype might not work… but the things that were prioritized for the deliverable do work and function.

Hour 1-3: let's reduce the complexity of decisions in the current user flow by 85%

This is the current decision tree for character creation. You can see there are about 5 major decision points (green diamonds), and 7 steps (purple circles) where comprehension and knowledge are mandatory to proceed. Overall, this current flow can take new players (even with the assistance of the current system) about 2 hours.

The updated user flow has 2 major decisions (60% decrease) and 1 step where comprehension is necessary (86% decrease). Overall, in user testing this new flow took new players approximately 10-15 minutes (88% decrease).

Hour 3-5: Brainstorm ways to prompt AI without "prompting" traditionally, and run a user test to gather data

Using FigJam, I brainstormed a few ways of prompting GenAI without using a traditional prompt. How could I gamify character creation and obfuscate unneeded complexity? At the same time, I scheduled a user test with my 12yo cousin who plays D&D to learn more about his wants/needs.

Some of the key insights he provided were that due to how much learning is necessary before you can play, it’s hard to find the time, but he really wanted to be able to play if he could. When asked if he had a preference on how he uses GenAI right now, he acknowledged that something like MadLibs where there is less up front thinking required would not only be helpful but “awesome”, in his own words.

Hour 5+: Gather references, build the style sheet, and start laying out the new flow

Introducing Magus

Much like our beloved Clippy before them, turning AI into a mascot-like character can help add a playful element to the usage. I decided to brand this kid-friendly assistant as Magus, a spellcaster with access to infinite knowledge able to help anyone at any point in their D&D journey.

Magus would walk new players through a customized process based either on Pictures or Words. In Picture Mode, the player likes enough generated images to teach the system what their preferences are. Once enough data is gathered, it can output a new sheet. In Word mode, the player completes a generated 5 question madlib where they fill in the blank (or randomize an option for them), and at the end the system will have enough information to build the sheet for them.

Once complete, the system introduces them to their character and gives them the option to edit things they might not like.

Hour ???: Build a prototype that goes through the two main user flows

Challenges & Takeaways

Current Character Sheet

Redesigned Character Sheet w/ Magus UI

This was an extremely insightful challenge. I learned a lot about working with mobile apps, and iOS in particular. iOS tends to have specific native interaction behavior for things like dropdowns. Originally, I was hoping to have a dropdown for the MadLibs flow, however I also wanted to have a custom text input (not type-ahead), which proved to be nearly impossible given the native behavior on iOS. After about three hours of research (and trying to figure out XCode), I decided on a regular text input field with the option for randomization if someone is struggling to fill in the blank.

There were also things I started building wires/lo-fi for that didn’t make it into the prototype, such as error states and extra UI elements that I felt would be great to build out for a more robust prototype. However, given the time constraints I had to reassess the deliverable to focus on the two character creation flows rather than any excess features I ended up creating as a result of those. Given more time, I’d love to build out Magus further.