top of page
background.png
splash project.png

WHEN

Jan - May 2023

DELIVERABLES

strategy

discovery

ux research

ux design

wireframes

high-fidelity design

usability testing

Project Overview

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.
 

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?

Highlights

  • 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

mid-page-splash.png

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.

05 understanding user.png

USER SURVEY

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:

06 understanding user.png

USER PERSONA

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

06 user persona.png

USABILITY TESTING

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

08 usability testing.png

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.

09 problem.png

THE PROCESS

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.

04 process.png

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.

10 sticky panel.png
stick-purchasepanel-layers.png

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

PAGE STRUCTURE

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.

12 page structure.png

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.

13 stakeholders.png

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.

content moduels.png

4 - News & FAQ modules

NEWS 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.

15 news.png

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.

Back to Top

bottom of page