Today’s topic was a character profile. Being a fan of Blizzard games, I decided to work a bit on the WoW armory on mobile devices. The goals were simple – squeezing as many information and functions as possible into one screen, while keeping it clean and understandable.
Basic information like, name, server, achievement points, item level and character level go on top, so you know right away if you are looking at the right character profile or not. Opportunities to check information like Achievements, Collections or Progression is taking up way more space in the original armory on PC – here it’s merely a list. It helps the visitor to get a quick overview of the content, choose the one that they want to know more about, and only load necessary information. Considering this is an app for mobile, chances are that people use mobile network to look at the information, are high. Therefore loading speed and the amount of data to be loaded is crucial to be as small as possible.
The skewed layout and the class-related cover image on top is giving the original, fantasy-like design a modern touch without taking up too much space. This way, design doesn’t get prioritized over content and usability.
Source files and fonts (Semplicità) were downloaded from the source code of askmrrobot.com (beastmaster background) and worldofwarcraft.com (character picture, race and class icons, patterned background).