BLIZZARD / OVERWATCH
Overwatch Seasonal Events
Celebrate the changing of the seasons with new modes and collectibles in Overwatch! Win games, earn rewards, and jump into the Arcade to play the special brawls available for each event.
CLIENT
Blizzard Entertainment
PRODUCT
Marketing Pages
ROLE
UI/UX Designer
TIME
Feb 2019 - Aug 2021
OVERVIEW
Celebrating the Seasons
Overwatch is a colorful team-based shooter game starring a diverse cast of powerful heroes. Every season, there are in-game events for players to dive into new game modes, earn rewards, and unlock new collectibles. My team and I needed to provide players with an official place on the web to learn more about the events and new additions.
Goals
Create pages that informs and excites players about the upcoming events
Highlight the new content and features
Drive purchases for event loot boxes
Celebrate the branding that is unique to each seasonal event
Challenges
Excite users to play Overwatch with high-level information about the event
Standardize the event pages using a modular and templated system
Coordinate with multiple teams across Blizzard involved in the launches
My Role
Main UI/UX and Visual Designer
Created wireframes and visual mockups
Collaborated with a team of designers, product managers and engineers
Worked closely with engineers and paired during development
DISCOVER
Understanding the Events
Problem Statement
The Overwatch seasonal events should appeal to players who are interested in the new updates to game modes and collectibles.
The website should be a place where players can learn about the events outside of the game and get a high-level snapshot of everything that’s new in the modes, weekly rewards, and collectibles.
Questions
We had many questions right off the bat…
What are the similarities and differences between the events?
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?
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 events and had to figure out how to tactfully package it all into the event pages. 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.
Event Trailer
Show users the video trailer for the event that highlights the new modes and rewards
Game Modes
Show users the new and updated game modes that are unique to each event
Weekly Challenges
Show users the new weekly challenges for the event and the rewards they can earn
Collectibles
Show users the new skins, intros, and emotes they can unlock through loot boxes
Maps
Show users the new maps and locations that are released with the events
Lore
Show users the new stories and lore that are released with the events
EXPLORE
Designing a Solution
Structure
With our goals and primary users defined, we were ready to create wireframes. We conducted a brainstorming session with the team to identify which key features were essential to the seasonal events, and to explore different template options that would fit our needs.
MATERIALIZE
Developing the Visual Identity
UI
The visual language of Overwatch utilizes solid, bold colors and minimalist UI. For the event pages, we wanted to reflect that identity and make sure our design elements were web-friendly and accessible. We created styles for colors, type, UI, and iconography.
Since the event pages needed to use a standardized layout that was flexible for each event’s various needs, it was important that the UI was reusable across the different events. I created a library in Figma that gave us modular and responsive components to build with.
Visuals
After nailing down our template for the event pages, it made theming and integrating art a breeze. We worked closely with the Overwatch and Video team to produce art and assets for the different events. We wanted to celebrate each of the seasons by theming visually fun pages that displayed a mix of character and background art. It was important to set the imagery to match the content for players to learn more about the events.
Summer Games
Halloween Terror
Winter Wonderland
Lunar New Year
Overwatch Archives
Overwatch Anniversary
DELIVER
Launching Success
Results
Every season, we successfully launched the event pages right when they were announced to the world. Millions of players around the globe were able to experience and learn more about the events.
Smooth launches, scaled to millions of clicks and views
Increased game conversion and loot box purchases
Pages were well received by audience, users took screenshots to share on social media
Proud team members and excited stakeholders!
Takeaways
Working on the Overwatch seasonal events pages was a lot of fun. Because of the cadence, there was always something to look forward to every season… designing AND playing the events!
I learned a lot from working on these pages.
Operating as the main UI/UX designer involved in the entire process, from ideation to execution
Creating a standardized template that continues to be reused
Creating delightful visuals that celebrate each event’s theme
Thanks for reading!
Tools used:
Sketch and InVision
Figma
Adobe CC Photoshop and Illustrator
Special thanks to:
My Overwatch web team
Overwatch producers, artists, and developers
Our players and fans
Check out the event pages on the official Overwatch site!
More Projects
Overwatch 2 Announcement
Website · UI/UX · Visuals
Heroes Orphea Announcement
Website · UI/UX · Visuals
Heroes Select & Profiles
Website · UI/UX · Visuals