playAble

Our Objective

For UCI's Informatics 132 course, four of my peers and I were tasked with creating a design project of our liking. Through our shared interest in video games and a discussion regarding video game accessibility, we decided to design a website that centered around accessibility in gaming.

We found ourselves looking at websites such as DagerSystem.com and GameAccessibility.com that allow users to search for games and view how accessible they are for individuals with various disabilities. We conducted a competitive analysis and developed four main critiques of the game search and review functions of the websites:

The game search function was difficult to find in some cases.
The rating systems did not always seem intuitive to follow.
It was hard to get a good at-a-glance grasp on whether or not a game playable with specific disabilities.
Some websites focused on reporting gaming news in addition to supporting accessibility reviews which made the sites feel cluttered.

Screenshots of DagerSystem (Left) and GameAccessibility (Right) review pages.

As a result, we decided to design a website that allowed users to efficiently and effectively search for games that fit their wants and needs and to encourage the development of a community in the process. Thus, we decided to create playAble, a video game accessibility review website that would relieve the pain points of the current options.

Our Research Process

Internet Research

In order to make playAble the best it could be, the first thing we did was conduct research on types of disabilities. One of our group members had already done research on accessibility in video games for a prior course, so reading their findings was a good jumping-off point for us. We searched through different websites and looked through the settings of many games we played to see accessibility in action. From here, we derived four main disability categories that became vital in the design of our website:

Visual
Auditory
Motor
Cognitive

Additionally, we looked at other review sites to better understand what we were aiming to create. The website I contributed was DoesTheDogDie, but we also looked at other sites such as RateMyProfessor and Kids-In-Mind.

Surveys

After becoming familiar with the domain of games accessibility, it was time for us to gather information from our target users. Given the limitations of remote learning and the chaos in everyone's schedules brought by the COVID-19 pandemic, we decided to conduct our target user research through a survey. While our survey included many multiple-answer questions, we made sure to leave room for participants to type their own answers for each question. Additionally, we made the decision to make only the first question of the survey mandatory to allow participants to answer at their leisure while still learning about the type(s) of disabilities the participants had. While this was a limitation in the sense that not every participant answered every question, we were able to gather a larger range of answers by ensuring even in an asynchronous method of target user research that we respected the time that each individual was able to lend to us.

I devised a number of questions for our survey. Upon sharing them with my team, some of them were cut while others were rephrased to be clearer and to flow better.

Screenshots of two questions I contributed to our survey.

Two of my peers reached out to individuals to participate in our survey through games industry contacts, and I sent the survey to the INF 132 course Slack in pursuit of more target user data. We decided that it was important for us to weigh the views of both individuals with disabilities and those without to assess our design decisions with the widest variety of users in mind. In total we received responses from 25 individuals.

Our Design Process

A week after we had sent out our requests for people to fill out our survey, we began analyzing our data. We found that regardless of whichever disability categories an individual marked in their response, they all still enjoyed playing a wide variety of games. While this did help our team decide how we wanted to approach creating our website, I personally gained a better grasp of the gaming community and the extent to which gamers will go to play their favorite games. I became more appreciative of the determination of individuals with disabilities and the tools they use to make playing video games an enjoyable reality for themselves.

A subset of the diverse set of answers we received from participants regarding the games they play.

Organizing Features

After conducting our survey, one of my teammates asked if there was a way to organize each accessibility feature from our survey results into our disability categories so that we could easily reference them later. I created a table for the accessibility features from our survey and made sure to make note of features that I knew overlapped. This table later became very important in how we structured certain information on the playAble website.

The table I created organizing accessibility features into our four main disability categories.

Personas

From our survey results, we created two personas to represent the casual and hardcore competitive gaming demographics. Furthermore, we assigned our personas to different disability categories to ensure that we weren't focusing too heavily on one category. All the games listed for each persona were taken directly from or survey responses. I was asked by members of my team to use of gaming knowledge to help sort these games appropriately for our personas.

Our persona Lucas.

Lucas was our persona who represented the casual gaming demographic and had a motor impairment. The various games we listed under him were single-player games such as Grand Theft Auto: V and The Legend of Zelda: Breath of the Wild. The games listed under Lucas all offer different experiences such as exploration, an engaging narrative or the freedom to create one's own narrative, and life simulation. All of these features reflect the values of our survey participants who said they play games for a variety of reasons, including adventure, narrative, and escapism.

