League of Legends Item Sets UI Redesign


Overview

*This is a personal project, not endorsed by Riot Games

What I did

I redesigned League of Legends' Item Sets feature UI to make it more accessible for players. Through user research, I discovered that many players had not explored the benefits of this tool. I created a prototype that addressed these issues, including renaming and relocating the tab, adding a champion and map selection screen, and creating a preview feature to visualize item sets in-game.

How I did it

I used Figma to make changes to the design and sent an interactive prototype link to friends and players in the community to gather feedback. I iterated on the design based on their feedback and conducted further testing.

What I learned

Clarity is crucial in UI design. The redesign showed the significance of user research and testing to cater to a wider user base. An intuitive and user-friendly design is important for game tools to make the experience less complicated and intimidating for players.


Introduction

As a long-time player of League, I’ve always found the Item Set feature very useful yet undervalued, and the topic of using item sets were brought up one night when talking to friends while playing some ARAM. I quickly realized that I was the only one of the group that utilized this tool and that most of my friends didn’t even know that this feature existed. Which is what led to the creation of this redesign.




I conducted a series of short user interviews for this redesign, utilizing both Discord and the in-game client through direct messages and champion select lobbies. Surprisingly, many of the veteran players I interviewed, including those in high ranks such as Diamond and Masters+, were unaware of the existence of the item sets feature.

Furthermore, those who were familiar with the tool considered it to be outdated, not particularly useful, and some even had misconceptions of how the tool is used. However, I did encounter one player in champion select who utilized item sets to teach their newer friends what items to build, highlighting the tool's potential value.

In general, my findings suggest a lack of education around the item sets feature. While the tool has undergone updates and offers intuitive UI elements that facilitate ease of use, many players remain unaware of its capabilities. I strongly believe that this tool could greatly benefit both new and experienced players, and am committed to improving its visibility and usability in my redesign.




Ideas and sketches



Based on what I learned from the user interviews, I took a look at the current design and sketched a potential flow that targets all the areas that would cause confusion or misconceptions.

One of the first changes I made was renaming the tab from "Items" to "Item Sets", as this provides users with a clearer expectation of what they will find upon clicking the tab. Additionally, I created an explanatory video that showcases the benefits of using item sets, in a way that is easily accessible and understandable to users.

Another area of concern was the flow of creating an item set. Currently, players click on "Create Item Set" and are taken to a page that shows irrelevant champion-exclusive items, as well as ARAM and URF specific items, even if the Summoner's Rift icon is selected.

To improve this, I added two additional screens, one to select the map and another to select the champion, which allows for better filtering of items and gives the player a sense of investment in creating the item set.



Finally, I redesigned the shop and added a "Preview" button so that the player can see exactly what the item set will look like in-game.
This creates a more immersive experience for the user and provides further clarification on the benefits of creating an item set.

Overall, these changes aim to improve the user experience and promote the use of the item set feature by making it more intuitive, accessible, and relevant to the player's needs.


High Fidelity Designs



Gamemode and Champion Selection screens



Selection Flow



Item Set Creation Redesign



Preview Button Demo


The Preview button is essential in my redesign because it provides the user with a clear idea of what their Item Set will look like in the game.
This helps to clarify the benefits of the set and encourages the user to invest in creating an Item Set.


User Testing

After the completion of the high fidelity prototype, I wanted to validate my efforts and research.

The main things I wanted to test were:

  • if players would understood the function of item sets through my redesign
  • if players would be more inclined to use the feature if my changes were implemented
  • if there were any other obvious issues that I overlooked
I conducted user testing & interviews with players of varying skill levels to see if the redesign solved the issues I was aiming to fix.
I shared the interactive prototype on Figma with players and friends who wanted to test it on their computers, and for those on mobile devices,
I created a YouTube video (shown in the introduction) with sound effects to demonstrate the design changes.

Findings

Pros

  • In general, most of the players found my design to be more intuitive and user friendly, especially the newer players who appreciated the added preview button which helped them visualize what they were actually creating
  • Everyone said that having the tab be renamed "Item Sets" helped clear misunderstandings about the tool's functionality
  • One player liked the fact that champion and map specific items were cleared from the selection screens

Cons

  • One veteran player had valid concerns over the missing gold costs in the redesigned shop which I completely overlooked
  • One player had concerns over not being able to see the item description and build paths for mythic items
  • A few players brought up a good point of lack of clarity in the shop's filter icons
  • As this was a niche feature to begin with, some players had concerns over the general usefulness of the tool

Based on this feedback, I made the following edits to the prototype :

I added gold values and gave item descriptions on hover to more accurately represent the in-game shop and promote clarity.

Then I also added and redesigned the item build path to fit the new theme of the shop

And lastly, I added a small text box next to the filters on hover for more clarity


Conclusion

Designing this project was a lot of fun, especially because it involved an under-utilized feature that I personally used often.

If I were to do this project again, I would take more time to understand other frequent users of the feature so that I can target their painpoints as well.

Looking back at this project, I realized that it could have been improved by adding further functionalities such as showcasing how ARAM and champion-specific items would look like in the edge cases where those game modes and champions are picked.

Moving forward, I am excited to continue doing UI redesigns for niche features in the games I play.

Thank you for taking the time to look through my case study, If you have any suggestions on how to improve this design or ideas for my next project, feel free to reach out to me through my Email or Linkedin! Check out my other case study for a Battle Analytics Feature in Clash of Clans!


Interactive Figma Prototype