Design challenge – Loading screen


Week 2 of our weekly design challenge. This time the objective was to redesign the League of Legends loading screen.
This is a game I and Hans-Erik play a lot. We even call ourselves (jokingly) professional e-sportsmen. So this is something that we see very often and subconsciously have most likely analyzed thoroughly.

The existing version is as follows:


To start with – the current UI looks clean and neat – everything is most likely where it should be, so this makes it hard to redesign. But who said these challenges were supposed to be easy – they are meant to be challenging.

So without further ado, here is my take on the redesign:


Click to see the image full-sized.

My version is more compact, while still retaining the existing information in some form or another.

lerjeteThe border, that indicates whether the user has achieved any special ranks in the previous season or has earned some other rank through being honored by other players. The bauble (drew it myself) on the top of the illustration indicates whether the player has earned an honorable rank (and depending on the colour of the bauble, which one)

The ping has been turned into a three-bar indicator. Personally, I don’t see the difference between 30 ping and 60 ping – as long as it is green, I know the player will not experience any issues due to internet connection.

Everything else is as it is in the original, but has been repositioned and resized.