Belle Lee - Product Designer

Revamping news strategy for blizzard.com

Refreshing news.blizzard.com to improve usability for readers and authors, while preparing for a potential future move to Battle.net.

Project

News.blizzard.com page needs a refresh both in terms of the architecture and experience for both end users and authors. Due to potential future that we might end up moving news to Battle.net, we want to take an incremental approach in renovating the news experience on news.blizzard.com site. The project scope included:

Improving user flow across different platforms with navigational clarity
Re-examining new feed and article pages
Adopting design system components and identifying new components to contribute back to the library

Problem statement

For news readers, how might we provide a better content experience and address the key pain points on the current design?

For our stakeholders, how can we fulfill stakeholders' requests while keeping project and operational costs to a minimum?

Role

Senior product designer

Date

2023

Deliverables

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

Understanding Problem

UNDERSTANDING TRAFFIC & User

We examined the traffic data to create a framework for how users entered the Blizzard ecosystem and moved between different touch points. We also collected ~200 responses from the embedded survey to better understand users.

User persona

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

Stakeholder interviews

Since this project will affect the editorial team responsible for creating and programming content on the new news site, we wanted to ensure that their goals and concerns were taken into account during the design process.

Project goals

Although the goal of this project was to enhance the user experience, the initial version of the redesign had to be limited in scope to accommodate all stakeholder demands. After ensuring agreement among all teams involved, we opted to address the following issues while reserving some additional features for a subsequent phase of the project.

Process

To keep the project on schedule, the team broke the work into individual components, assigning each to a designer. Clear milestones were set from the start, allowing engineers to begin development on each section as soon as it was ready.

User flow

For maintenance efficiency, we wanted to consolidate all news pages under the news.blizzard.com domain, while seamlessly integrating the game news feed with individual game sites. Our challenge was to decide whether to display Blizzard's or the game site's navigation bar and find ways for users to discover additional content without introducing unnecessary complexity to the user flow.

Usability testing

In order to ensure that users could easily navigate across All News Feed, Game News Feed, and Article pages, we conducted an unmoderated usability testing. We confirmed that our decision to show Blizzard navigation bar on All News Feed, and game navigation bar on Game News Feed and Article Pages would be provide sufficient clarity.

news feed - curated or filtered?

We ran a usability testing to see how users would navigate through a curated model or filterd model to see contents they are interested in seeing.

Proposed Solution

all news feed design

Based on the insights gained from the usability testing, we determined that for phase 1 of the news project, we should proceed with the Filter version. However, we will continue to explore the Curated version for potential implementation in the future.

Game news feed design

We applied light theming to each game’s news feed to create a seamless transition for users moving from the game’s website to the news feed.

Article page design

When designing the Article Page, our primary focus was on two user goals: 1) meeting accessibility standards for all blog components, and 2) enabling the discovery of related products or additional articles within each article.

Contributing to the design system library

One of the goals of this project was to help improve the workflow of contributing new components back to the design system library. We worked closely with the Design Systems team to formulate strategies to how to expand the design system library to include broader product areas.

Next Steps

Despite the need to prioritize and defer certain features, this project holds significance as a crucial step towards phasing out the expensive legacy CMS and transitioning to a new authoring tool. The anticipated outcome is a 20% reduction in authoring time and a 15% decrease in maintenance costs once the entire authoring team embraces the new tool. After the release of the minimum viable product (MVP), the team intends to further explore opportunities to utilize content as a revenue-generating avenue.

Key Takeaways

Integrating search and browse
Beyond the components and sections, the key to success was designing a logic that could automatically curate and recommend products and additional content with minimal manual effort. We want to continue exploring better ways to build a browse experience as efficient as search to find content and be inspired.
Intricacy of working with design system
Being the first non-game studio team to work with the design systems, we faced a learning curve. However, it was a great opportunity to strategize the adoption of the design system across the organization and streamline workflows for other teams.

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.