Problem

The current shopping system does not allow a user to purchase multiple items simultaneously.

 

Items must be bought one by one and creates friction for users that wish to purchase multiple items in a single shopping session.

 

Since there is no feature that allows users to save what they were looking at, if interrupted the user would have to start the shopping process over again.

 

 

Ideation
Exploring Solutions

 

 

Persona Creation
User Persona : Jinx

Jinx Persona Final

   

USER FLOW CHART
Axure RP

        With over 300 skins and 100 champions, the amount of purchasable items in the store is very large. First, I investigated the flow that players utilized to purchase runes, champions and skins in the store by creating a flow diagram using Axure.

 

         With the current system, users who need to purchase RP in order to complete their order must be taken through roughly 14 steps! Having too many steps to accomplish a simple task such as purchasing a skin not only increases friction in their experience but can increase the amount of users failing to complete the purchase entirely.

 

Lowering “shopping cart abandonment” while maintaining a fluid, usable design is what was explored.

   

Usability Testing
User Test : CC

Brief Summary

User CC is tasked with going through the shopping system in order to purchase a predetermined amount of items: a champion, a skin and runes to go with the champion.

User is found hesitating in the RP selection screen because he needs to calculate how much RP he has to purchase.

User finds the “laggy” filtering experience annoying when he was searching for the runes.

User believes that the system could be improved by including a “Recommended” items section, in which the system recommends an item based on recent purchases.

 

   

 

 

Methods
Design Propopsal | Wireframe Sketches

 

 

 

Shopping UX Layout
Add to Cart Design| First Page(top)

          The first proposed design prototype’s layout is very similar to the current system. Currently in the client, if a user clicks on the “Unlock” button. They will be directed to the Purchase Item “pop-up” in which it shows the user’s RP balance before and after the transaction.
         With Shopping Cart A, I proposed that there should be two buttons A) Unlock or “1-Click Buy” and B) Add to cart. As aforementioned, the ability to purchase multiple items simultaneously has huge implications in terms of helping users complete their purchases. Shopping for skins should be an enjoyable experience, not a hassle or a tedious chore.  By allowing users to easily add items to their cart and purchase their items at once, they can :
  • Reduce number of clicks and steps required to purchase what they desire.
  • A user could buy a Champion, a skin for the champion AND the runes required all in one go.
  • Better manage their RP purchases. Currently, if a user wants to buy multiple things, the user must calculate the amount of RP required themselves. Only if they’re buying a bundle or a single champion would they see the “before and after” of their RP balance.

as1

 

Shopping UX Layout
Check Out | Pop Up

        When users have put the items in their cart, it’s time to check out! With a click of a button on the right side of the shopping page, users can easily check out. There are multiple ways that this could be achieved. For Shopping Cart A, I proposed a pop-up checkout system opposed to a new page. This decision was partly due to consideration of the adobe air client and also because the pop-up allows users to close it if they wish to add something else. In a new page, users would have to click on shopping cart again, and usually would end up going to the “Home” Shopping page, losing their spot.
  • Visually see the items in the cart.
  • Easily remove items in the cart by clicking on the “X”.
  • Be able to purchase their cart by using RP, IP or a combination of both!
  • Check post-purchase balances for their purchases (RP and IP).

as2

Shopping UX Layout (B)
Alternative Design | Wishlist & Preview Skins

           Another variation on the shopping cart system. It is very similar to Shopping Cart A with a few major differences:
  • Users have to click on the portrait in order to be able to add items to cart or purchase.
  • The shopping cart system is continually updated on the right hand side of the shopping page.
  • Users can see RP / IP funds and items in their current cart without clicking on the cart (as opposed to system A).
  • skin preview system can be found so that users can actually see what their skins look like in game.
  • A button within the “pop out” where users can add the item to their wishlist instead of the cart. (See below)

as3

 

Methods(cont'd)
Wishlists Explored

 

 

Shopping UX
Notes on Recommedations

                   Investigated the methods that content could be filtered. The current filtering system feels “heavy”. Also discussed the reason that the one-click purchases should stay. Even with the addition of a shopping cart system, users that want to buy just one item shouldn’t have to use the cart.

[edit: as of newest patch the system correctly does not show skins that receiving party already has when in gifting menu] Wishlists aren’t anything new. Do they have a place in the League of Legends shopping system? The shopping experience for users could be greatly increased if a wishlist system was implemented. In the user interviews, many praised the new gifting system but many also thought it was annoying that users couldn’t see what skins the receiving party has. I could relate to this concern because I also found it very frustrating find my friends in the list, finding a skin that I would like to purchase for them, writing a personalized message, only to find out that the user already has that skin. A system that shows whether or not the receiving party already has the skin BEFORE you confirm the transaction would increase the fluidity of the gifting experience. A public wishlist would also cure the user having to make multiple gifting attempts. A user could simply view the receiving party’s wishlist and purchase directly from the said list!

Stepping away from the altruistic benefits of a wishlist. there are other benefits to implementing a wishlist. Not all users are the same. Their shopping behaviors can vary from compulsive buyers, “bargain hunters” to even the “plan and research” consumer. Having a wishlist can provide users with a saved list of things that they wish to buy in the future. A cool functionality here would be a pop-up message in client if a skin on your wishlist ever went on sale or was close to become a legacy skin.

  • Gifting becomes less of a hassle. Users can find exactly what to gift others without multiple trial-and-error sessions. [edit: as of newest patch this is no longer a problem!]
  • A place to save what skins you want. Users won’t forget the skin they wanted to buy even after some time passes.
  • A reminder system that will let users know when their wished-for skins go on sale!
  • Put sets of runes or champions you are saving up for with IP in the wishlist for easy purchase.

af1

Shopping UX
Wishlist System Needs

            Discusses the features that should be implemented if the wishlist feature was added. Some mentionables include:

  • A page in your profile (therefore accessible by your friends
  • You should be able to one-click purchase everything within the list
  • Feature of buying or gifting directly from someone else’s list.
  • Easily naming the wishlists so you know exactly what’s on them.

A couple variations of the possible ways this information could be visually represented.  To keep in style with the current visual appeal of League of Legends, a similar “scrolling 3-D portrait” style seemed appropriate.

af2

 

 

Further Research
Current Projects

What’s next?

In order to test the efficiency of the proposed system, user testing will need to be conducted with prototypes that I am making on Axure RP.

With these prototypes we can gain meaningful quantitative and qualitative data.

Some important measures that will be taken into consideration include: User Task Completion Duration (Comparison), User Flow Step Count (Comparison), User Satisfaction (Survey).

I hope you enjoyed reading through this project as much as I enjoyed working on it.

Game on!