Loading

CSCI 494 UX Design Project By Jessica Jorgenson and Jamie Winter

Stage 1: Empathize—Research Your Users' Needs

Problem Statement: Women who like to play video games are quick to receive backlash in the gaming community. Events such as gamergate have left women, and minorities, in a position where even expressing an interest in gaming feels like a risk and makes the idea of entering a random matchmaker in online multiplier games anxiety inducing. It leaves many with the option of only gaming with people they know personally or not playing at all. We want to provide a third option by creating an app to add personalization to online game matchmaking and provide players with a safe environment to make new connections to play their favorite games.

Recruitment Strategy: We looked primarily for participants who regularly play video games who also have interest in playing multiplier games. We also made sure to pull from minorities in gaming who may face more prejudice within the gaming community, such as women and people from the LGTBQ+ community. For age we looked for people who fell within the 18-34 age range, which is the US average age of video game players in 2019. We interviewed 3 females, 1 male, and 1 genderfluid individual. The mean age was 23.6 years old.

Interview Strategy: We asked our participants to tell us about what want when playing online games, how they like to play, who they like to play with, and what they get out of playing video games. It was important to us to share a love of gaming and listen to their concerns with playing games online.

Survey

Empathy Maps

Conclusion: The biggest takeaway from our initial interviews was that our participants either already use multiplayer gaming as a way to meet new friends and would enjoy a system that enabled making new friends that share the same gaming tendencies. We also saw that age and gender were less of a factor when finding teammates, though there are still concerns with both. Our participants were more interested in finding teammates that share similar playstyles and goals.

Stage 2: Define—State Your Users' Needs and Problems

Personas

Based on our user input from interviews and surveys, we developed the main two types of personas we see will be using our app. We can see both professionals and casual gamers using our app to make connections.

Business Model Canvas

With the business model canvas we address the question of what we and investors can gain financially from the project. The biggest hurdle is finding users, so we focus on using platforms and going to events that will have a potential user base. We also recognize that video game developers could find benefit from encouraging more community within their games and appeal to a wider audience.

Conclusion: Through building personas and the business model canvas we have discovered that our app can be used not only for building community, but also to increase revenue for streaming services, streamers, and game developers.

Stage 3: Ideate—Challenge Assumptions and Create Ideas

Mind Mapping

We decided to use mind mapping for our ideate stage. We broke our map into key sections and brainstormed the different elements we could picture in our app. Some of the key concepts we discovered that we want to move forward with are adding features to allow users to connect further with the app by adding connections to sites such as Twitch, Discord, and Steam as well adding an in app chat feature. We also discussed the potential for a Tinder-like app design being a turn off for some users because of it's relation to dating apps. Through mind mapping we came up with a more creative idea that fits the app much more.

Conclusion: In this stage of the project, we were able to expand on our ideas, and discussed what the big picture of our app could be. We discovered other methods that users could use to connect with one another. We also came up with a better branding idea that will ultimately increase the usability of our app.

Stage 4: Prototype—Create Solutions

Low Fidelity Prototype

We decided to prototype out home page, search page, and search results page as they covered the majority of the points we wanted to develop based on our previous research. These are our early sketches.

Homepage
Search Results
Search

Application of All the 10 Usability Heuristics

Here I describe my final high-fidelity prototype via ADOBE XD and how it meets each of the 10 Usability Heuristics.

#1: VISIBILITY OF SYSTEM STATUS: One example of this can be found on our Search page. As the user picks the filters for the search the site will query all of the people who match their requirements and show the user the current number of results above the view button so they can make adjustments to narrow or widen their search before reaching the interactive cards on the next page.

#2: MATCH BETWEEN SYSTEM AND THE REAL WORLD: Our design choice of using playing cards on the search results is reminiscent of collectible card games, which a lot of people in our targeted demographic would be familiar with, but most users would have at least seen similar cards before.

#3: USER CONTROL AND FREEDOM: In Search Results when the user chooses to 'X' or discard a card they are shown a message on where to find cards they have previously discarded. They are also shown a message on what to do once they have selected '✓'.

#4: CONSISTENCY AND STANDARDS: Because this is an app that helps people connect we kept similar mechanics to services such as Tinder. When the user clicks to view a specific card they are given an 'X' or '✓' that they would be familiar with. The left to right positioning is also the same as Tinder and similar apps.

#5: ERROR PREVENTION: We built the search page to provide the users with options rather than ask them to come up with them themselves. It keeps the options within the realm of the app's ability and prevents potential errors in searching.

