Belle Lee - Product Designer

Improving product detail page on Battle.Net shop

Redesigning the product page to serve both newcomers seeking info and longtime fans ready to buy—balancing depth with speed

Project

The company’s focus on bringing in new users for the Diablo 4 launch has highlighted the need to redesign the product detail page. The current version lacks content, which may result in a subpar experience for new players looking for game information. However, many potential buyers are longtime fans already familiar with the franchise. The challenge is to balance both audiences—providing helpful details for newcomers while allowing returning players to quickly find what they need and make a purchase with ease.

Problem Statement

The product detail pages need to cater toward various user types and their goals.

For new players: How might we help new users to get excited about the game without being overwhelmed with the depth of information?

For existing Blizzard players: How might we offer relevant information that they are seeking while also providing easy access to purchase the product?

Role

Senior product designer

Date

2023

Deliverables

Strategy
UX research
Usability testing
UX design
Wireframes
High-fidelity design

Understanding Problem

Understanding User Journey

Players gather information from various online sources, so it was crucial to evaluate their level of knowledge when they reached the Game Tab of the desktop app. This mapping of the user journey before acquisition served as a solid foundation for understanding the challenges in improving the Product Detail Page.

User survey

We sent out a quick user survey to ~20k users who visited the current Diablo IV product detail page to understand the content they want to see on a product detail page for new games. From ~1k responses we collected, we learned the following insights: Read more about learning insights from the survey on gamer purchase journey.

User persona

Based on the results of the survey and acquisition flow mapping, we created three distinct persona types to guide our design strategy.

Usabiliity testing

Since we already had a product detail page, our goal was to fix user pain points while designing the new version. For usability testing, we asked 10 Diablo and non-Diablo players to review the Diablo II Resurrected product page. We focused on:

Checking if the page had enough content to build purchase confidence
Testing how easy it was to find information
Identifying any missing content users expected to see

Problems & goals

Assuming that new and experienced players want to see different information, how do we strike a balance between generating excitement about the game and avoiding overwhelming them with too much information?

Process

To handle the project’s complexity with multiple components to address, we took a modular approach. After identifying key issues and defining which features needed improvement, we prioritized their implementation for a more structured and efficient workflow.

Purchase Panel & Page Nav

Sticky purchase panel

By creating separate layers for content and purchase, the layout now caters to both user groups. New players can explore the game without being distracted by purchase details, while veteran players can quickly access the purchase panel from any point on the page.

Stress-testing the component

After establishing the fundamental user flow, I conducted testing on 8 different product types on 4 different platforms to ensure that the component could handle multiple calls-to-action and types of purchases.

Sticky nav bar

In usability testing, we found that new users struggled to find the information they needed because the page had too much content. To fix this, we added a sticky navigation bar to make it easier for them to move around the page.

New Content Modules

Page structure

We developed a page strategy for organizing different types of content on the game landing pages to be aligned with company’s goal to focused on acquiring new players.

Stakeholders in content management

A different team will be managing content on the Shop. We conducted user interview with the content team to identify possible content we can put on the Product Detail Pages.

New content modules

Our initial goal was to utilize the existing content on the product detail page. To achieve this, we created a new template that prioritized the visual assets over text, while treating text as supplementary information.

News module

Next Steps

We're adopting a modular and iterative approach to implement project components. While some are being developed, others are awaiting resolution of stakeholder disagreements. Next steps include:

Implementing sticky mini purchase panel across all platforms including the web shop after figuring out what to do with the secondary custom buttons
Consolidating design patterns across various platforms including the mobile app
Improving navigational challenges we've observed during usability testing
Designing new modules to accommodate different type of content including News and FAQ

Key Takeaways

1. Creating alignment with stakeholders and leadership
The complex and complicated project faced a number of alignment challenges because not all stakeholders, including the leadership, had a full visibility into the project directions. Strategic communication to create alignment plays a critical part in moving the project forward, and this challenges allowed me to mature as a more senior designer in a large and complex organization.

2. Refining product process with product partners
Because the project had so many moving parts, forming a collaborative and effective relationship with the product partners was the key to the project's success. Throughout its process, we continuously ironed out the project's scope while developing the design proposals that came out of this initiative into subsequent projects in the future.

3. Working with constraints of existing ecosystem
Testing the design changes on the critical Product Detail Page, which is vital to the user purchase flow and appears on multiple platforms, is essential to accommodate all use cases. We've developed a comprehensive matrix to identify conflicts and I'm excited about refining this process further to enhance its efficiency and effectiveness.

Unique challenges of organizing a large volume of content
This project provided an excellent opportunity to view content consumption as a user experience challenge and to identify different ways to improve both reading and authoring workflows. Design is just as important as content, which is why it's important to make your blog as user-friendly as possible.
Working better with engineers through rigorous documentation
At the start of the project, the goal was to document the existing blog styling in preparation for the authoring tool migration. This provided me with a solid understanding of both the existing design and the new components we needed to create, down to the smallest details. By creating comprehensive design specifications, I was able to effectively communicate with the engineers and address any questions they had throughout the implementation process. This experience enabled me to create my own techniques for documenting design that improved communication with engineers.