League of Legends Client UI Redesign

The Project

Continuing on after university, I wanted to further develop my skills using design & wireframe prototyping software for UI/UX design. The League of Legends client (LC), being infamous for its minimalistic design and being hard to understand for new users, was the perfect challenge for me to further develop my UI design skills for a pre-existing game.

Easier readability for new users


The ‘LC’ is infamous for new players struggling to understand the header elements that direct them to a lot of the main pages of the client. After continued use the player would learn to understand what they are, but for a new player that needs to get a grasp of the masses that the game has to offer, making this a more simple and streamlined process will ultimately help retain players in the long term.

<<< Access the prototype >>>

Project Goals

Maintaining consistent colour & shape themes


As a young developer I am still working on my craft, so a main focus for me in this project was maintaining consistent themes in colour and shape for the design of the interface. As a gamer myself I am constantly observing and analysing the design of other games I enjoy, specifically for this project I took shape inspiration from NetEase Games’ Marvel Rivals, whilst maintaining the colour palette for the already existing ‘LC’.

Reduce unnecessary main elements


The ‘LC’ has a number of elements in the main header that don’t contribute to the general use flow of your standard player. From taking these unnecessary elements and placing them in a portion of the interface that is still easily accessible but not part of the main header, the player has an easier understanding of what elements directly necessary for gameplay and which elements are “extras”.