B

Shopping Overwatch MTX by hero

An Innovation Week exploration of a hero-led shopping flow for Overwatch's MTX, making it easy to browse cosmetics by favorite hero and adding gamification to encourage collection.

Problem statement

This was an Innovation Week project where I worked with a PM to create a new shopping flow for Overwatch’s MTX products.

Overwatch players typically have one or two favorite heroes and prefer cosmetic items for those heroes. However, the current shop doesn’t make it easy to browse MTX items by hero.

Goals

We identified the following goals:

  • Make it easy to quickly find cosmetic items for my favorite heroes by displaying key details like ownership status and item category without cluttering the shopping experience.
  • Use gamification principles to create a sense of accomplishment when collecting a full set for a specific hero.

User flow

Since this user flow needs to fit into the current e-commerce experience, we identified the following pages to design.

Section in family page

By adding a swimlane section featuring the most popular heroes on the family page, users are encouraged to browse by hero. This also introduces a new product card that shows how many items the user owns.

All heroes page

On the All Heroes page, users should be able to see all heroes and filter them by role. This is consistent with the Overwatch game page design.

Hero page

On a specific hero’s page, we focused on three key functionalities:

  • Show progress in MTX item collection to encourage completing a full set.
  • Allow filtering by ownership, category, rarity, and more.
  • Reveal additional information through interaction.

Progressive disclosure

We aimed to keep the design simple, but upon interaction, users can see more details about pricing, rarity, and whether the item is available for purchase.

Key takeaways

Exploring an alternative user flow with different user intent was one of the most fun thought exercises — a chance to add an element of gamification and bring more delight to the purchase experience. We were well aware of the technical limitations on this project so did not push further to make it a reality, but I hope the team can make a case for this user flow for purchase down the line.