Role
Michelle Chen (Design Owner)
Zac Pfaff (Design)
Laura Tran (PM)
Adam Harris (Engineer)
Arthur Jones (Engineer)
Megan Chang (Engineer)
Roz de la Cruz-Ramos (Engineer)
Timothy Biley (QA)
Cat Smedley (Copy)
Explore
Timeline
June - October 2022
Overview
To celebrate the launch of Overwatch 2. we were tasked to work on a visual overhaul of the site and targeted redesigns to some of our core content. We wanted to make sure users feel welcomed from the very beginning of entering the site and have the information they need to decide to play. Through user research and testing, we were able to better understand what features and content new, current, and lapsed players want to see to learn more about Overwatch 2.
Discover
Understanding Overwatch 2 and what information new and current players may want to know about the game launch.
Problem Statement
1. Service players by providing the necessary information they need to learn about Overwatch 2's main game features.
2. Create a sustainable and maintainable experience powered by shared components that are utilized on other game sites.
.jpg)
Research Methods
1. Competitive Analysis
2. Google Analytics
3. Past Research and Current Experience Audit
4. Public Perception on Social Media
5. Survey and Live Workshop
Competitive Analysis
We conducted a competitive analysis to review other similar web experiences. Competitor franchise sites have many interlinking pages for players to explore all the different aspects of the games such as maps, characters, game modes, etc. Many of the competitor sites had fun and engaging experiences that provided players different ways to explore the "universe".
.jpg)
Data and Public Perception
1. The top clicked pages are the homepage, heroes, and news.
2. Many players are unsure if Overwatch 2 is free to play or not.
3. Many players are excited to learn more about different game modes.
Survey and Workshop Themes
1. Many participants are looking forward to learning more about heroes, game modes, roles, and maps.
2. Participants noted wanting to learn more about the story after Overwatch 1.
Define
Identifying the right features for both new, current, and lapsed players.
User Flows
Overwatch.com is the main landing page to the game and is one of the best platforms to drive traffic for game download conversion and shop purchases. Users go to the Overwatch game page from a variety of different sources such as social media, Blizzard.com, or direct traffic.
.jpg)
Content Priority and Features
With the research insights, our team brainstormed which features and content priority would best help users understand all the different aspects of Overwatch 2. We narrowed down the scope to redesigning the homepage, hero pages, and re-theming legacy pages such as News, Patch Notes, and Media based on the timeline set for the worldwide launch.
Explore
Designing a fun and maintainable solution for the Overwatch 2 launch.
Structure
We mapped out a site structure that provided users an engaging and fun experience for them to discover information about Overwatch 2 such as more about heroes, maps, upcoming seasons, and more. Mapping out the site also helped us visualize ways for users to easily navigate to and from various pages. We also wanted to make sure that users had a cohesive experience with the new Blizzard navigation that would be implemented on the Overwatch game site.
.jpg)
Prototypes and User Testing
With each page, we came up with a variety of layouts with different ordering of sections. With early feedback from stakeholders, we were able to narrow down to a couple of options to test.
We wanted users to feel immersed in the revamped Overwatch world so the page features different interactions to simulate this such as a Heroes section where users can scroll through a carousel to learn more about hero roles which is similar to the hero selection screen in game. Users can also explore all the heroes on the revamped index page and click into each hero to learn more each heroes' details.
We went through two rounds of testing which helped us iterate on the wireframes and narrow in on the general direction of styling and content prioritization we wanted to go with based on the user and stakeholder feedback. Below you can see the differences between the first set of prototypes versus the second set.
.jpg)
Materialize
Developing a visual identity fit for Overwatch 2 on the web.
Style Guide and Components
The visual language of Overwatch 2 uses contrasted and bold colors as well as simple UI. We selected web-friendly and accessible styles for colors, buttons, and icons based on the Overwatch game team’s style guide as inspiration.
Visuals
We worked with the various teams to produce visually powerful assets for the site launch. We wanted the website to showcase the beautiful world that Overwatch 2 offers through its special heroes, maps, and gameplay. By incorporating screenshots and videos of these different game elements throughout the site, players can visualize how the in-game environment looks. I collaborated closely with our engineers to support development such as walking through how we might include animated videos and parallex throughout the pages.
I also created multiple pages of content guidelines for stakeholders that would like to create or input assets and copy in different sections of the homepage and hero pages so that future content would match the Overwatch style guide and web accessibility standards.
.jpg)
.jpg)
Deliver
Our Overwatch 2 web launch resulted in an increase in purchase conversion and millions of users visiting the page for launch. With this site redesign, we were also able to create a sustainable template that encourages self-service content management for future iterations of the site.
Takeaways
The whole team all met in the office on the day of launch to ensure that we had a smooth release with no downtime for users. It was an amazing experience to be a part of such a big game launch as Overwatch is one of Blizzard's biggest IPs.
As the design owner, I was also able to take on the process of creating an end-to-end experience for a whole site with multiple pages and strengthen my ability of documenting my design process as well as collaborating with different disciplines.
You can check out the live site here!
Next Steps
As new content and heroes are added to the game, we are constantly evolving the site to better display important information to new and current players. We would like to continue user studies on the live experience so that we can prioritize medium and long term feature updates that can improve the user experience of the overall Overwatch site.