Quest for Inclusivity: Transforming Tabletop Gaming with Tabletop Team Up
Project background
Tabletop Team-Up aimed to create an inclusive and user-friendly platform for tabletop gaming enthusiasts, particularly novices and minorities in the gaming community. This project addressed the challenges faced by these groups in finding gaming opportunities and sought to provide an accessible space for them to connect and engage. Through user-centered design, the project aimed to foster a sense of belonging and enhance connections within the tabletop gaming community.
UX Research & Writing
UX/UI Design
Team project
My Role
Figma, Google Workspace, GitHub
Tools
The Problem
Novices and minority communities in gaming, including LGBTQ+ members and women, encounter obstacles in finding inclusive tabletop gaming options due to marginalization, harassment, and exclusion. The overwhelming task of identifying such opportunities on various platforms hinders their access. To improve inclusivity, how might we establish a more straightforward and accessible pathway for beginners and minority groups?
The Solution
In our mission to create Tabletop Team Up, a groundbreaking platform for tabletop gaming, my direct contributions were pivotal in shaping our solution. Here's an overview of my role:
User Research and Persona Development: I conducted a thorough analysis of user interviews and survey data, utilizing an Affinity diagram to organize the information. Subsequently, I crafted a detailed user persona and empathy maps, providing us with deep insights into our target audience.
Ideation Statements: I crafted comprehensive ideation statements that addressed the problem, provided solutions, and highlighted the unique value proposition of Tabletop Team Up.
Navigation and Profile Design: I designed the footer navigation and created the lo-fi to hi-fi wireframes for the user profile page, ensuring an intuitive and user-friendly experience.
Prototyping: I developed prototypes for both desktop and mobile platforms, enabling us to visualize the user journey and interactions.
User Testing: I conducted user testing sessions to gather feedback and refine our design, ensuring it met user expectations.
Style Guide: I shared responsibility for creating a style guide and crafted a
Voice Chart: I created a voice chart to guide our platform's tone, copy, and user interface, ensuring a consistent and engaging experience.
Collaboration with Developer: I maintained open communication with our development team, aiding in the coding process to bring our design to life.
This collective effort has resulted in Tabletop Team Up, a revolutionary platform that offers advanced features for beginners and minority groups, enriched listings, and a safe and inviting community. Customizable notifications, integrated scheduling, and user-generated content further enhance the tabletop gaming experience, making our solution truly inclusive and dynamic.
The Impact
We utilized the System Usability Scale (SUS) and Single Ease Question (SEQ) methodologies to assess the success of our design iterations effectively. This combined approach offered the following benefits:
Standardized Usability Assessment: The SUS provided a standardized scale to gauge overall usability and user satisfaction, enabling a comparative analysis between our low-fidelity and high-fidelity solutions.
Holistic User Perception: By leveraging the SEQ, we obtained task-specific insights into users' ease of interaction, helping us identify specific pain points and areas of improvement.
Comprehensive Validation: The synergy between SUS and SEQ allowed us to capture a comprehensive view of user experiences, validating the enhancements made through our design iterations.
Our final user testing results showed a strong improvement from our initial design. Through our testing we were able to create a more user-friendly experience by iterating based on feedback. We saw an 10.5% increase in our SUS score, and an 8% increase in the SEQ.
Initial User Testing Results
Initial overall System Usability Scale score
Initial average Single Ease Question score
Final User Testing Results
The average score of the SEQ saw an 8% increase
The SUS score experienced a growth of 10.5%
The Process
Empathize
User Interviews & Survey
Interviews
Our in-depth interviews aimed to uncover valuable insights from a diverse group of potential users, emphasizing inclusivity in tabletop gaming.
Key Objectives:
User Demographics: Understand the diverse backgrounds and identities of participants, including LGBTQ+, women, beginners, visible minorities, and those with special needs.
Inclusivity and Safety: Explore participants' experiences and concerns related to inclusivity, diversity, and safety in gaming groups.
Platform Features: Gain input on features that could enhance inclusivity and make finding inclusive gaming groups easier.
Survey
Exploring insights from 60 survey participants, our Tabletop Team-up survey revealed a wealth of preferences within tabletop gaming:
Participants disclosed gaming frequency and their inclination towards in-person or online play.
Experiences in finding players and groups online offered valuable perspectives.
Safety concerns, reviewing past players, and suggestions for enhancing game/player-finding platforms were also shared.
These diverse responses steer our mission to craft a customized platform aligning with the gaming community desires and requirements.
![During COVID, [online platforms] were the only way to keep gaming alive.” - Highlighting the pivotal role of online platforms during challenging times.](https://images.squarespace-cdn.com/content/v1/646ce94b4654f86e860439fd/20397a85-12e7-4bcf-9259-626704c52275/Screenshot+2023-09-14+at+9.01.22+AM.png)
Define
Affinity Diagram
Utilizing an affinity diagram, we grouped user feedback into key themes, providing a comprehensive understanding of their needs and preferences. To name a few:
Inclusivity
Safety
Game Preferences
Finding Groups/Players
Platforms
These core themes shape our platform's development to meet user needs effectively.
User Persona
Liam Legacy was created based on interviews and surveys, and we used an affinity diagram to sort out their traits and preferences. Liam represents a dedicated tabletop role-playing gamer who values inclusivity, immersive gameplay, and a safe gaming environment.
Empathy Map
The empathy map for Liam Legacy served as a foundational tool in our project. Developed through interviews and research, it allowed us to gain deep insights into his needs and challenges. This visual representation was pivotal in fostering empathy and informed our user-centric design approach for Tabletop Team-Up, ensuring a more inclusive and user-friendly experience.
Journey Map
The journey map for Liam Legacy was created to illustrate the challenges and frustrations faced by a potential user seeking tabletop gaming opportunities. It helps us understand why our website, Tabletop Team-Up, is necessary. Liam's journey highlights the need for a platform that streamlines the search for inclusive and respectful gaming groups, caters to neurodivergent individuals, and enhances the overall tabletop gaming experience. By mapping his experiences, we can better demonstrate how our solution aligns with user needs and aspirations.
Brainstorming
Employing the "I like, I wish, what if" technique, we brainstormed features and functionalities for Tabletop Team-Up, considering our user persona and empathy map. Subsequently, we structured our concepts into priorities using a prioritization matrix.
Ideate
Lo-Fidelity Wireframes
In our lo-fidelity solution, we prioritized improving Tabletop Team-Up's user-friendliness, especially for beginners and minority groups in tabletop gaming. We streamlined the website's layout, introduced user profiles, and provided basic game listings. This initial version served as the foundation for gathering valuable user feedback and informed our subsequent high-fidelity design iterations.
User Test Results
We employed remote moderated testing to evaluate our lo-fi prototype. Five participants, following the user flow designed for our user persona Liam, engaged in the process. Completing five tasks, they provided verbal insights as they navigated. Furthermore, we aimed to uncover whether participants perceived the philosophy and purpose of establishing an inclusive gaming space as sufficiently evident during the discussions.
Our lo-fidelity user test results demonstrated favorable usability scores using the System Usability Scale (SUS) and the Single Ease Question (SEQ). Notably, the mobile version achieved a SUS score of 90.5% and desktop scored 78%, averaging to 84%. Meanwhile, the SEQ saw mobile attaining 86% and desktop 84%, resulting in an average of 85%.
Inclusivity Communication:
Participants suggested including an explicit tagline or slogan in the header to convey the platform's inclusivity.
Iteration: Highlight the inclusivity message prominently upon entering the site, possibly through a tagline or clear visual element.
Button Copy:
Renaming "Group Details" to "Table Details" under the "Find a Table" section would align with user expectations and better reflect the information users are seeking.
Enhanced Navigation Menus:
Add padding to secondary and tertiary menus on the navigation bar.
Improve touch interaction and user-friendliness on mobile devices.
A/B Testing
For user-friendliness assessment, we conducted A/B tests, concentrating on the "Find a Game" section and its categories. We examined whether users preferred a hover-over CTA or a below-card button for category exploration, aiming to understand their preferences and motivations for choice A or B.
A
B
Users primarily preferred Option A for the "Find a Game" section due to its visually engaging buttons that conveyed interactiveness, drawing attention and ensuring clarity.
Prototype
Style Guide
-
![]()
Colors
-
![]()
Typography Headings
-
![]()
Typography Body
-
![]()
Iconography
-
![]()
Grid Systems
-
![]()
Textfields
-
![]()
Dark Mode Selectors
-
![]()
Light Mode Selectors
-
![]()
Dark Mode Buttons
-
![]()
Big Elements
-
![]()
Cards
Voice chart
I crafted the voice chart to define how Tabletop Team-Up communicates. It helped us create a welcoming and informative tone that resonates with users, especially newcomers and minority communities in tabletop gaming. This tool clarified our messaging approach, ensuring that our platform's content is friendly, inclusive, and empowering. Our goal is to promote inclusivity within the tabletop gaming community through effective UX writing.
Hi-Fidelity prototype
Mobile
Desktop
Test
Remote moderated testing
In our recent evaluation, we conducted remote moderated testing with 5 participants to assess our high-fidelity mockup. Our approach included:
Repeating tasks from lo-fidelity testing to address previous issues and uncover new UI challenges.
Using the Single Ease Question after tasks and the System Usability Scale for quantitative analysis.
Gathering user input on inclusivity messaging prominence.
By combining insights from this and prior tests, we're optimizing the UI for improved user experience while ensuring inclusivity.
User test results
In the hi-fidelity testing phase, our platform achieved exceptional results in user satisfaction. The System Usability Scale (SUS) yielded a score of 94.5%, while the Single Ease Question (SEQ) recorded 93%. These outcomes reinforce the success of our iterative design approach in creating a user-friendly and efficient experience for our users.
While notable enhancements were evident in SUS and SEQ scores, some user pain points remained apparent. To chart our iterative path forward, we utilized a prioritization matrix to focus on key areas of improvement.
5 Second user testing
Additionally, we used a five-second user test on our homepage to quickly understand initial user impressions and capture immediate reactions. We asked participants the following questions:
What was the first thing that caught your eye on the home page?
Did you notice any interactive elements or buttons that caught your attention?
Based on your quick glance, what type of content or features do you think this website offers?
How would you describe the overall tone or atmosphere conveyed by the home page?
Did the home page make you feel inclined to take any immediate actions?
What kind of emotions or thoughts did the home page evoke in those initial seconds?
Our 5-second user test results revealed the following insights:
Attracted to hero carousel and logo.
Noticed interactive elements like CTAs and login buttons.
Perceived content: meetups, gaming resources, role-playing site.
Conveyed tone: friendly, fun, modern, energetic.
Prompted actions: curiosity, inclination to explore.
Initial emotions: excitement, playfulness, curiosity.
Although our 5-second user test yielded overwhelmingly positive feedback, we identified key areas for potential iterations:
Users found the site friendly but not explicitly inclusive.
Consider adding a prominent section on the homepage to convey the platform's inclusive vision/mission.
Make the arrow-down CTA clickable, leading users to the first section below the hero space, enhancing user experience.
Final Design
Mobile
Sketch
Lo-fidelity
Final hi-fidelity
Desktop
Sketch
Lo-fidelity
Final hi-fidelity
Final Thoughts
As this project concludes, we've achieved significant progress. Our user-centered approach, from persona development to usability testing, has enhanced Tabletop Team-Up's inclusivity and user-friendliness. Notably, improved SUS and SEQ scores, coupled with favorable 5-second user test results, validate our accomplishments. However, our journey continues. Future steps involve further refinements, front-end development, e-commerce integration, and ongoing enhancements. Our objective of fostering an inclusive tabletop gaming community is steadily becoming a reality.
Impact
Through our iterative process, we developed a prototype that effectively led us to the desired solution. From our initial design to the final iteration, we observed the following enhancements:
Enhanced Usability: SUS scores increased from 84% (lo-fi) to 94.5% (hi-fi), reflecting improved user-friendliness.
Streamlined Experience: SEQ results rose from 85% (lo-fi) to 93% (hi-fi), indicating enhanced ease of use.
Positive Impressions: 5-second test showed an engaging homepage triggering user curiosity.
Refined Navigation: Prototyping and development improved user flow.
Inclusive Design: Revisions addressed feedback and highlighted inclusivity.
Holistic Impact: Cumulative effort optimized design, aligning with initial goals.
Empowering novices and marginalized communities, Tabletop Team-Up's refined design maximizes inclusivity through intuitive features, advanced search, and secure messaging, addressing the initial problem. The solution establishes a seamless, dynamic space for diverse users to access tailored gaming options, fostering a welcoming and vibrant tabletop gaming community.
Next steps
As we move forward, our focus remains on refinement and expansion, driven by user feedback and a commitment to enhancing the tabletop gaming experience. Our path ahead is guided by these key directions:
Refinements: Continue iterating the hi-fidelity prototype based on user test insights and 5-second test results.
Front-End Completion: Finalize full front-end development, ensuring a polished and user-friendly interface.
E-commerce Integration: Implement e-commerce capabilities to enhance user engagement and convenience.
With a clear roadmap ahead, we're committed to creating an inclusive and exceptional tabletop gaming experience for all.
