Personal project
Role(s): UI/UX & graphic design
The Problem
ArtFight is an annual game for artists hosted at artfight.net. To play, artists are sorted into two teams and score points by “attacking” or drawing a picture for someone on the opposing team. The event is mainly for hobbyists looking to have fun through gifting art.
However, due to the casual nature of the game and the small team running it, the website has not been optimized to be user friendly. Newcomers tend to be confused without any outside guidance, and long-time players often have frustrations with the limited features of the site.
RESEARCH
In order to better understand the steps needed to improve the ArtFight experience, players from last year’s ArtFight were surveyed for issues or frustrations they had while participating. A first time user was also asked to navigate the website while thinking aloud. The research found the following:
Past players often use the “Random character” function in order to find their next target. However, certain artists specialize in different drawings (for instance, some artists are more comfortable drawing humanoid characters while others prefer to draw animal-like characters). Being unable to filter the random search created frustration for users trying to find a character that was suited to their skills.
A complete lack of search function creates further complications when searching for characters to draw or artists to draw for.
Past players requested a function for liking comments left on their profiles or artwork.
New users found the site difficult to navigate and had trouble understanding the concept of the game because they were unable to find the necessary information.
New users found the design of the website unappealing and cluttered.
Below are screenshots depicting some of the current page layouts.
Note: Usernames have been removed from the following screenshots
DESIGN
Initial wireframes sought to clean up the overall design of the ArtFight page. A brief description gives the user context while a row of links underneath easily leads them to the resources they need to understand and play the game. Additional pages for user profiles and art were also created to demonstrate other ways to organize the site’s layout.
In order to help the logo fit in with this more modernized theme, it was redesigned with a muted blue and a simplified paint splatter. A mixture of vector elements with soft drop shadows not only creates a sophisticated look, but represents the game’s inclusion of 2D and 3D art through a 2.5D aesthetic.
Hand drawn icons were placed on the homepage to add back a touch of the whimsical, artistic element that represents ArtFight. The rest of the page is kept clean and minimal in order to allow the user to focus on the players’ icons and artwork.
A new search bar accessible through “Browse” also allows for users to search up specific users, characters, or tags that artists can apply to their work. The “Random character” and “Random artist” features have been updated to allow for filtering, as well.
A redesigned user page allows for users to get all the information they need about an artist at first glance - the description and art galleries can now be seen on the same screen without the need for scrolling. Comments also have an added “like” function that was highly requested from past users.
Similar changes were implemented for viewing uploaded artwork. A large viewing window helps to keep the focus on the art, while a sidebar allows the user to see all the necessary information at once. Likes were also implemented for comments on this page.
NEXT STEPS
Screenshots shown to those who have used the website in the past were generally well-received. Contacting the team in charge of ArtFight could provide even better insights into their user base, as well as allow for more opinions on the redesign. Further collaboration may be pursued in the future.