Introduction
Autumn 2024
RuleMate emerged from this team as a shared desire to create something both accessible and enjoyable for a targeted audeince.
During this 10 week, graduate level User-Centered Design Course at the University of Washington, we collaborated to bring an initial brainstormed idea to life as a high fidelity prototype through user research, sketching, prototyping, and user testing.
Team
George Zhang, Amy Lee, Ko Motonaga, Monica Zhang
Design Challenge
Original Design Challenge
After an initial brainstorm, we began with a design challenge of "How can we design board games for visually impaired players?" Our initial secondary research gave us a lot of insight as well as showed us where gaps still existed, so we wrote our findings down and grouped them by topic.
Revised Design Challenge
Based on professional feedback that it would be hard for us to conduct user research on our targeted audience, we shifted gears and landed on our new design question, "How can we create an interesting and exciting onboarding experience for board game learners to get them playing accurately as soon as possible?
This revised question came from the same desire of making board games accessible, but with a shifted audience.
User Research
Survey
While we personally had our own experiences with learning board games, we wanted to have a better sense of what were shared experiences and pain points among all types of board game users. Using a survey was a strong way to ask a large sample of people a strict set of questions we wanted answers to.
Interviews
While the survey could give us a lot of data, the majority of it was set up so that responders could only give answers from a fixed list of responses. Having structured interviews with board game players allowed us to still ask specific questions we wanted answers to, but it gave the responder more freedom to answer however they saw fit and allowed chances for clarification and further dialogue.
Fly on the Wall
Sometimes people are not totally aware of their actions and decision in the moment, so asking them to recall how they feel or act is not a helpful question. Because of this, we felt that it made sense to conduct a fly on the wall observation, where I watched three members try to learn and play the board game Hues and Cues for the very first time. Now, there's no pressure for the participants to tell me anything, I can just observe them and take note of what I see.
Takeaways
These were the main findings from our research
Survey
Results Players value the connection over the game 10-20 minutes of learnig rules can deter players Players want the learning process to be fun They want to understand the rules through human interaction
Interviews
Most players are learning game rules from someone who knows the rules Rulebooks leave players confused even after reading Players like to be able to practice and ask questions Players don't want to feel embarassed or cause tension due to not understanding
Fly On the Wall Observation
Rules were difficult to read because of small font sizes and disorganized Long rules demotivate users from playing the game Someone becomes the main rule learner Users jump into playing the game before fully understanding the rules Users missed a core mechanic of the game
Personas
From our research and takeaways we created two personas, a primary and secondary one, to ground and guide us in our future decisions
Ryan is our primary persona as he is based strongly on the age demographic that we got from our user research and their desire to build community without feeling embarassed
We created Jason as a secondary persona as we felt like his position also makes him someone that relates to the social desires of playing games. this time with family, but struggles to have his kids learn in a quick and efficient manner
Design Goals, Scenarios, and User Flows
Before going straight into working on a design solution, we created a set of design goals as well as use cases and user flows for our solution based on our takeaways from our research.
Design Goals
The design should be inclusive so everyone can play (friends, family, elderly, kids)
The design should make the onboarding process shorter and easier
The design should support users so they don't have to rely on reading a rule book
The design should support users so they don’t get stuck with any questions or confusions they may have
The design should be accessible to all players at the same time so they don't have to wait for everyone finish it
The design should be easily accessible to everyone in the game so no one feels excluded.
The design should support users so they can understand the game enough to play by themselves and continue practicing until they feel confident
Scenarios
Beginner learning a board game
Question and Answer
Busy working parent with two kids learning a new board game
Users who can’t read / can’t read that fast
User Flows
Here are the user flows we created. We have an overall template, a flow for learning the game, asking clarifying questions, and practicing the game respectively.
Prototype and User Testing
Low-Fidelity Prototype
We were finally set to start creating our design solution. We made a low-fidelity version of our prototype in Figma based on the user flows made prior.
Learn
Practice
Q+A
User Testing
Here is the script we used for our user testing
Test Scenarios
- This app is made to make learning new board games easier and faster for board game beginners. You are looking to learn the board game Hues and Cues with friends. Please invite them into a gameroom and start learning using our app.
- For the second part of the app, I want you to get familiar with the components you need for the game, go through the process of setting up the game, and learn how to play the new board game.
- For this last part, you are wondering how to score a round of Hues and Cues. Try looking up how to ask this question using:
- Text
- Photo
- Voice
Design Changes
While we changed the overall look of the interface of the app, we also made major changes based on user feedback we received from testing that are shown below.
- “Home Page” screen
- Through the usability testing, we discovered that participants were unsure where to return to when they completed a certain flow of onboarding, practice, or Q&A. Given that, we designed a centralized page that includes all of these three flow’s starting points as a home page, which enables users to choose which feature to use depending on their needs.
- Friend Invitation Mechanism
- We found out that the way to invite friends to the app is unclear because the UI wasn’t tailored to different use cases for both a game host and those invited. The UI for both use cases was the same. So we decided to design the invitation flow for the two use cases:
- A game host creates a game room and shares the invitation with their friends.
- Friends use the invitation link to enter the game room.
- Step-by-step process
- In our initial prototype, we didn’t have a clear and comprehensive information architecture of rule explanation to onboard and train players with practice, which confused participants during the usability testing. Specifically, in the onboarding phase, we divided the flow into three sections: components, setup, and rule explanation so players can get a complete understanding of game rules in a logical order. Also, we identified that users are time-sensitive when learning the rules, so we incorporated the progress bar in every screen for the onboarding and practice flows with step-by-step instructions.
Quotes from usability testing that influenced the changes above
- “Can only the host start the game or can everyone start the game? Is there a way to say you are ready or are you ready by being in the game room itself? It seems like I am the host. Then I can start the game”
- “I wonder what it would look like if people were trying to exit this. If someone knows how to play the game they are not going to want to do the practice round or look at the rule book so I wonder if there is a way to skip this. My understanding is that if you know the game already, you wouldn't use the game.”
- “I am not sure what is happening here. Maybe it is telling you how to set up your game like steps 1 - 3 then you actually start learning the game”
- “I think the board game shows up here? I am not sure what is showing up here”
- “I am not sure what I did and how I earned the points”
- “I'm curious to understand how intelligent the chatbot would be or do I have to ask a question”
- “I'm not sure if I scanned the QR code”