World of Chel Store

Game UX

I was the design owner and led the design strategy for a new in-game store experience for NHL24’s online multiplayer mode where players can browse, preview, purchase and equip vanity items.

Impact

YTD WOC Revenue

$mm

Product Discoverability Rate

+90%

Role
Product Designer

Company
Electronic Arts

Duration
6 months

Status
Shipped Q4 2023

Production Time

Completed 2 months ahead of schedule

The Problem

World of Chel is NHL’s online, competitive team mode that lets players choose between character classes and equip pond hockey-inspired gear to express their identity against opponents individually or with friends as part of a club.

Currently, WOC has over 900 pieces of vanity items for players to collect and equip, however, all these items can only be unlocked randomly by opening hockey bags, which can be obtained after playing a game. Users can spend hours and hours playing games but still never obtain the gear they want to get.

“Why lock the gear we want to use behind RNG? I went all of last year being the only one on my team without the jersey they all use.”
— WoC Player

The Proposal

Reduce the friction of players obtaining vanity items that they want and create an additional avenue for revenue by introducing an in game store to house all vanity items, where players can browse and purchase items they want directly with grind currency or buying in game currency.

Check out the feature live and learn about the other cool things added to WOC in the NHL24 trailer below!

Process

In respect of non-disclosures, I have omitted confidential information in this case study. Please reach out to me here if you have any questions regarding this work!

Discover and Define

Balancing Monetization and Player Experience

Though players will still be able to obtain items for free with grind currency, introducing microtransactions to a $60 game is bound to get backlash from our player base. I defined the design strategy and utilized the following methods below to to ensure that this feature balances business and stakeholder goals while ensuring a fair and transparent experience for our players.

Cross Functional Workshops

Previously, features for upcoming games are discussed from a top level and trickle down to the design team during the pre-production process, where the designers have 3 months to work on wireframes and flows. Engineers are brought in even later, and as a result features are often cut or partially cut due to scope. There was also no way of measuring success other than game reviews and player sentiments online.

I ran a series of workshops with game producers, game producers, engineers, directors and stakeholders early on in the process to share our research findings and get everyone thinking about feasibility early.

Assumptions mapping workshop, 1 of 3 workshops ran over 3 weeks

Through these workshops, were were able to get alignment across disciplines on:

  • What makes an in game store successful

  • Which success metrics to track, and what hooks engineering needs to implement into the code in order to track these metrics.

  • Potential technical limitations that can help us scope or pivot our designs.

  • A set of insight-driven design principles as a foundation for decision making and team alignment.

Presedence Research and User Interviews

I evaluated best-in-class and competitor games to learn how other games handled their microtransactions and in game stores, identifying best and worst practices and potential user pain points. I also worked with the UXR team to conduct user interviews with our players to get player sentiments on early concepts and understand player concerns and needs if an in game store were introduced to World of Chel.

This part of the process helped define a) whether or not we were solving the right problem and b) the scope of our initial vision and how that fit within the company's broader design, business, and marketing goals.

Develop & Deliver

User flow mapping button interactions and how users would interact with the store experience.
An early concept where character customization area is the central location for everything related to trying on and equipping items onto characters, with a section for “locked” items that they can select to unlock with currency. However, we found that players overwhelmingly preferred having separation between character customization and obtaining new items.

User Testing and Iterations

I created prototypes and conducted usability testing with 12 players of difference experience levels from new users to competitive players to test task completion and iterated on screen designs based on feedback.

One change was how users would equip bundles after purchase. Initially, players could quickly equip an entire bundle set to all of their presets with just one button. However, we found through testing that players preferred being able to select which items they want to equip to which preset even if it takes more clicks.

Before: Blanket equip all bundle items onto any applicable preset
After: Players are taken back to the item preview page, where they can select which preset to equip items to

Outcomes

Because I took the initiative to align early with the cross functional team, we were able to pivot designs when necessary and finish production months ahead of schedule, leaving us more time to plan for features for the upcoming games. This set a benchmark for collaboration amongst team members for future development cycles.

Our user testing showed an improved item discoverability rate of 90%, and the new hooks set up by engineers in the game code is able to track the rest of our metrics for more direct access to user insights in a reduced effort manner. 

NHL24 shipped in Q4 2023, and WOC is currently up $MM in revenue YTD. I’m extremely excited to see how the feature continues to evolve in NHL25 and beyond!

Balancing UX Goals, Business Goals, and Tech Constraints

Based on the research conducted and stakeholder alignment, I created wireframes for the user flow of the store that addressed pain points of users while taking into account business goals, engineering constraints, and game producer requests. I referred back to our design principles as a source of truth to make design decisions, and worked with engineering to utilize existing screens where possible to lower scope and costs.

Designing scalable, future proof designs

Because we started on designs ahead of the usual production schedule, details of what content will be available in the store haven’t yet been decided. I defined parameters and sizing for item tiles and groupings that were scalable and flexible to deal with all edge cases from individual items to bundles to character sets and any other content that producers want to add in the future. I then collaborated with interface designers to fine tune designs, and provided a hand off documentation for engineers to refer to during the development stage.

Final Designs

Storefront

A scalable storefront layout that allows users to discover new items as well as find legacy gear

Item Preview

Players are able to see the full breadth of what the item offers on each of their character presets

Item Equip

Players can quickly equip the items that they’ve purchased without having to enter character creation