Tabletop

Tabletop

Tabletop

Tabletop

Making D&D more accessible.

ROLE

UX Designer

TIMELINE

Winter 2021

PRODUCT

A mobile app to make TTRPG game matching easier, safer, and more fun.

TEAM

Adeena Liang

Reymon Pedroza

Shuxin Zhou

Designing player progression systems for engagement and retention.

CONTEXT

We were tasked with creating a mobile app based on a Y Combinator startup for a class. We based ours on startplaying.games.

The recent TTRPG boom from the pandemic and several hit shows such as Critical Role has introduced more and more people to the game genre. I've always been interested in playing, but never had the opportunity to.

ROLE

UX Designer

TIMELINE

January – September 2022

FEATURES

New player engagement systems
Purchase flows & inventory

The problem

How might we make tabletop roleplaying experiences more accessible to new audiences?

Interactive

high-fidelity prototype

Apple Watch preview

THE BACKGROUND

There are now over 50 million D&D players worldwide, with interest surging over the pandemic.

Although the community is bigger and more inclusive than ever, there’s still a large gender disparity.

With a growing player base across all ages, how might we match players with each other across intuitive and safe spaces?

With a growing player base across all ages, how might we match players with each other across intuitive and safe spaces?

Wizards of the Coast, 2021

ROLL FOR INITIATIVE…

I reached out to 10 users currently involved in D&D or tabletop campaigns via the Role Playing Game Association at the Claremont Colleges.

Interview questions

Although users’ backgrounds differed significantly, there were three themes that popped up frequently:

  1. Learning and digesting information.

    Almost everyone I interviewed talked about struggling to learn mechanics and feeling overwhelmed with information as a new player.

  1. Safety first.

    Everyone had started their journey into TTRPGs via close friends or family members, and were fairly wary of seeking out games online with complete strangers.

  1. Scheduling.
    Players said they encountered the most pain points with setting up a time to play together, given their busy schedules. (Funnily enough, every group session I visited was waiting on a late straggler.)

personas, empathy maps, and character sheets(?!)

I initially wanted to encompass both the DM and the player experience. I developed three personas from the user interviews I conducted, but decided to eventually focus in on the specific player-end experience to stay true to the initial problem.

Ideating and wireframing

We looked at apps with some form of “social experience” filtering to get a better idea of how to express a sense of community, safety, and accessibility.

These included the App Store, Airbnb, Uber, Yelp, and Apple Podcasts.

Some initial sketches from Google's Crazy Eights design sprint exercise

Designing for usability

We wanted to emphasise usability from the very start in our wireframes, using criteria from usability.gov as a baseline and keeping in mind that information overload could be detrimental to business.

These emerged in the form of simple, basic screen structuring, a constantly-available menu bar, and large images and text.

Initial wireframe after sketches

Prototyping and testing on a budget

We tasked users with:

  • finding a $12+ D&D 5e game on a Friday evening, and

  • navigating to the profile of the game master hosting a specific named game.

We tasked users with

  • finding a $12+ D&D 5e game on a Friday evening, and

  • navigating to the profile of the game master hosting a certain game.

After conducting cognitive walkthroughs and setting intended tasks for our users to complete, we then printed our screens out to do some on-the-fly testing using NN/g's Wizard of Oz method.

Paper printouts used for Wizard of Oz testing

We received strong positive feedback about the intuitive navigation and finding game master information. However, even though all users were able to complete the tasks successfully, we realized that we could improve on:

  1. Search and filter clarity.

    Most users weren’t clear that the search screen was also a filter.

  1. Community.

    We needed to place greater emphasis on community, and add the ability to see who else would be participating in the game before committing to a session.

After iterating, we took our Figma prototype for another round of user testing.

Reducing thumbnail width to add visual affordance for scrolling, and changing “Search” to “Search or Filter”

Adding pop-up party preview before checkout and standardizing filter colours

© 2024 Ava Liao