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.

Prescedence Research

Something that came up over and over again during the workshop was “just make it like Fortnite”. Fortnite is seen as one leading example of a successful in game store. However, Fortnite is a very different game from NHL. What works for Fortnite and it’s player base doesn’t mean it would work for NHL’s players, our inventory, our tech and the goals we want to achieve. I conducted prescedence research and evaluated best-in-class and competitor games to learn how other games handled their micro-transactions and in game stores. I identified best and worst practices as well as potential audiences, pain points, and user journeys.

User Interviews

I then worked with the user research team to build a user test plan and get initial player feedback and sentiment. The goals of this interview were to:

  1. Understand player concerns and needs if an in game store were to be introduced

  2. Get answers on some of the questions that came up through workshops

  3. Introduce some early store concepts to players to understand their preferences

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.

Cross Functional Workshops

I ran a assumption mapping workshop with cross functional partners including stakeholders, producers, and engineering, and other designers to get everyone aligned on what we are building, learn what technical limitations might exist that can help us scope or pivot our designs, and get an inventory of assumptions from the cross functional team that can help inform the research plan and upcoming user interviews.

Develop & Deliver

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.

For example, in early iterations, as users scroll through the store, the item they hover over would automatically preview on their character, allowing users to easily users to preview any item they want just by scrolling through the store. However, after sharing this concept with my engineers, I learned that with our current tech, the load times for previewing each item would be too slow to have a fluid experience for our users

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.