League of Legends Client

UI/UX Design, Rebranding, Visual Design

[Objective]

League of Legends is a multiplayer online battle arena (MOBA) video game that was developed and published by Riot Games. It was made in 2009 with several hundreds different changes over the course of years to improve the quality, layout, and efficiency of the client. With the addition of new icons for upcoming events and the usage of the League of Legends client as an additional hub for Riot Games Teamfight Tactics and Legends of Runeterra, several portions have started to overcrowd and overwhelm users, leading to confusion. I decided to try my hand at redesigning the client in a way that fits the current branding while still incorperating feedback from various players on the icon placement and quality of life updates.

Updated Banners

In order to create a more customizable feel to the league client, I’ve incorperated an optional character skin to represent your banner, not just your profile background. This allows people to see more about you. Honor system ranks have also been included on the top portion to add more color and personalization to your banner. Each person has the same sized plating, absent of banner flairs, but you will always stay in the middle plating.

For several years, people have wanted new ways to customize their own identities and that’s been a great option for profiles, but I wanted to add it where everyone inside the lobby could view. Tokens, usernames, titles, and role choices have stayed in their respective locations.

[Approach]

My approach is retain the branding of League of Legends while updating the day-to-day quality of finding where everything is. A few updates specifically targeted were the ability to see your tag after your username, to easily update your status, and to clear out some of the icons crowding the top bar. I also wanted to option of an expandable friends list and customizable features of your banner to match the current options of your profile appearance. Consolidation of icons and a rework of the client to only adhere to League of Legends, since Riot Games has their own existing client to hold Teamfight Tactics and Legends of Runeterra. Addition to the new Sanctum rolling system that just arrived, I wanted to place it outside of the crafting zone to keep them separated, as well as keeping Clash its own important place on the left.

Notifications

I followed a similar direction regarding notifications with the brighter yellow circle and the pulsating glow surrounding it, but I felt the need to consolidate the bell icon, so I positioned it next to the other social icons so they are organized within the same place and can be expanded and retracted with the friends list. I used the soft yellow glow behind it to symbolize a new notification. The friends request system has been moved to the Add Friends icon to consolidate the menus and simplify the layout.