Overwatch Ability Wiki

William Lord

Project Overview

One of the most common complaints I hear when introducing my friends to Overwatch is that there is nowhere in the game client to learn more about the abilities. How much damage do they do? What are the cooldowns? The best Overwatch has is a page with a one sentence description for each ability. For anything else you have to go out of your way to find a wiki online.

What would it look like if Blizzard implemented a more detailed ability menu? This site is designed as if it were a part of the existing game’s UI (but it does still scale responsively on smaller devices). I designed the project in Figma and built the final product from scratch using React. You can check out the GitHub repo, or demo it live!

image My hero wiki page for Genji.

Process

Because Overwatch is a PC and Console game, I started out in Figma designing for that screen shape first. I used an 8 pixel grid as the basis of the design to make it easier to space things out when I was doing the styling later, and began trying different layout ideas with simple shapes and text. While I was doing this, I also pulled up images of existing Overwatch design material, like menu screenshots, in order to try and get a feeling for the existing design. I did some research into other games and game websites to see how they had chosen to lay out similar information.

The initial challenge was trying to lay out a variable amount of information about a variable amount of abilities in a way that could easily and intuitively be read without the design getting too cluttered. Something that I found that I really loved was the DOTA 2 website, which displays ability details alongside a GIF of the ability in game. The ability icons are lined up as buttons, and clicking through them simply replaces the existing content with the information of the next ability. I thought this layout would be perfect, because I would be able to display everything on a single page without any scrolling.

image The ability section of the offical DOTA 2 website.

I made sure to pretty much finish the design in Figma so that there would be no guesswork when trying to build out the React project. I was actually really happy with how the design came out, and I was even happier to see that the 8 pixel grid allowed me to build out the markup way more quickly than I had in the past. Even building the JSX went way more smoothly thanks to my growing experience with building React projects.

When it came to gathering the information about the hero’s and their abilities, I wasn’t able to find a suitable API, so I decided to create my own JSON objects and use those as my data source. The part that honestly took the longest for this project was simply writing and collecting all of the hero information and images. I spent a while reading the fan-made game wikis to pick out the most useful information, I downloaded the ability icons from the official Overwatch 2 website, and I spent a while finding and watching replays in the actual game to collect screenshots of the abilities in use. I also took the time to scale down the resolution of the images and compress them using tinyJPG.com to improve the image loading times on the site.

Even though the main goal of the design was to emulate the game menus, I couldn’t just not make the design responsive. The last step in the development process was to slowly reduce the width of the window, see what visually broke, then go through the CSS and add or adjust rules to ensure the design stayed functional. At a certain width, I have to convert the side by side design into a stacked, scrollable one so that everything would work on tablets and mobile devices.

Finally I built the final files and deployed them using Replit. There were a few styling problems that appeared on my mobile phone that I hadn’t caught, but it wasn’t too much trouble to correct those and redeploy.

Public Feedback

I shared the website with friends and online, and got overwhelmingly positive feedback. The most positive I heard was a friend asking if I would consider adding the rest of the Overwatch heroes beyond the three in the demo as they would like to actually use the site as a tool for learning. I also got some valuable UI/UX feedback online, for example someone made a good point that having separate tabs for weapons and abilities was often inconvenient, since many heroes only have a single weapon. For now, this is where I am leaving the project, but I do hope to come back at some point to make those improvements.