WHEN
May - July 2023
DELIVERABLES
discovery
ux research
ux design
wireframes
high-fidelity design
usability testing
Project Overview
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 end users, 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?
Highlights
-
Lead designer on the News project, leading the end-to-end process from strategy to high fidelity design
-
Conducted various user research activities, including analyzing data, administering user surveys, and conducting usability tests
-
Collaborated with designers and product managers from multiple teams on product strategy and development to ensure stakeholder alignment for timely implementation
UNDERSTANDING TRAFFIC
Before starting the project, the team had already examined the traffic data to create a framework for how users entered the Blizzard ecosystem and moved between different touch points. During this process, we collaborated closely with the analytics team and product partners to comprehend user flow and develop questions that we wanted to confirm through other user research methods.
USER SURVEY
To confirm some of the questions we had from the traffic analysis, we embedded the survey as an article at the top of the Blizzard News site and collected ~200 responses. On December 8, Blizzard was featured at the Game Awards, so we split the data before and after the big event.
USER PERSONA
Based on the results of the survey and acquisition flow mapping, we created two distinct persona types to guide our design strategy.
STAKEH0LDER INTERVIEWS
Since this project will affect game sites that have their own news feed and 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 GOAL
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.
THE PROCESS
To ensure timely delivery of the project, the team divided the work into individual components and assigned each piece to a designer. Milestones were communicated from the outset so that engineers could begin development work on each problem area.
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 Fed, and game navigation bar on Game News Feed and Article Pages would be provide sufficient clarity.
ALL NEWS FEED
We also took this opportunity to evaluate potential challenges and opportunities of the two design proposals for All News Feed we already narrowed down with the leadership.
ALL NEWS FEED_ cont.
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
We decided keep the MVP of Game News Feed to minimal features while ice-boxing some of the stakeholder requests to the next phase of the project.
ARTICLE PAGE
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
1. 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.
2 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.
3. Usability testing for micro-research
There are three types of UX research:
-
Macro-research is strategic and future-thinking. It provides concrete frameworks that guide macro business decisions.
-
Middle-range research is focused on user understanding and product development.
-
Micro-research is closer to technical usability and detailed interaction development.
User research conducted for this project ranged across all three levels, and the insights gathered were instrumental in establishing the groundwork for a user research playbook in collaboration with the UXR team.