Blizzard.com Redesign

Research Methods

1. Competitive Analysis
2. Google Analytics
3. Past Research and Current Experience Audit

Competitive Analysis

We took a look at competitors and some of the strengths that we wanted to potentially include in our site included a big header or carousel at the top of the page, some sort of filtering for games for users to be able to choose games they would be interested in, and multiple sections throughout the page to support release and news content.

Data and Public Perception

We took a look at available data to better understand what were the most utilized features and which ordering of games might make sense for featuring games. 

Current Experience Audit

Mapping out the current experience helped us understand strengths and weaknesses of the current page and identify where there might be opportunity areas for discoverability of games for both new and current players.

Define

Identifying the right features for both new and current players

User Flows

As the front page of the company, it was important to visualize user flows from the homepage such as finding game information, company and leadership information, or job postings. We had to make sure that users would still be able to easily find the information they need with this redesign and even improve the discoverability of this information.

Content Priority and Features

With the timeline in mind of releasing the refreshed Blizzard.com by the beginning of 2022, we brainstormed a list of features that were must-haves and nice-to-haves. Some must-have features included:
‍
1. Displaying the full library of Blizzard games
‍
2. Filtering mechanism for users to match to desired games
‍
3. Area(s) for displaying big marketing beats

Explore

Designing a sustainable and flexible solution.

Ideation and Sketching

With the research results in mind, I started sketching a variety of ideas that would address users needs and pain points when it came to using the Blizzard homepage.

To help the brainstorming process, I came up with some HMW questions to keep in mind throughout sketching.

1. HMW showcase relevant gameplay experiences for players to better match to their desired game?
‍
2. HMW make it clear to users which genres and platforms the games are available on?
‍
3. HMW make this experience interactive, informational, and non-overwhelming?

Mid-Fidelity Prototypes

We wanted both new and current/returning players to understand the gameplay and genre of the different games that Blizzard offers. The experience features an improved carousel for game teams to advertise upcoming events and features at the top of the page.

In the wireframes, we explored ways to showcase our games in an interactive way through gameplay videos that display when users hover over each game card. Lastly, we wanted to include a "promotional card" section at the end of the page for additional content to live so that users can see this upfront content rather than have to scroll through the last few slides in the beginning carousel.

User Testing

We conducted a usability study focused on understanding potential usability issues with the redesign of Blizzard.com. The study tasks were centered around current Blizzard.com homepage & navigation. Key takeaways included:
‍
1. Many users had a hard time reading the platform icons.
‍
2. The improved game cards provided the necessary information that new players needed.
‍
3. Participants appreciated the gameplay previews on hover.
‍
4. Navigating back to the homepage was extremely easy for everyone using the Blizzard logo.

Materialize

Developing the visual identity through a comprehensive style guide, components, and documentation.

Design System

As the creator of Warcraft, Diablo, Starcraft, and Overwatch, Blizzard Entertainment has a diverse set of games under their wing and they are responsible for some of the most epic game experiences in the industry. Blizzard has games for everyone whether they are new players or current/returning players.

For the redesign, we wanted to reflect the epic and inclusive identity that Blizzard holds through revamped web-friendly colors, styles, and elements.

Visuals and Interactions

We collaborated closely with the Video team to produce gameplay snippets for all games that highlighted various aspects of each game from a first person perspective when possible. We also collaborated with Creative Services to create asset and content guidelines for the carousel and promotional card section so that any text entered on top of assets would pass accessibility standards.

Other than the game card hover state, I also documented other interactions for engineering to use as reference when implementing.

Test and Implement

Before launch, we were also able to do another round of user testing and organize the insights into polish items that we could address before launch as well as post-launch polish items.

I worked with engineers to support development to make sure the environment matched the mockups as well as talk through the incorporation of various interactions throughout the site. Something that worked well to make sure polish items were addressed was creating a shared organized list.

Next Steps

After launching the site, we hope to continue iterating on the Blizzard.com ecosystem. After launch, we also conducted another usability study to test the current experience and got feedback on opportunity areas to facilitate the next iteration of the Homepage.