Add a Feature
Conceptual project adding a feature to a digital game site.
Dominion Games is a website devoted to playing a digital version of the award-winning card game Dominion. The implementation of the game online works well, however the interface outside of game play is not intuitive. In particular, one cannot simply create a table restricted to friends only, so if any random people join, they have to be asked to leave or be booted. It is also not obvious how to join a friend’s table, especially for someone new to the site.
Having played on the website myself, I was aware of difficulties with users easily finding a friend’s table or creating a private table for friends. A quick internet search found Reddit threads with similar complaints. I wanted to create a feature consistent with the design of the current site that would enable someone to create a table that only friends would be able to join, either by specifying specific user names or by using a general, friends-only option. I also wanted to make it clearer how to join a friend’s table.
Role
Research, Design, Testing, conceptual project only
Research
Research
Competitive Analysis
I looked at five game websites including Dominion Games in order to evaluate how they set up playing with friends. All of them except Dominion Games had a way to set up private tables. Three of the four have an ability to send a link to friends who are offline.
Interviews
In order to learn the pain points of users, I interviewed five people who have used the Dominion Games website to play with friends and created an Affinity Map. All of the users mentioned some problem with creating or finding tables when playing with friends, confirming my original hypothesis.
POV/HMW Questions
POV
Dominion Games players need a simple way to create and find the appropriate tables to play on without negatively affecting other players because it would create a friendlier online community.
HMW
How might we set up tables so players know which ones to join?
How might we invite people to play a game?
How might we allow players to find tables to play on where they would be welcome?
Roadmapping
Requirements
I needed to keep the design of the added feature consistent with the current UI of Dominion Games, regardless of the many usability issues present on the current site. Regular users of the site are accustomed to its idiosyncrasies, and this added feature is intended to be just a small step up in functionality without creating a large visual change.
User Flows
I created two User Flows. One for creating a table to play a game with friends and the other for joining a friend's table.
Branding
This is an established site, so no new branding is required.
Wireframes
Lo-fi Wireframes
I experimented with different ways to add the feature of creating a private table for friends. In many ways, the current website is very basic. There is only one modal that is used on the site and it is non-variable in that it is used to select from all the cards in the game. Because of this, I was hesitant in the solution to use a variable modal, variable in that each person’s friend list is different, but without a modal, it would require the user to bounce between different pages on the site. Ultimately, a modal was the simpler way and I based the modal design off the one modal on the website.
Hi-Fi Wireframes
Original Website
Example of creating a table
Example of modal pattern
Example of current search pattern
Example of a friend entering a table
Modified
Created new ‘Add person’ icon in similar style to ‘Add bot’ icon
Moved ‘Remove slot’ and ‘Add slot’ icons over one spot to the right
Added ‘Friends only’ toggle
Added line divider between toggles and player names
Decreased size of Chat section to make more room for Player section
Renamed first left menu item to ‘Join Table’ from ‘Automatch’
Created new modal for selecting friends’ usernames based on current site modal pattern
Able to search for name with design based on current search pattern on site
Left “Add person’ icon once selected in order to change selected name
Entered name is in italics until person enters table
Player whose name is entered goes straight to ‘Players’ rather than to ‘Spectators’
Usability Testing
Four moderated usability tests were conducted with the prototype over Zoom. Two mentioned wanting a clear way to swap or remove player names and one mentioned changing the icon once a player name was selected. One person mentioned wanting a clear way to close the modal and I thought it would be a simple modification to make, however this change would be inconsistent with the current modal on the site, so it was not changed.
Revisions
Modified the modal to be able to revert back to ‘Empty Slot’ or choose another name from list
Added a new ‘Person’ icon to replace the ‘Add person’ icon once a player name was entered
‘Person’ icon disappears once friend has entered
Alphabetized the friend list
Reflections
Dominion Games is not a simple website to reproduce because it uses photos for all of its components and the designs aren’t easily formatted into blocks. There were also numerous special effects, especially inner and outer shadowing added into each component. This made the project take much longer to complete, but was an excellent learning exercise.