D&D character creator
Background
I recently used D&D Beyond to build my first character and as a new player, I found the tool inconsistent and the guidance confusing. I was looking for a meaningful design challenge while awaiting employment authorization in the US (some context) so I saw an opportunity to improve the experience through a concept redesign.
Goals
Reduce cognitive load to avoid overwhelming new players.
Bring information clarity so players understand their choices.
Improve UI consistency so players can focus on their character.
Outcomes
Anecdotal feedback so far:
Role
Soloing the end-to-end UX/UI design process.
Collaborators
Had some help from friends who are experienced with D&D and with running beginner campaigns.
Audience
People of all experience levels use the character creator but I intend to focus on newer players as it helps limit the scope and I think a redesign would benefit them the most.
Main tools
Work in progress
Jump to
Approach
My quests for this campaign
Early on I saw the potential for this to be more than a casual side project:
I wanted to practice my design skills by treating it like a real project, using a structured process, validating ideas, and applying realistic restrictions to balance desirability, feasibility, and viability.
I also saw it as an opportunity to test different AI models and explore how they could enhance each step of my design process.
With quests accepted and a plan made, I got started.
Problem
Finding the BBEU (Big Bad Evil UX)
Creating my D&D character surfaced several problems I felt could be solved through redesign but I wanted to make a more comprehensive, considered list of issues.
Performing a detailed analysis
I started with a heuristic analysis of the flow, noting where it failed common UX principles like discoverability, cognitive load, and visual hierarchy.
Several recurring issues became apparent, including key problems to focus on:
The DnD subreddit was a great resource for getting insight into how the community felt about the flow:
User testing with a new(ish) player
Alongside my analysis, I asked my wife (who has limited D&D experience) to create a character:
I observed her interactions and documented moments of confusion, hesitation, and friction. While some uncertainty was expected, several additional pain points emerged:
Video showing a test of the current character creator. Browsing classes and species is frustrating because scroll behavior is inconsistent, leading to confusion and extra effort.
Setting some goals
With pain points identified, I refined some goals to guide my design work:
Reduce cognitive load to avoid overwhelming new players with too much information at once.
Improve information clarity so users better understand what their choices mean and why they matter.
Improve consistency and navigability so players focus more on choices and less on figuring out the interface.
Measuring success
This isn't something I'm too concerned about, with this being a personal project, but if I was part of the D&D Beyond team I would certainly be thinking about ways to measure success and confirm we've met our goals. Some metrics might include:
Reduced drop-off and increased completion rates, which could suggest players were less frustrated and better understood the new UI.
Increased retention rates, which could indicate a satisfaction with the new flow and a desire to come back to create more characters.
Fewer negative forum posts, which could suggest less confusion around choices and more confidence in creating a character.
Time on task is another popular metric but I assume that some players would be happy to spend more time thinking about the character they want to make and so duration changes wouldn't necessary be a bad thing.
Discovery
Investigation check (with Guidance)
For the discovery phase, I enlisted the help of Perplexity. It was handy for searching the web and summarizing results for review.
Analyzing alternative flows
My first step was to see how other character creators approach the process. I had the Player’s Handbook and Baldur’s Gate 3 in mind, but I also looked at Roll20 and Dungeon Master’s Vault as they’re popular with the community.
Some key findings from my analysis:
The Player’s Handbook has a helpful feature called Building Bruenor, which explains each key decision through an example of Bob creating his character, Bruenor.
Baldur’s Gate 3 is streamlined. Most decisions are pre-selected, with only key information displayed and extra details available via hover tooltips.
Dungeon Master’s Vault uses a questionnaire to help first-time players decide what to pick and separates optional “description” choices from required mechanical options.
Roll20 has a layout that uses selection on the left, details on the right, making browsing easy. It also features a review page to help players double-check selections.
Beyond D&D wizards
I also looked at wizard-style flows outside of D&D character creators, used by brands like GOV UK, Notion, Airbnb, Discord, and LinkedIn. Some things stood out:
Most show one task per page, making each flow easy to follow and keeping cognitive load low.
Most use big, bold titles (like D&D Beyond’s marketing site), helping focus users on the task at hand.
Airbnb’s Experience flow has a Get tips option, similar to Building Bruenor in the Player’s Handbook.
New player mistakes and reasoning
I wanted to understand what problems new players face when creating their first character, no matter where or how they do it. There were some recurring problems relevant to my project:
Balancing combat ability with roleplay aspects is tough.
Confusion over which rulebooks to use.
Auto-fill tools lead to players completing characters without understanding their features or rules.
Confusion about how leveling works and how stats are affected.
I also looked at why new players choose specific classes, species, and backgrounds:
Class: combat style, party role, theme, and simplicity (for new players).
Species: benefits, visual/theme appeal, campaign setting.
Background: similar to species with benefits being more important with the 2024 rules.
Building personas from these learnings
Everything I learned during discovery got me thinking about user personas. A set of thoughtful personas can help to humanize abstract data and give me something to periodically review my designs against. This can help ensure I'm including content that genuinly matters and not adding unnecessary fluff.
I asked ChatGPT to act as a user researcher and fed it my notes along with its own research, so we could come up with four personas. I was influenced by Maze’s guide to user personas as well as a Medium article about how to build personas better and told GPT to avoid any demographic data and focus on player experience, character creation approach, and goals for their first character.
I used Gemini to help me create the images for each persona, which realistically adds no meaningful value but it was fun to do.
Putting it all together
With a growing list of pain points, ideas, and user needs, I created a user journey map to bring everything into one place. Mapping the steps, actions, and emotional states of a new player helped me identify where breakdowns were happening and where opportunities for improvement had the most impact. It also gave structure to earlier research and made it easier to prioritize solutions in context.
To accelerate the process, I used ChatGPT to convert my notes into a structured table and CSV, which I then used to generate FigJam stickies. This saved time on formatting and let me focus on reviewing and refining insights.
Ideally, a journey map like this would be built collaboratively with stakeholders, with opportunities prioritized through voting. For now, I selected three areas I believed would have the greatest usability impact:
Clarify availability of classes, species, and backgrounds. When content is locked, explain why and how to unlock it.
Make spell selection more visible. Move it to its own step after ability scores to reflect how preparation depends on stats.
Auto-select starting equipment. Help prevent players from starting campaigns with no gear or low AC.
Ideation
Casting Conjure Ideas
With a solid foundation of research, I turned to information architecture to see how the flow could be reshaped across pages more focused on individual tasks. This step would then give me the structure needed to map user flows, which I prefer to establish before mockups so I can think deeply about the UX without being distracted by visuals.
Updating the information architecture
The existing IA was dense, with several pages overloaded by options. I restructured it to make two key improvements:
Adopting a one-action-per-page model, allowing players to focus on a single decision at a time and reducing the risk of being overwhelmed or missing choices.
Adjusting the order of decisions to reflect dependencies, such as moving skill selection to follow background and ability scores.
Streamlining the IA reduced complexity and improved clarity, though it also lengthened the overall flow, something I needed to flag for testing.
Moving on to user flows
With the IA restructured, I began shaping the new user flows. This was the first opportunity to define the experience, highlight uncertainties, and surface potential design issues. Key considerations included:
Variation in player paths: Each character’s flow differs significantly, making it challenging to maintain consistency.
Stepper complexity: Some players face so many steps that a full stepper could become unwieldy and add little value.
Streamlined options: Experienced players might benefit from a shortcut flow as they are more likely to know what they want achieve.
Duplicate choices: Certain combinations create repeated selections (like Human and Outlander both having a language choice). Grouping these choices could reduce redundancy.
Wireframing ideas in Figma
Unlike my previous role, where an established design system limited the need for wireframes, this project required a fresh foundation. Wireframing allowed me to quickly explore layouts, experiment with navigation, and assemble a lightweight prototype for early testing.
I began with a minimal concept but quickly realized it couldn’t support D&D Beyond’s complexity. The platform requires organizing and filtering a vast number of character options, so the design had to prioritize navigability over visual simplicity.
Testing early for quick feedback
Once I had wireframes for the full flow, I created a simple prototype using class, race, and background defaults. I then tested it with a few players to evaluate clarity and navigation. The task was straightforward:
Testers responded positively to:
But testing also revealed key areas of confusion:
Next steps
Replace or explain D&D-specific terminology with hoverable tooltips or inline help.
Align the star icon and “Recommended” section visually to reinforce their connection.
Redesign the skill proficiencies page for clarity and practical value.
Make interactive elements more discoverable so players know where details can be expanded.
There are also some secondary refinements to consider:
For pages that require a specific number of selections, consider a more explicit title or add a quantity indicator to give players context.
Provide a clearer breakdown of ability scores and their impact, particularly for new players.
Shaping early visual directions
With wireframes tested, I began exploring the visual design. This took two parallel paths: traditional design exploration in Figma, and more experimental ideation using AI prototyping tools.
Experimenting with AI
I started with AI, applying research insights and wireframe structures directly into prompts that I fed to tools like Figma Make, Lovable and Bolt. The results were mixed: The UI styles felt generic, and the fantasy inspiration I’d asked for was often absent. But it was amazing to see how easily I could generate full prototypes in minutes that might otherwise take days, allowing me to click through different flows and not just see static images.
That said, I felt that Bolt's output was interesting. It treated supplementary details as secondary information, putting the focus on key details while making further reading and comparison easy.
Here are some designs from Bolt, Lovable, Figma Make, and Base44. This was my first experience with prompting designs and there is clearly a strategy to getting the AI to understand your requirements.
Traditional Exploration in Figma
Alongside AI, I sketched out more grounded directions in Figma, aiming to stay true to D&D Beyond’s brand language. Despite variation across the product, certain traits stood out: bold typography, large imagery, ornate dividers, and decorative borders. I used these as anchors for experimenting with foundational elements like color, type, and early page layouts.
For the Class selection screen, I tested several versions that balanced immersive branding with clear, scannable information. This surfaced a key challenge that will carry through the project: making the experience visually engaging without overwhelming players or distracting from the decisions at hand.
