What’s better than spending time and immersing yourself in something that you love? I’ve been a huge League of Legends player and e-sports fan for the better part of a decade, and I’m similarly excited about user experience (UX). I combine the two subjects in this passion project where I take on the challenge of redesigning League of Legend’s Chroma shop.

Introduction

Riot Games’ League of Legends is a free-to-play multiplayer online battle arena game (MOBA). Part of Riot Games’ revenue stream comes from players spending RP, a paid premium currency that unlocks microtransaction (MTX) cosmetics. In order to maximize this revenue stream, the game client must offer a seamless shopping experience.

The big question remains: why should Riot Games care about redesigning the Chroma shop? First, Riot Games claims to be the most player-focused game in the world. To back up this bold claim, Riot should take no shortcuts when it comes to perfecting their UX. From an accounting perspective, I reason that the benefits of allocating resources to redesign the Chroma shop outweighs the opportunity cost. I don’t have access to internal information at Riot Games, so I’ll have to base my argument off educated estimates.

I’m aware that there are other factors I didn’t consider because I lack internal information on miscellaneous expenses, prioritization, projects in development, and more. Or, my numbers could be hilariously wrong. However, based on what I do know, I argue that the Chroma shop redesign is worth tackling.

I will be working with a fast-tracked version Google Venture’s 5 day design sprint:

• Day 1: Unpack, Sketch
• Day 2: Decide, Prototype
• Day 3: Testing, Polish

The objective of my design sprint is to craft a superior Chroma shop experience that enables League of Legends players to browse, find, and purchase Chromas frictionlessly. To begin, here’s a side-by-side comparison of the current Chroma shop and my redesigned version:

Phase 1: Unpack

It’s not User Experience without the user. I kick off the unpacking phase by surveying 20 League of Legends players, all of which have experience purchasing chroma(s). My short survey aims to investigate the goals of users when they enter the Chroma shop and how effectively they are able to achieve it. Here are the results:

The survey results, along with opinions from some of my League of Legends friends, helped me identify the following user types:

From the results, it’s clear to me that I need to focus on improving 3 major components – organization, filtering, and presentation. Good organization and filtering is crucial in helping “The Planned Buyer” locate the Chromas they are looking for, and presentation is key in helping “The Unplanned Buyer” find their desired Chromas.

Phase 2: Sketch

Introducing Cards:

I introduce the use of cards as a way to improve organization and presentation. Each skin has its own card that contains 3 components: a preview window, all of its Chromas, and the call to action buttons. The card design solves the following organization issues:

Consistency: The card design has improved consistency and scalability. The Chromas for each skin are aggregated into a card that has the same layout regardless of whether it contains 3 or 8 colour variations. The result is a cleaner and more consistent look.

The old design lacks organization because each Chroma is treated as a separate listing. It’s hard to tell which Chroma belongs to which skin at a glance, and the user has to look for where the Chromas for each skin starts and ends.

Space efficiency: The card design features a large preview window where users can try on different Chromas for each skin. This addition allows me to fit more Chromas in a smaller screen estate while improving usability.

Sketching Solutions

Sketch 1:

+ Pro: Most efficient use of space, can display 4 full skins and 4 halves.

+ Pro: Allows the user to compare Chromas easily by hovering over different colours (Preview is stationary)

– Con: User can’t see all available Chromas at a glance

Sketch 2:

+ Pro: Shows all available Chromas for a skin at a glance

+ Pro: User can get an enlarged preview by clicking or hovering over a colour

+ Pro: Stationary model allows for easy Chroma comparison

– Con: Individual Chromas (when not hovered) are smaller than live version

Introducing Recommended:

While sketches 1 and 2 both feature improved organization and space efficiency, the issue of “The Unplanned Buyer” users not knowing which Chromas to buy remains. Scrolling through thousands of Chromas without a specific target can be overwhelming.

“Recommended” is a new feature that showcases a selection of Chromas that a player may be interested in. The recommended section is tailored to each player based on the champions they play, the skins they use, the colours they like, and more.

Sketch 3:

+ Pro: The new recommended section helps users find Chromas they like

+ Pro: Shows all available Chromas for a skin at a glance

+ Pro: User can get an enlarged preview by clicking or hovering over a colour

+ Pro: Stationary model allows for easy Chroma comparison

– Con: Recommended section takes up too much screen estate

Improving Filters:

Comments from Reddit, the official forums, and my survey reveals that the current filters are a common pain point. Players wish to be able to see only the Chromas for the skins or champions that they own. I’ve added the following filters to the shop:

1. 1. Show Chromas for champions owned
2. 2. Show Chromas for skins owned
   

Phase 3: Decide

Since I’m working on this design sprint solo, I needed some external input to make sure I’m not tunnel visioning. I begin the deciding phase by running my sketches through some of my League of Legends friends. Here’s the general consensus on each of my sketches:

Sketch 1: The bigger preview is a plus, but not being able to see all the Chromas by default seems like a downgrade.

Sketch 2: Having a large preview window while retaining the ability to view all Chromas at a glance is great. The card design is consistent and easy to digest.

Sketch 3: Has all the benefits of sketch 2 and more. The recommended feature is a great addition to help players find new Chromas, but it is overloaded and takes up too much screen estate. Recommending all the Chromas for a skin is less enticing than suggesting one specific Chroma.

I decided to use sketch 3 as a base. The combination of a standard card design and the new recommended feature tackles the primary pain points players had with the Chroma shop. The weakness of sketch 3 is that the recommended section is overloaded.

