.jpg)
Role
Michelle Chen (Design Owner)
Laura Tran (PM)
Adam Harris (Engineer)
Megan Chang (Engineer)
Timothy Biley (QA)
Explore
Timeline
March - September 2022
Overview
Before the launch of Overwatch, our Web team was tasked with creating an announcement site for users to learn more about the PVP relaunch and to sign up for beta tests.
.jpg)
Discover
Understanding how the Overwatch website can balance the three sites (playoverwatch.com, overwatch2.com, and overwatch.com).
Problem Statement
How might we explain the PVP (player versus player) relaunch and how it differs from the live Overwatch 1 game?
.jpg)
.jpg)
Research Methods
1. Current Experience Audit
2. Interviews with Stakeholders
Current Experience Audit
Taking a look at the current Overwatch site, we were able to evaluate what entry points on the site might be feasible to put in information related to the Overwatch Beta and information about the upcoming relaunch.
Interviews with Stakeholders
We had multiple meetings with stakeholders such as Marketing, Publishing, and Creative Services to better understand what type of content, features, and style we would be able utilize for this beta page. Based on the interviews, we were able to narrow down the main goals for this page:
1. Drive excitement for the PVP announcement and get users to sign up for a chance at Beta access.
2. Establish the base for the new OW web experience.
3. Inform users about the PVP relaunch and how it differs from the live game and Overwatch 2.
Define
Identifying the right amount of content to keep players excited about the upcoming betas and relaunch announcement.
Users
Based on the interview stakeholders, we narrowed down our target audience to three general groups: core and lapsed players, content creators, and press outlets.
Content and Features
Based on initial scope of content that we were tasked to visualize on our pages, we were able to group content into must-have and nice-to-have categories.
Must-have features included: beta sign-up functionality, an FAQ link or information, and a purchase CTA for Overwatch 1.
Explore
Designing a flexible and reusable template for beta updates.
Layout Explorations
Utilizing the defined information, I was able to quickly visualize options with different combinations of sections based on the content and features needed.
Mid-Fidelity Layouts
After rounds of internal feedback from members on my team from each disciplines based on technical feasibility and alignment with business goals, we were able to move into the mid-fidelity exploration phase. With mid-fidelity explorations, we were then able to get further feedback from stakeholders to narrow down on the final direction of the beta page template.
Materialize
Creating a reusable template that can be updated for each upcoming beta.
Visuals and UI
Since there were three closed betas and one open beta, it was important that the layout was flexible and sections could be reused in different way to support content updates.
In terms of the visuals, we wanted to experiment with using a mix of OW1 and OW2 styling with an emphasis on OW2 styles such as colors, fonts, and imagery. This was especially challenging as the game team was also still working in parallel to continue refining the OW2 in-game style.
Final Template
Through continuous feedback and discussions with Creative Services, we were also able create content guidelines that would facilitate the hand-off of content management from our team to their team for future seasons.
Deliver
The March beta page had significant traffic and millions of opt-ins. This project was also a quick turnaround since we had to work under tight time constraints until days before launch.
Additionally, the Beta page was the first Overwatch page to start using shared components as well OW2 brand and styling.
Takeaways
This was my first project using our shared design system to generate layouts and ideas. It was a great learning process with many challenges but through the help of my teammates, I was able to pick it up fast. The hardest parts about learning how to use a design system was learning how to properly use tokens and documentation.
After the March beta page, I also helped support 3 more beta updates (April, May, June).
You can check out the announcement site for OW2 here!
