WHEN
May 2022 - Oct 2022
DELIVERABLES
strategy
discovery
ux research
ux design
wireframes
high-fidelity design
usability testing
Challenge
Currently, Battle.Net desktop app displays a single content layout to every user that visits a Game Tab. This content experience is geared more towards users that have already purchased and play the game, thus providing suboptimal experience for new players who do not own the game.
Knowing that users who already have downloaded the desktop app are deeper in the purchase funnel, the team designed the Starter Page -- a new Game Tab layout that displays the most relevant content for these visitors that creates the most hype and excitement while giving them enough information to build confidence in their purchase decision.
Highlights
-
Primary designer on Starter Page 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
THE PROCESS
UNDERSTANDING PROBLEM SPACE
Because a game is a complex product, new visitors depending on their familiarity with the genre and franchise may want to see different types of content. We also acknowledged that they usually get most of information on the title from a breath of resources on the internet, and it was important for us to understand the level of knowledge by the time they got to the desktop app's Game Tab.
USER PERSONAS & USER JOURNEY
After initial research of understanding different content that various types of users want to see, we mapped them out on the user purchase journey to determine the role that the Starter Page and Product Detail Page plays in the user flow.
USER SURVEY
While we developed a theoretical framework to understand how different pages play off of each other, we sent out a quick user survey to users who visited Diablo IV Game Tab, which hasn't been released yet, to understand the content they want to see on a Starter Page. The important learning was that while players disliked seeing irrelevant advertisements, they appreciated purchase-related information as long as they are relevant (e.g. purchase options and pricing).
Heading
Detail
Heading
Detail
Heading
Detail
USABILITY TESTING FOR CONTENT PRIORITY
The key insights from the user survey opened up the discussion to embed the Product Detail Page on the Game Tab instead of building a separate Starter Page while making Product Detail Page more robust to host most variety of content.
We ran a usability testing to determine the right amount of content to present to players to build purchase confidence while not overloading them with information.
USER RESEARCH INSIGHTS
From the user survey and usability testing, we confirmed that embedding Product Detail Page is equally informational and exciting for players with purchase intent. We also identified the following improvement opportunities to enhance the purchase experience on the current Product Detail Page.
Users have difficulty finding specific information about the game
Most participants experienced friction when trying to find specific information like platforms and genre, and many expressed issues trying to understand items included in different editions.
New players want to see more introductory content to the game.
While all players were able to pick up on the vibe and theme of the game from the general imagery, new players expressed doubts about understanding the gameplay. They asked for more media and description that explains the game features while building hype and excitement.
Existing fans of the franchise want to see more updates and news
Players familiar with the franchise looked for contents like developer updates and news to learn how the new game is different from the other games. They were willing to read long articles and asked for more frequent content updates.
THE PRODUCT
STICKY NAVIGATION + CTA
Challenge: Users want to navigate through sections more easily and find specific information
Solution: Sticky navigation bar and CTA
xxxxx
FEATURE DESCRIPTION MODULE
Challenge: New players want to see more introductory content that explains the game
Solution: Feature description modules to host different types of content
xxx
SECTION FOR NEWS
Challenge: Experienced players determine their purchase decision by reading more update contents featuring in-depth gameplay descriptions and more
Solution: A section dedicated for news and developer updates
xxxx
RESULTS
The MVP was released for Diablo IV's Open Beta launch on March 17, and the feedback we got from new players has been extremely positive. By providing more robust content on the Product Detail Page while making it easier to navigate and find information, we saw xxxxxx
Now that Product Detail Page as the Starter Page has proven to be successful, we want to take this template and apply across all our games. Our next steps include:
-
Thinking through overall architecture of Game vs Shop top navigation
-
Working with the game teams to provide better media assets and description to fully utilize the Game Feature Module
-
Designing new modules to accommodate different type of content including FAQ
-
Designing for different use case (e.g. nutritionists creating meal plans for their clients)
KEY TAKEAWAYS
1. Creating alignment with stakeholders and the leadership
xxxx
2. Listening to users' voice and being flexible
xxxx
3. Giving authority to
xxx