Case Study: Shop by Heroes
This was an Innovation Week project where I worked with a PM to create a new shopping flow for Overwatch’s MTX products.
Problem statement
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.
We have 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.
Role
Senior product designer
Date
2022
Deliverables
Strategy
Wireframes
Mid-fidelity design
User Flow
Since this user flow needs to fit into the current e-commerce experience, we’ve 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.