The Problem:

Gamers looking for information about a video game’s activities and systems often have to traverse multiple third-party websites for useful information. This can lead to exploring multiple sites and reading inaccurate information about the game from unofficial sources.

Research Summary

I conducted a competitive analysis of existing game websites and conducted user research by interviewing other gaming enthusiasts. A primary user group was gamers who like to learn about in-depth systems of RPG-style games. A primary pain point was users wanting more information from a game’s primary website, without having to access third-party sites.

User Pain Points:

• Users wanted a website that was easy to navigate between each section.

• Users wanted accurate information about the game, including what kind of activities there will be and patch notes.

• Users wanted to be able to get an in-depth and clear understanding of each class and their different play styles.

• Users wanted to be able to build different classes and save them without having to use a third-party website.

Digital Wireframes

Easy navigation was a key pain point I wanted to implement in my initial digital designs. 

Having images on the home page is being used to give users a visual presentation of the game’s aesthetics.

Final Mockups

Journey Map

Before

Before

Game Info > About

Sitemap

Difficulty with website navigation was a major pain point I wanted to address when designing the site map. The goal was to have easy, clear navigation at the top of each page and minimal pages for each category.

Hi-fidelity Mockups

After a brief usability test on my lo-fi wireframes, I decided to move into some hi-fidelity mockups. I wanted to incorporate a lot of vivid imagery that helped paint the world of Descension for the user and emphasize the dark-fantasy setting. I then moderated some usability tests and gathered some insights into the usability and accessibility of the website.

Link to hi-fidelity prototype

Mobile Variations

I wanted to maintain the visual presentation of the home screen on mobile devices, while maintaining the navigation bar on tablets, and implementing a hamburger menu on mobile.

Mobile

Tablet

Usability Study Finding 1

“Some of the white text is hard to read against the busy background”.

Some users were having a hard time reading text against busy, bright backgrounds. To help alleviate this, I lowered the background opacity of images with text overlayed on them. This helped with the readability and accessibility for text information. By doing so, users were able to more easily read important text, specifically on the landing page and Game Info > About page.

Usability Study Finding 2

“When I click on ‘Classes’ I expected to see a list of all the classes right there instead of having to go to a separate page".

Multiple uses suggested having each class listed directly in the dropdown menu for the “Classes” option in the header navigation. By adding this feature, users were able to not only see each available class, but were able to directly go to the page of their desired class right from the navigation bar. This decreased the number of steps to reach a specific class page, and made each class page directly accessible no matter where you are on the website via the top navigation bar.

→

Other Pages

The rest of the site was designed to address user pain points, specifically the need to navigate to other third-party sites for certain features like forums, party finders, class guides, and game media.

Landing Page

The landing page was designed to immediately draw users into the world of the game. It features background images that represent the tone of a dark fantasy world. General game information can be found by scrolling down the page, with clear CTA buttons that take you to various pages for more information.

Key Takeaways

Impact:

Users identified a clear navigational experience throughout the site. Iterations based on tests addressed user pain points and areas of improvement to provide a better user experience. Users all agreed that the site offered the right information and features they are looking for in a game website.

What I Learned:

I learned that readability and precise content was essential for the user’s experience when navigating the site. I gathered many great takeaways with what users expect and want for a game website and will be basing a lot of future designs from their feedback.

Next Steps:

1. Share designs and ideas with stakeholders to determine the future direction of the design.

2. Conduct a follow-up usability study with a broader user group.

3. Identify any additional areas of need and ideate on new features.

Class Info

The Class Info page was designed to provide a detailed description of each class, including subclass options, class attributes, skills, and abilities. CTA buttons were added to take the user from the class page to either the class builder page or the class guides page. Overlays were added to each ability so users could read detailed descriptions of each ability while hovering over them.

Build Planner

The build planner was designed to be a dedicated hub for building, managing, importing, and exporting builds for the user and other users in the community. The idea was to incorporate a fleshed-out builder so users didn’t have to navigate to third-party websites to create and share builds.

Accessibility Considerations

1. I used headings with different-sized text throughout each page for a clear visual hierarchy.

2. I used strong visual cues and icons when possible for easier navigation and clarity for those with impaired eyesight. 

3. I used a contrast checker plugin to ensure all text was WCAG Certified. 

After