Jiaqi Wu | UI/UX Designer
LEAGUE OF LEGENDS
ABOUT THE PROJECT
League of Legends interface redesign is a personal project that's been done within 3 months. I took the original LOL play menu structure and did a visual update. The final outcome is a functional prototype made in Framer JS.
MY ROLE
UI/UX designer, visual designer
Final prototype play-through video
CURRENT INTERFACE
I have always been a big fan of this game. Despite all my love for it and its current interfaces are absolutely well-designed. This play menu just seems a bit outdated art style wise, especially compared to the newly updated normal draft launch interface. Also, through research, I have found a lot of league players were having problems guessing what are the game modes actually means. It seems to me that the description boxes are understated in this design because hardly anyone read them.
WIREFRAME AND MOCK-UP VIDEO
I went through a lot of iterations before I landed on this design. The experience starts from the inner circle which stores the 4 root game modes:"PvP", "Player VS AI", "Custom", and "Tutorials". After the first level, the outer circle expands and becomes the "choosing circle", and inner circle stores the player's selection. After the selection has been completed, the outer circle disappears and the experience goes back to a full inner circle.
INSPIRATIONS
My inspirations include the current newly upadted normal draft lanuch interface and an illustration I found online that's about the backstory of the League of Legends. As I was creating something that's meant to be a part of the current interface, it is crucial that I should reference the current art style. And I was genuinly attracted by the magic pattern the summoners were standing on in the illustration. That's why I wanted to design a round pattern as to refer back to the original story about the game.
Current normal draft pick launch interface
Illustration about the backstory of the game