#6: RECOGNITION RATHER THAN RECALL: The Search page give the user an autofill input when looking for a game so that they do not need to recall the entire title. We also remind the user what their search terms were on the search results page.

#7: FLEXIBILITY AND EFFICIENCY OF USE: On Search Results the user is given five cards/matches to start. As they become more comfortable they can go through more matches as they see fit.

#8: AESTHETIC AND MINIMALIST: To help keep the aesthetic and minimalist approach we made the menu minimized with the commonly used hamburger icon so that the user does not have to see all of the features that are irrelevant to them the majority of the time on each page. We also tried to keep a lot of 'white space' while adding interest with our low poly background.

#9: HELP USERS RECOGNIZE, DIAGNOSE, AND RECOVER FROM ERRORS: When the user begins to fill out their search criteria they must select a game first. This is done with an autofill of all of the options currently in the system. I the game they are looking for is not coming up they are told it doesn't exist in the system yet and prompted to request that the game be added.

#10: HELP AND DOCUMENTATION: When the user clicks on the menu a drop down is provided that includes a link to the help documentation. This menu is available on every page.

Applicable UX Laws

Cognitive load: Kept our design similar to what users have seen before both in website design and the card game references.

Fitts Law: Minimized the number of buttons a user would need to use at any given time and make them large and easily accessible.

Hicks Law: Number of options the user will see when choosing filters on the Search page and when viewing cards on the Search Results page.

Law of First Impression: Our home page is simple with a focus on the aesthetic of brighter, game service associated colors and background design.

Miller's Law: Show a smaller amount of the most relevant information on the user card in Search Results and give the user the option to view more.

Gestalt: When a user selects a card from the hand to view it becomes more focused and the background less.

Picture Superiority Effect: By putting matches as collectible cards it create a visual that is more appealing and memorable.

Stage 5: Test - Try Out Your Solutions

Observational/Quantitative Data

We tested our Adobe XD prototype via Discord over the course of a week. We created a list of tasks that covered all of the usability of our prototype and asked the participants to share their screen with us as they completed the tasks. We then recorded the number of clicks it took them and recorded the time it took using a stopwatch. The demographics of our 5 participants were similar to those in our Stage 1 phase, including 2 repeat participants. The 3 new participants were also between the ages of 20-30 and frequently played video games.

Qualitative/Survey(s) Data

The survey of tasks we used covered the usability of our Adobe XD prototype. We knew we wanted the participants to try creating an account, creating a search, adding a user’s card to their deck, discarding a user’s card from their hand, locate their deck, find the help and documentation, and logout.

Results

In our findings, we found Test One to take the longest for our users, with an average of 24.6 seconds. This likely attributes to lack of functionality, as we have displayed account detail options without the means to actually manipulate these options, so our test users took the time to look and try these options, though all they could realistically do is click "Next". The quickest test overall was Test Five, with an average of 3.6. seconds.
Tests 3 and 4 were tied for most clicks, with an average of 3.4 clicks. As these tests were almost the same besides which button to click, this is to be expected. Test 5 had the least clicks, which we attribute to the ease of finding the deck.
This graph displays the ratio between the time taken on a test to the number of clicks. I believe these results are to be expected, as once users became comfortable with using the prototype, it took less time and less clicks to complete the test given.

Conclusions

Most of the troubles or errors we ran into while doing our testing came down to the limitations of using Adobe XD and working virtually with our participants. They were unable to fill in the fields during searches and account creation which led to some confusion. Otherwise, the usability testing was rather successful. For future testing we would create a more functional prototype, such as a simple website, where the participants could still go through the motions of the tasks in a way that is more similar to what they would expect. Additionally, we would like to do some AB testing with the trading card graphics to determine the amount of animation and flair participants would like to see.

Stage 6: Present

Here is the link to my online video presentation briefly describing all of my 5 stages.

Credits:

Created with images by Luis Villasmil - "Pink neon colored video game controller on purple background" • bantersnaps - "Grovemade" • Fredrick Tendong - "Person with headphones playing video game" • Element5 Digital - "untitled image" • Ryan Quintal - "Nintendo amiibo toys of characters of Princess Zelda from The Legend of Zelda Breath of the Wild, Ocarina of Time, Windwaker, along with a Guardian and Urbosa" • Alex Escu - "untitled image" • Romy_Deckel - "gaming games gamepad" • Silvo - "xbox controller control" • JESHOOTS-com - "gaming tv players"