Hey guys, we’re Riot_Mort and SpicyMemeDreamz, here to talk about some of the key design elements behind League’s new leveling system.

With the uncapped leveling system, our goal was to recognize and reward you for playing League regardless of your playstyle or skill level. We also wanted to give you the ability to progressively show off your dedication to the game in the years to come.

Uncapping League’s Leveling

Since our intention was to build an uncapped leveling system that could grow with you, we had to think early about how the visual language could scale with those conventions. In plain speak, how do we make you look cooler as you level up? We looked at a lot of systems in other games (and in real life) to see how progression feels across them all, and found that there seems to always be a point where visual representations of progression go overboard. Whether it’s an adornment of stars or additional medals and materials tacking onto the sides, a visual representation of progression always runs the risk of looking the same (or unintelligible) after a certain point.

Leveraging current systems

For League’s system, we looked for an expression of progression that would continually feel fresh for you, but also had clear points of distinction when you were comparing your progress against that of others. To accomplish that, we first examined our existing progressions systems. We wanted strong design elements we could leverage into something new, while still maintaining a sense of familiarity. It was also a big focus of ours to provide you with goals, or checkpoints, as you level, to give you that awesome feeling of accomplishment. Being able to reach meaningful thresholds allows everyone to feel like they’re working towards an achievable goal instead of grinding to infinity.

The newly-launched Honor System brought a uniform color tier progression to League that will eventually be used for all methods of progress and rarity. While this was a core element that was imperative for us to implement into our own system, it also came with a unique challenge based on the system we were building. With leveling being uncapped, it would make it nearly impossible to ever reach that highest tier color (as well as create a situation where you feel like you’re forever trapped in a single color).

Our solution was to still leverage the color tier system, but to build in a reset system where the colors would go back to the lowest color tier and scale back up at certain level milestones. This gave us room to scale up levels as high as we wanted while keeping the clear visual signifier of progression. To make sure you don’t stagnate too long in a current color tier, we set a reset to happen every 100 levels. With exception to our first level progression (which starts at level 30 and changes at at 50), you’ll progress every 25 levels.

Using themes as progression indicators

Now that we had a clear way of showing tiers through colors, we still had to solve for how to make one level of green look better than the next. To solve that, we looked through the universe surrounding League of Legends to find visual elements that could accompany this color tier system and help differentiate one from another. We did many explorations that utilized elements from our game, Runeterra itself, and even skin line themes. Going through these explorations, we discovered we could dress up the surrounding areas of progression borders, as long as a few core principles stayed in place:

Make each border look better than the last

• Utilize volume, color values, and different materials to escalate higher tiers from lower ones

Follow similar shape language for core areas of the borders

• To make sure you are always looking in the same place for your current progression, it’s best to keep a uniform area where progression starts and stops for each level. For higher tiers in a progression ladder, utilizing different shapes helps differentiate them from the rest.

Use themes to decorate, not obfuscate, the progression of a player

• Though we wanted to make sure each of the progression themes looked fantastic, the focus is still on where you sit in your current level and how much you have to go until the next. Having these themes cover up or take away from that primary goal would eliminate the purpose of continuous leveling.

WHERE IT LIVES

Since this progression is about you, we wanted to ensure that all elements of the system stayed as close to information about you as possible. This heavily influenced where and how we show leveling for yourself (and others) around the client.

Always visible

At any given time, we want to make sure that you are aware of where you are in terms of progression. Bringing the level meter back to an always-visible section of the client was important to us — it gives you an easy-to-see visual element to help you decide if it’s worth getting one more game in to level-up. It’s always ideal if you can find information without having to try and track it down.

At a glance

One of the things we agreed on pretty early was that you and your friends should be able to see each others’ level. Bringing level and current progression into the player hovercard gives you a quick way to check in on your friends, see how they’re doing, and compare your own level progress. That said, we also decided your level wasn’t important to any particular game, so from Champ Select until the Victory (hopefully) screen, we didn’t want your level shown. Level is a fun progression system, but is not a measure of your skill. That’s what ranked is for! You WILL have a way to show your progression off (if you want, and we’ll cover that in a sec), but it won’t be exposed by any in-game system.

On your profile

Your current level and progress will be shown on your profile, with a border that evolves as you get to higher levels.

After a match

We wanted to make sure your progress is quickly visible whenever you finish a match. Bringing your progression into the end-of-game screen creates a destination during a core part of our game loop that lets you know how much you gained for that match and how close you are to reaching your next level.

In game

For the icing on the cake, we wanted to give you the extra ability to show your level progression to others in the fields of battle. Since this system is meant to be an indicator of knowledge acquired and time played, it made sense to create a series of emotes for every major tier of the themes. So whenever you get a sweet outplay or want to show off how much time you’ve spent on the Rift, go ahead and smash that emote button.

We talked about a single emote that would upgrade as you leveled up. However we felt (and have seen with other things like the Honor Wards) that players favor a specific reward and like to keep using it, even if they’ve earned something else. If we removed that when you leveled-up, it wouldn’t be ideal. Instead, if you really love the Level 50 emote, you can have it and use it forever.

WHAT COMES NEXT

We hope everyone enjoys having a little extra progression in League. You might be struggling in ranked to make progress, but now you’ll always be moving forward in some way. We think that’s going to feel a lot better. As always though, we’re open to feedback. If you have any questions or comments, drop a note in the comments or pop by the boards!