Reworking League of Legend’s Missions System
The Project
Prior to an upcoming interview with Riot, I decided to give myself a take-home redesign challenge to sharpen and practice my UX skills in a video game context.
I gave myself a week to do an end-to-end redesign of League of Legend’s initial mission interface.
Constraints
To avoid redesigning every part of the interface, game, and post game screens, I constrained the redesign to the client and focused on a singular experience for players to view and claim rewards.
Things I’m not looking at
- Reward feedback during game or post screens
- The mobile app
- In game reward notifications
- Types of rewards
Context of the mission system
In a developer post on missions for League of Legends, Evan “Revenancer“ Humphreys defines missions as,
“Missions will offer players new challenges to solve on the Rift for rewards like unique skins, Summoner icons, and loot.”
He talks about deepening the game players already know, through interaction with these missions, whether players decide to complete a chain of events for an NALCS team icon or relive the story of a champion.
See the post here.
That post was written over 4 years ago. When I spoke with friends I know who play League about this project, they mostly talked about how they don’t actively engage with missions, but sometimes complete them passively.
This also happens to be my experience.
Challenges with the system
Today, players often miss seeing missions which are located at the bottom of the “social” menu under a scroll icon. This is confusing because missions don’t have any interactions with the social menu (like for example how chat does).
Along with a challenging interface location and a small footprint, League also rewards players for completing challenges. These rewards can range from craft-able items to official currency (like in the case of blue essence)
Occasionally, there are specific event only rewards that add to the a growing number of reward currencies obtainable from missions. These can eventually be cashed in for in-game prizes.
In speaking with other players, I learned that they mostly complete rewards passively and craft loot separately, failing to make a connection between the missions and their loot, which took away from the meaning and significance of the missions.
For this project I worked on an experience to clearly house missions and subsequently lead players directly to rewards. By linking missions directly to rewards, my hope was that players would be more inclined to actively interact with the missions and thus League’s universe, enriching the out-of -game experience. When designing this experience, I had two main goals.
- Increase player interaction with missions, through directly linking missions and rewards
- Increase player satisfaction when completing missions, through better organization and showcase of the missions interface
Design Process
For this quick 1-week project, my process had four phases: initial conversations on mission system, ideation, testing, and iteration.
Ideation
One of the earliest ideas I had to increase player interaction with missions was to expand on the lore of missions by dedicating a full page to each mission and the mission’s details.
Although players generally appreciated the increased visuals and lore, the overwhelming feeling was one of confusion and frustration of having to go between pages to read the descriptions for all of the missions and see if they were completed.
The design also surfaced direct bottoms to rewards through the “Redeem” bottom (across from title) and “Loot” (in the mission description). These were sometimes clicked before players actually did any of my usability test tasks, so I knew they were a great motivator.
Players were confused though, as the design attempted to link rewards from events directly to their pages where they could be cashed in (i.e. loot crafting for project tokens).
Overall users rated this design a 6.25 out of 10. Not great but a step in the right direction.
At the same time, I was testing another design that focused on brevity:
Players were much more favorable towards this style of organization and found it more enjoyable than the last design (rating it 7.25 out of 10) because it was more usable.
However, this design wasn’t perfect either and some players were initially overwhelmed by the sheer amount of information on one page.
More problematic was that there was constant confusion behind what claiming versus redeeming a rewards meant.
The idea behind claiming and redeeming was that claiming would add rewards to player’s inventories and redeeming would take players to the page where their currency could be spent (oftentimes loot). This would link missions to tangible loot for completing them.
This extra step added unneeded complexity to rewards, and that was a huge deterrent for a proprietary system.
As I continued to iterate, I took these learnings forward.
- Splitting reward currencies was overcomplicating the reward redemption process
- Players get more enjoyment from the system when it is more usable
- UI should highlight lore but be more about the missions and rewards
And came up with these guiding principles
- Rewards shouldn’t be overly complex to obtain or understand
- Focus on missions in aggregate
- Maintain visual interest
- Highlight rewards
Iteration
I moved forward with the second design tested earlier and was facing 2 main problems.
The first one was with the organization of the missions screen, where it charted every challenge. Initially, this overwhelmed players as they saw lots of boxes, bars, and numbers (shown below).
To remedy this, I added a title screen to initially cover the mission information (shown below). This made the initial missions screen not as overwhelming, and allowed players to digest information at their own pace. Additionally, it provided a good chance to surface lore, which was a focus of the first design.
When the player was ready, they could continuously open missions from different events and learn more. This solution was superior to my first tab-based design, because the missions were all on the same page, which avoids issues of players not being able to read and complete all missions at once.
Principles followed: Focus on missions in aggregate, maintain visual interest
The next issue that I was facing was confusion behind claiming rewards and redeeming them. Again, I wanted to create a link between completing a mission, claiming the loot, and then crafting the tangible reward.
I decided that my solution of directly linking mission rewards with their exchange page (i.e.providing buttons to the loot page) was adding too much complexity to the situation.
I pivoted and looked to achieve this connection between missions and rewards through the existing system of passively receiving the rewards, and letting the player craft them as a separate process.
My solution was to include a screen of rewards obtainable from completing the different missions alongside the missions themselves (below). This finally resembled the high-stakes connection between missions and rewards I had envisioned.
Here, players could see rewards that could be won from the challenges, rewards that they had already won, and rewards that had been won but not yet cashed in for their prizes (below).
At the bottom, I included the “redeem” button which took the player directly to the loot page, where their loot could be crafted into real prizes.
Principles followed: Highlight rewards, rewards shouldn’t be overly complex to obtain
I believe this solution is a nice middle ground between actively claiming rewards, and passively collecting them. Here, players still collect their rewards passively, but can more actively see what they have to win and go directly to their loot shop to get tangible rewards.
Additionally, there’s more visibility for the status of rewards so that players can know where their loot came from and craft!
Northstar, final thoughts, and further conversation
At this point, it has been a week since I started the project and that was the deadline that I gave myself.
Throughout the process there were many other ideas and directions that were considered, but weren’t ultimately pursued for one reason or another. One of these directions that I found interesting is sequential missions, or missions that could be completed in a specific order that increases in difficulty.
Sequential missions provide a chance to give increasingly desirable rewards as players complete harder challenges. For players who aren’t as involved in the league universe to completionists of every mission, this format provides an exciting chance to dive deeper in the League universe through missions. Imagine the chance to win the newest skin for one of your most played champions!
I enjoyed this project a ton and plan on testing the newest designs with other players, seeing how much they enjoy them, and pushing final visuals. I’ll eventually look to do this in another post!