Our persona May.

May was our persona who represented the competitive gaming demographic and had a visual impairment. The games we listed under her were all games that have highly competitive esports scenes including League of Legends and Super Smash Bros. Ultimate. There were survey participants who either leaned into or were very invested in esports, and we wanted to ensure that we captured that in the design of playAble.

Sketches

After creating our personas, we moved on to sketching various features of our website. Initially, we had created sketches before we had the chance to talk about any clear approach to designing our website. My sketches essentially became a combination of DagerSystem and GameAccessibility. I tried to take the elements of both I thought were useful with the quick at-a-glance five-star rating system of CanIPlayThat, the simple game overview from GameAccessibility and the review sections from both that allow users to type paragraphs of text. However, the designs I created didn't sit well with me.

Two of the sketches I made for playAble's review page. The sketch on the left focuses on a potential review section while the sketch on the right focuses on a game's overview and accessibility ratings for each of our four disability categories.

When it came time to share our sketches, one of our team members created designs based on DoesTheDogDie and RateMyProfssor, which we had looked at earlier on in the project. I realized that in the creation of my sketches, I had completely forgotten about these two websites and focused heavily on emulating playAble's competitors. The mention of other review websites brought us to the conclusion that we should branch away from the formats of other game accessibility review sites and design our website based more heavily on DoesTheDogDie and RateMyProfessor.

Our Low-Fidelity Prototype

When it came type to develop our low-fidelity prototype, we divided the website into sections and worked on them individually. I was tasked with creating the pages for the account sign-in and the account creation process. My main inspirations for the sign-in page were Google and another website called Soundation. I wanted the process to be to-the-point, not distracting. I designed the first step of the account-creation process with the same values in mind.

My log-in page (Left) and account creation page (Right) from our low-fidelity prototype.

The most exciting part of my section was formatting the last two steps of creating an account which were selecting game genre and accessibility feature interests. For the page asking users to select which game genres they enjoyed, I referenced both our survey results and multiple lists of genres across websites such as Wikipedia and the PC video game platform called Steam. For the page asking users to select which accessibility features interested them, I referenced both the features we had initially thought of for our survey along with the additional ones our survey participants wrote in themselves.

My genre interest page (Left) and accessibility feature interest page (Right) from our low-fidelity prototype.

When it came time to provide feedback to each other's designs for our lo-fi prototype, I asked my teammates if there was a better way to organize the last two pages of my section. We determined that it wasn't necessary to reorganize the format of the game genres, but we decided that accessibility features should be organized based on our four disability categories. This was done in our high-fidelity prototype. My sign-in page and first page of account creation looked good to the rest of the team, and as a result, they largely stayed the same throughout our prototyping process.

Our High-Fidelity Prototype

The biggest change to my section of the playAble website from our lo-fi prototype to our hi-fi prototype was the accessibility interests page. I organized each of the accessibility features into columns based on disability category. I decided to keep features that overlapped in multiple categories, such as "damage numbers" in only one category to prevent confusion from there being duplicates.

My revamped accessibility interest page from our high-fidelity prototype.

Based on a teammate's suggestion, I made the category of each column a checkbox. If a user selects the checkbox of a category name, then all the checkboxes in the column of said category would become checked as well. A user can also select individual feature checkboxes from multiple categories. I believe this design of the page is much less cluttered than the lo-fi design.

Conclusion

Due to time constraints, we were not able to conduct user testing with either of our prototypes. However, I believe that playAble's design, while certainly not perfect, is a step in the right direction towards allowing gamers with disabilities and their loved ones efficiently find accessible games.

This was my first quater-long UI/UX design project, and I learned a great deal from being able to apply the knowledge I have gained throughout my college education to playAble. Furthermore, it was exciting to work with peer in a field that I usually do not find myself in. I was exposed to UI/UX designer tools through this project more than I have in any other course I have taken. I learned how to use Figma to create personas, wireframes, and fully-functional prototypes. Additionally, I learned that sketching a UI is very approachable and only needs to be done with simple shapes.

As someone who is primarily a game developer, learning about the domain of games accessibility has helped me better understand the gaming community as a whole, and now I am more concious of the needs different gamers and inspired by their drive to keep enjoying the things they love.