Jan - May 2023
The company's focus on new user acquisition for the upcoming launch of Diablo 4 prompted the need for a revamp of the existing product detail page. The current page design only offers minimal content, which can result in a suboptimal experience for new players who are trying to learn about the game. However, since a considerable number of potential buyers are existing fans who are already familiar with the franchise, it is equally important to cater to the information they want to see and provide an easy way for them to purchase the product without having to go through the content they are already aware of.
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?
Primary designer on the Product Detail Page Improvement project for the desktop app, leading the end-to-end process from problem definition to high fidelity design
Collaborated with designers and product managers from multiple teams on product strategy and development to provide cohesive user experience across various products/platforms in a phased approach
UNDERSTANDING UER JOURNEY
Given the game's complexity, we recognized that users often obtain information on the title from multiple resources on the internet, and it was important to assess their level of knowledge when they arrived at the Game Tab of the desktop app. This mapping of user journey prior to acquisition formed a strong foundation for understanding the problem space of the Product Detail Page improvement project.
We sent out a quick user survey to ~20k users who visited the current Diablo IV product detail page, which hasn't been released yet, 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:
Based on the results of the survey and acquisition flow mapping, we created three distinct persona types to guide our design strategy.
As we had an existing product detail page, we aimed to identify and resolve any user pain points present in the current design while creating the new design.
In the unmoderated usability testing, we asked 10 both Diablo and non-Diablo players to take a look at Diablo II Resurrected product detail page. The focus of the testing included:
Assess that PDP presents sufficient content on PDP to build purchase confidence
Test how effortless information search is on PDP
Identify any missing content from the page
PROBLEM & GOAL
The product detail pages must be tailored to meet the needs of different user groups:
For new players, we need to strike a balance between generating excitement about the game and avoiding overwhelming them with too much information.
For exprienced players new to the franchise, we want to provide enough in-depth information about the game without creating additional work for the content programmers.
For existing Blizzard players, we need to provide relevant information that they're interested in, while also making it easy for them to purchase the product.
To manage the complexity of the project with numerous components to address, we adopted a modular approach by breaking down each piece and prioritizing their implementation after identifying the problem space and defining the features that needed improvement.
1 - Separate purchase from content
STICKY PURHCASE PANEL
By separating purchase from content into two distinct layers, now the layout serves both user types. This design allows new players to explore the game without getting distracted by the purchase information, while veteran players can easily access the purchase panel from anywhere 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.
2 - Navigation accessible anywhere
STICKY NAV BAR
During usability testing, we discovered that new users were having trouble finding the relevant information they were looking for because they were overwhelmed with the amount of information presented on the page. To address this, we added a sticky navigation bar to help users navigate the page more easily.
3 - New content modules
Together with the game franchise team, we developed a page strategy for organizing different types of content on the game landing pages, as the company was primarily focused on acquiring new players.
STAKEHOLDERS IN CONTENT MANAGEMENT
Here are some insights we gained after conducting a user interview with the content team, as we faced the challenge of prioritizing content creation due to limited bandwidth.
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.
4 - News & FAQ modules
Based on our findings, we discovered that experienced players typically seek news and updates about the game before deciding to make a purchase. To address this, we introduced new modules that highlight important marketing updates which couldn't be included in the static product detail page layout.
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
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.