I found that suggesting specific Chromas, rather than multiple, to be more effective in attracting the players attention. Not only did players find individual Chroma suggestions to be more personal and thus give it more attention but it was also easier to digest at a glance. I drew from sketch 1’s portrait card design to simplify and improve readability of the recommended section.

Phase 4: Prototype

My high-fidelity prototype is complete with the basic features required to test whether my redesign solves the issues of the current Chroma shop. “The Planned Buyer” can take advantage of the expanded filtering options and improved browsing clarity to narrow down on the Chroma they want. “The Unplanned Buyer” can use all of the above plus the new recommended feature to find Chromas that interests them.

Try me, I’m interactive!

Phase 5: Testing

In the final phase of my design sprint I pit my interactive prototype against real-world scenarios performed by real users. The objective is to understand whether the proposed solutions excel at solving current pain points. If it does, I can look to identify areas where further improvement can be made. If not, I can look toward larger changes or in some cases, try again with a different approach.

I put together a study group of 6 League of Legends players: 2 players identify as “The Planned Buyer”, 2 as “The Unplanned Buyer”, and 2 have never purchased a Chroma before. I prepared a set of tasks for each participant based on their user type.

The Planned Buyer:

1. 1. Find Chromas for the skin True Damage Ekko
2. 2. Find Chromas for the champion Teemo
3. 3. Filter by Chromas where you own the skin

The Unplanned Buyer:

1. 1. Look for a Chroma that interests you in “Recommended Chromas”
2. 2. Compare the different Chromas for Dawnbringer Karma
3. 3. Filter by Chromas where you own the champion

I conducted live moderated studies with each participant. In the first part, the participant was instructed to attempt the provided tasks while voicing their opinion or thoughts (explaining how they expect to complete each task, whether behaviour was expected, etc.). After the tasks, I discussed with the participant what they liked about the prototype, what frustrated them, and what could make things even better. Here’s what I discovered from the tests:

• Filters:
• Once every while, Riot Games releases a Chroma that can only be purchased for a limited time. There’s currently no filter to view only limited availability Chromas, but such filter exists for skins. I’ve added the limited availability filter for better consistency.
• More Recommendations:
• The new recommended section was well-received by the players that I’ve tested. In fact, a few of the players wanted even more. I added a horizontal scroll and expanded the recommended section to include a few more Chromas.

Overall, the prototype performed very well. Players were able to complete their tasks with minimal, if any friction. The new card design and improved organization was appreciated by every participant in my study group, which I consider a huge success. At this point, I’m convinced that my design is a step up over the current version, so I’m ready to move on to the final step.

Polish

I finish up my prototype by adding in elements from League of Legend’s current design language. In the image above, I display the different sources I use to create the polished version of True Damage Ekko’s Chroma card.

Updated Design

To wrap up the 3rd and final day of my design sprint, my polished prototype of the Chroma shop is presented below. My redesign has been tested and validated to eliminate existing pain points and augment the flow of League of Legend players.

When I presented the polished high-fidelity prototype to my study group, 6 out of 6 participants thought it was much easier to understand and use. Overall, the latest design achieves the following:

1. 1. Better organization and consistency with the new card design
2. 2. More filtering options to help players find and browse Chromas
3. 3. New recommended section helps users discover new potential purchases

Okay, so you must be wondering why there’s a fourth day in a 3 day design sprint. Well at the end of day three I posted my completed design sprint on the League of Legends section of Reddit, the world’s largest forum. The reception was incredible! The post got thousands of upvotes (Reddit’s version of likes), hundreds of comments, and even a Reddit Gold award (when someone likes your post so much they donate a couple of dollars on your behalf). Some of the comments were flame, some were negative (and fair) criticism, but most were positive.

I’ve always stood by the idea that UX design is an ongoing iterative process; a design can always be improved (barring some basic designs).  After receiving some excellent feedback from the Reddit post, not continuing to upgrade my design knowing that it can be better felt wrong. Thus, I decide to add an extra day to my design sprint and treat the Reddit feedback as part two of testing.

Phase 5.1: Even more testing

Feedback from comments of my Reddit post helped me identify numerous areas where my design could be improved. After testing and validating the new iterations with my study group, here are the changes that made the final cut:

Skins with more Chromas:

User Nimrodhellfire pointed out that my design only showed skins with 6 Chromas but some skins has up to 9. My solution to this significant oversight was to make the Chroma section more compact by resizing the individual Chromas and reducing the margins between them. I also added an extra line of space under the name of the skin and Chroma so longer names would overflow to the second line.

Typography:

The users Nalthe and Strnoobspk1 helped me understand that the typography of my design had legibility issues. I overused capital lettering which not only made headings hard to differentiate but also hard to read. The text in the call to action buttons were also too large and took attention away from the product title.

First, I made the product title (the name of the skin) font larger and changed it to lower case so it’s easier to read and differentiate from the section title. Next, I made the text on the “Chroma” and “Bundle” buttons smaller and dropped the opacity slightly so it stood out less. Finally, I adjusted the kerning (the space between individual characters) so the type looks less crowded. The result is a design with greatly improved legibility.

Latest Design

The latest design of League of Legend’s Chroma shop is presented below. The comments on my Reddit post provided valuable information to help identify areas that could be made even better. All in all, candid feedback from Reddit, LoL’s official forums, my League of Legend friends, and my study group helped forge a truly user-centric experience.

When I presented the polished (and updated) high-fidelity prototype to my study group (again), all participants agreed that day 4’s latest design was an improvement over day 3’s. Overall, the latest design achieves the following:

1. 1. Better organization and consistency with the new card design
2. 2. More filtering options to help players find and browse Chromas
3. 3. New recommended section helps users discover new potential purchases
4. 4. Improved typography makes information easier to digest