League of Legends Store Redesign

In-game stores lie in a pretty unique intersection of content: they’re not quite a part of e-commerce, but they’re not quite a part of the game itself. Real money gets exchanged for virtual currency, which users spend on virtual items, but somehow it all ties in with the very real social and strategic aspects of games that we know and love.

A group of friends and I took on the challenge to redesign the popular MOBA game League of Legends store (skins, champs, etc — not the in-match potions, armor, damage, etc store) for a project. Our focus was on usability and information architecture rather than on visual design, addressing the unintuitive navigation and structure. Essentially, we wanted to make navigation more intuitive and the information appropriately presented.

Responsive Design

The first major problem we noted was that in the store, the client was not responsive. Strangely enough, almost all other screens in the League client incorporate a responsiveness: resizing the client in the post-game details, for example, is smooth and responds to adjustments seamlessly. In the store, however, this is what happens:

Note how resizing the window causes vertical AND horizontal scroll bars to appear. No one likes horizontal scrolling.

To account for this, we included responsive versions of the store client in our mockups with different horizontal widths.

Navigation

Secondly, the navigation generally was confusing to all the fellow Leaguers interviewed. Why is “Purchase RP” on the same navigation hierarchy as “Ward Skins”? Why is there a whole page dedicated just for “Codes”? What does “Purchases” even really mean? And “Account”? We found that these tabs could be grouped into four major categories that have much more inviting and informative titles: “Featured”, “Shop”, “Get RP”, and “My Account”.

We found that there were four main categories that these side-tabs could merge into.

The four main categories at the top. Also added large arrows on the Featured jumbotron so that users can click on a large button to go back/forth, rather than the tiny numbered squares. Also added a Recommended for You list, based on your top played champs.

* We’d like to emphasize the focus on usability rather than visual design, and our lack of access to the original UI components and assets.

Now, on to the rest of the pages!

Shop

In the original design, we noticed in the original client that every single page wasted a ton of horizontal space with the shop tools (search, filters, sort by). We moved these to the top of the scrolling container.

There’s also a very subtle issue we noticed when users search for items. When you search for items in the store, the original design presents results as you search. This meant that as I typed “Ahri”, I would get severely laggy screens as I typed the “A” — bringing up all champions with the letter “A” in them (!)— , “Ah” — bringing up all champions with the letter “Ah” in them (think Malzahar, Tahm Kench…) — , “Ahr”, then “Ahri”. Super annoying. Our version would present results only after you press Search again to minimize the pop-up box, or at least a better algorithm to match your search in real-time without the lag.

Some slight changes to side-tab names. “Skins” were changed to “Champion Skins” so as not to confused with “Ward Skins”, “Boosts” became “IP/XP Boosts”, and “Account” was changed to “Account Changes”.

We also brought back the side-tabs for this page because we had subcategories that were applicable here. We decided to place them on the right to avoid cluttering the left-hand side.

In addition, we included Item Cart and Gift Box features. This allows users to unlock more than one item at a time. The current system for gifting is a super long process which allows you to gift only one item for one friend at one time. How annoying is that? What if I want to gift all my friends Gentleman Poro Ward Skins for Christmas? :(

The Cart page also has a Wish List and Saved for Later! Sorry, Amazon. Was that your idea?

To account for these features, we also changed the Champ View unlock button at the bottom right here.

“Unlock Now” would allow users to unlock that one item, immediately, rather than having to navigate the whole cart screen. Convenient, and also helps the user’s old mental model for anyone having difficulty transitioning from the old to this new design.

Another system we wanted to add was a “My Runes” slide in/out window. Right now, if you want to shop for runes but you forgot which ones you already own, you either have to click Unlock to see how many you own, or navigate back and forth between your summoner profile and the shop to do so. See video below.

Yes — you lose your spot in the Runes store EVERY time you exit out of that screen.

We saw this as a problem that could be easily solved by adding a little peek-in window that lets users see what runes they already own. We considered including an entire “rune builder” idea, where you’d be able to simulate combinations of runes, but felt it wasn’t appropriate in the shop, since most rune adjustment and optimization happens on your summoner profile.

Yay! No more back-and-forth, or writing down on paper/screenshotting what you already own.

Get RP

Note that we changed the name from “Purchase RP” to “Get RP”. This was to clarify that you may have already purchased a prepaid card, so you just want to get that RP now — or maybe a friend gave you a card code. Or something like that. It also just sounds more friendly and less transactional.

The only major changes here are that we fit the structure inside the frame of the rest of the client layout, rather than the pop-out modal that is in the original client design. It makes the process feel smoother, seamless, and less intimidating, which we believed to be especially important for this page. After all, those people spending $200+ on RP at a time want your purchase to feel safe.

The breadcrumbs at the top were also slightly improved.

My Account

Lastly, the “My Account” page. This page combines “Purchases” and “Codes” in the original design. We brought back the side-tabs here again for those subcategories, as opposed to the random buttons in the bottom left that were in the original design. Included also is a “Help Center” page. The idea behind that was to include some sort of immediate support for people who may be freaking out about purchases that they don’t believe they made. Again, users want to know their purchases are valued and safe, and a simple button to press for help can mean a lot.

That’s about it for our redesign! We’d love to hear any feedback, comments, suggestions, or questions.

Meet us on the Rift! Add us: SimpleJeff, SimpleDabumbum, and ahrisoo.