I was asked recently by a friend of mine how I would redesign Blizzard’s Battle.net interface for Warcraft III if I had to. I thought it was a curious question but recently, the original Starcraft got a remaster, which got me thinking about what a remaster for Warcraft III might entail. As you may all know, I enjoy Warcraft 3 very much, so I took it as a challenge and went ahead an designed some mock-ups for what I would redesign Battle.net as.
Initially, I admit to being somewhat stumped. I had never really used Battle.net before and to redesign something I wasn’t familiar with was difficult. My research led me to look at the UI for Starcraft II: Legacy of the Void and see how much it changed from the first game. I also quizzed some of my gamer friends who play online a lot more than I do and found out that people don’t really care all that much for a chat window. I was told, quite bluntly, “No one cares about chat. Hide it.” Looking at Starcraft II, that’s pretty much what Blizzard did – not hide it, per se, but make it less invasive while retaining its presence. Warcraft III had a dedicated chat window; Starcraft II’s chat window is at the bottom-right of the screen, present whenever you need it regardless of the screen you’re in, but out of the way. It was important that I kept this element in my redesign.
As you can see from those screenshots of the Starcraft II UI, the chat window is present at all times, but if you do not wish to use it, it makes itself scarce. With this conundrum out of the way, it was down to design the actual layout of the interface, and in the slideshows below, you can see the various steps I took. Notes are available at the bottom of each image for more information.
The initial render was made with the existing Warcraft III UI in mind. The buttons for Create Lobby, Join, Map Info and Exit Battle.net are all on the right to coincide with the sliding panels of the game. The rest of the design is based closely on Starcraft II’s UI but flipped. One thing I wanted to show was the fact that you could browse maps locally rather than always have to be maps provided by Blizzard.
After some initial feedback, it was made clear that the buttons at the bottom were taking an unnecessary amount of space. The bookmarks were moved to the drop-down menu to allow you to filter by Bookmarks and the empty space was then filled with the buttons. Where the buttons had been, the map grid was extended to fill it. The background to the maps was removed to allow the design to ‘breathe’ a bit more. The Exit Battle.net button was removed entirely under the reasoning that, “Users would intuitively know to press the Escape key to exit.”
Removing the Exit Battle.net button was not sitting well with me so I snuck it back in in the form of an exit-door icon. The entire design was flipped so that map selection remains on the same side of the screen for both Warcraft III and Starcraft II since Blizzard fans tend to play multiple Blizzard games, so standardising the design sounded like a good idea. The second image in this slideshow is a mockup for the Versus screen where players can pick their faction and try their luck at Ranked or Unranked games.
And that concludes this little foray into the ideation of a Battle.net redesign for Warcraft III. It took a while to get there but hopefully, you found this post, dare I say, interesting.
PS: The chat window can expand just like in Starcraft II.