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.