BLIZZARD / OVERWATCH
Overwatch 2 BlizzCon Announcement
Overwatch 2 builds on an award-winning foundation of epic competitive play, and challenges the world’s heroes to team up, power up, and take on an overwhelming outbreak of threats around the globe.
CLIENT
Blizzard Entertainment
PRODUCT
Marketing Website
ROLE
UI/UX Designer
TIME
Jun 2019 - Nov 2019
OVERVIEW
Building an Epic Announcement
Overwatch is a colorful team-based shooter game starring a diverse cast of powerful heroes. With the announcement of its sequel, Overwatch 2, my team and I took on the challenge of creating an immersive web experience to help excite and inform players of all things new with the highly anticipated Blizzard title. For the reveal at BlizzCon 2019, we had a big task at hand to make this announcement celebratory and impactful.
Goals
Create an announcement website that informs and excites players about the new game
Highlight the rich and diverse storyline of the Overwatch universe
Drive signups for user pre-registration and future updates about the game
Reveal the new game announcement at BlizzCon 2019 and build player hype
Challenges
Provide players with an early sneak peek of a game in active development
Appeal to new players without alienating existing Overwatch players
Coordinate with multiple teams across Blizzard involved in the announcement
My Role
Main UI/UX and Visual Designer
Created wireframes, interactive prototypes, visuals, and conducted brainstorming and research sessions
Collaborated with a team of two other designers, two product managers, and four software engineers
Worked closely with engineers and paired during development
DISCOVER
Understanding Overwatch 2
Problem Statement
Overwatch 2 and its announcement should appeal to players who are interested in story-driven narratives and co-op gameplay.
At the same time, it should not alienate the current Overwatch player base and should still keep players engaged by answering their needs for PVP and competitive features.
Questions
We had many questions right off the bat…
What is the relationship between Overwatch and Overwatch 2?
Who are our main target segments and what motivates those users to play the game?
What type of content and features do users want to see?
Competitors
Analysis Workshop
We conducted a competitive analysis workshop with the team to review other similar web experiences, prefaced with some questions.
How do these websites appeal to the different audiences?
How do our competitors acquire new users and engage current users?
How do franchises like Marvel and Star Wars build universes on the web?
Is there anything unclear or confusing about the websites?
Key Takeaways
Franchise sites like Marvel and Star Wards are designed to weather an ever-changing avalanche of brand new content. Instead of selling a specific product or suite, these sites are designed to sell an entire universe. They provide a variety of endless discoveries which creates a sense of an all-connecting world.
We learned that Overwatch 2 should strive to provide engaging ways for users to interact with the content, not just showing it. Our experience should use a combination of motion graphics, static images, and transitions to tell a story.
DEFINE
Identifying Users & Features
Audience Segments
We worked closely with our internal research team to define and prioritize the market segments for the Overwatch audience. Our goal was to depict the “who” of our audience, describe the similarities of customers within a market segment, and highlight the differences.
We gained a clear understanding of the website user demographic and behaviors. This helped us focus on each group’s needs, motivations, and pain-points, as well as capture how they think, feel, and act in particular situations or scenarios.
Key Features & User Goals
We identified the key selling features for Overwatch 2 and had to figure out how to tactfully package it all into the announcement website. With the audience segments in mind, our goal was to create impact and value for the different users visiting the site as they searched for the new content that interested them.
Co-op Missions
Show users the new mode for co-op missions and highlight the PVE gameplay and new enemy ecologies
Story Campaign
Show users the expanding universe of Overwatch and highlight new modes that integrate story-driven gameplay
PvP
Show users the new mode for competitive gameplay and highlight the continued support for current competitive features
Lore
Show users the new cinematic trailer and highlight the existing story and video content for expanded world-building
New Heroes & Maps
Show users the new maps releasing in Overwatch 2 and hint at upcoming updates for new heroes to be added to the roster
New 2.0 Skins
Show users the detailed hero skin upgrades and give them a way to compare the original skins versus the new skins
Content Priority
How might we best prioritize all of the key features in Overwatch 2? How can our research of the different audience segments help inform these priorities? Due to the confidentially of this announcement, it was difficult to recruit external participants to help us answer these questions.
Luckily, we were able to survey our internal team and categorize each member into the segments that matched the segments of the current player base. Using the Kano model, we had our internal participants rate the desirability of each feature, resulting in a list of top features to lead with and to build for the announcement.
EXPLORE
Designing a Solution
User Flows
With our goals, users, and features defined, we were ready to create user flows. We needed to determine where users will go and what they will see at a high-level during announcement and throughout the various stages of the game. We created diagrams to help clearly show a player's journey in seeking and consuming Overwatch 2 information.
Flow 1: BlizzCon Attendee
Flow 2: Virtual Ticket Attendee
Flow 3: Non-Attendee
Structure
We mapped out a site structure that provided users a simple yet engaging way for them to discover everything about the new game. It also provided clear paths to go back to the current Overwatch site in order to help new players learn about the available game.
For BlizzCon, we wanted to leave the announcement site as a standalone experience to help dedicate and serve it as an official and informative destination for learning about Overwatch 2.
Prototypes
Setting the Tone
We wanted to immerse users into the new world of Overwatch 2. The experience opens with a short video that introduces the tone, using shots of heroes and action to set the stage before diving into the rest of the content. Users have to option to skip the intro as well.
Storytelling in Design
In the wireframes, we explored a full-page scrolling experience, with parallax and interactive menus. Users can “choose their own adventure” by clicking elements to dive deeper into the sections. It provided a flexibility for all types of content, with simple navigation to return.
MATERIALIZE
Developing the Visual Identity
UI
The visual language of Overwatch 2 utilizes solid, bold colors and minimalist UI. For the announcement site, we wanted to reflect that identity and make sure our design elements were web-friendly and accessible. We created styles for type, colors, buttons, and icons.
Visuals
We worked closely with the Overwatch and Video team to produce beautiful art and assets for the announcement. We wanted to celebrate the big new world of Overwatch 2 by creating visually stunning pages that displayed a mix of in-game screenshots, model renders, and cinematic stills. It was important to set the imagery to match the content for players to learn more about the new game.
I collaborated with our engineers to support development, as well as helped incorporate parallax and animations to bring the site to life.
Overwatch 2 Landing Page
Explore Interactive Menu
Lore Interactive Timeline
Mission Continues Page
New Skins Comparison Slider
Co-op Missions
New Locations
Mobile Responsive Mockups
DELIVER
Launching Success
Results
At BlizzCon 2019, we successfully launched the Overwatch 2 site right when the game was announced to the world. The thousands of attendees and millions of players around the globe were able to experience and learn more about the new game. Some highlights:
Smoothest launch to date, scaled to millions of clicks and views
Increased current game purchase and exceeded sign-up conversions goals
Site was well received by audience, users took screenshots and recordings to share on social media
Proud team members and excited stakeholders!
Webby Awards Honoree
We were thrilled and honored to hear that the Overwatch 2 BlizzCon Announcement Site was recognized in the 23rd Annual Webby Awards as a Webby Honoree in the Websites: Entertainment category, as deemed by the International Academy of Digital Arts and Sciences.
Earning the distinction of Webby Honoree was a significant achievement—granted to only the top 20% of all work entered in the 23rd Annual Webby Awards. That year included a total of 13,000+ entries across 70 different countries. View Listing
Takeaways
Working on the website for Overwatch 2’s announcement was very rewarding. I got to be a part of a big celebration that impacts the enjoyment and excitement of players around the world. Not only that, but I had the honor of working with such an excellent team of talented people at Blizzard who helped bring this all to life.
I learned a lot from working on this project.
Operating as the main UI/UX designer involved in the entire process, from ideation to execution
Building strong relationships with partners and stakeholders
Communicating ideas and design process
Creating visually stunning experiences and interactions
Thanks for reading!
Tools used:
Sketch and InVision
Adobe CC Photoshop, Illustrator, and After Effects
Special thanks to:
My Overwatch web team
Overwatch producers, artists, and developers
Our players and fans
Check out the Overwatch 2 Announcement Site!
More Projects
Heroes Orphea Announcement
Website · UI/UX · Visuals
Overwatch Seasonal Events
Website · UI/UX · Visuals
Heroes Select & Profiles
Website · UI/UX · Visuals