Gears Tactics logo

Gears Tactics web design

Launched 2020

Gears Tactics is the fast-paced, turn-based strategy game set 12 years before the first Gears of War. The video game is available on Xbox Game Pass for PC, Windows 10, and Steam. I set the tone on the web. Out of the gate topspin and perception are everything. I create momentum and confidence with fans and developers. This will earn us currency to grow.

Visit Gearstactics.com

My role

Product Designer 2 at Microsoft

As the designer for Gears Tactics web, I ensured a seamless user experience by translating the game's features to web for both desktop and mobile. I collaborated with the web product owner, web producer, and lead developer to plan and scope each milestone.

My responsibilities include presenting my designs and explaining my thought process to the Web Team and Xbox Games Marketing key stakeholders, and iterating based on feedback. I delivered intuitive user flow between product websites and high-fidelity prototypes on all screen sizes. I worked closely with developers to establish a design system of web colors, typography, user interface components, iconography, and user interaction.

Gears Tactics Skills Game Guide

Design process

  • User research

    Microsoft power BI reports, Treejack testing, Chalkmark testing, and survey reports.

  • Player flow and wireframes

    Review initial concepts, user flow, wireframes, and prototypes and iterate on concepts.

  • Prototypes

    Images and user interface assets locked.

  • Final copy

    Meetings with Xbox Marketing and Community teams.

  • Stakeholder sign off

    Senior Marketing Director and Director of Communications.

  • Launch

    Launch and key releases:

    • 2019 - Coming soon page
    • 2020 - Clone starter website
    • September - News page
    • September - Explore page
      • Live on Xbox consoles (Series XS and Xbox One)
      • Live on Game Pass, Windows 10 and Steam
      • Add Jack new character in Explore, Game Guide, and Skill Planner
    • May - Game Guide page
    • May - Skill Planner page
    • June - Media page

Player flow

User flow

Game Guide acquisition

51% of players will be enticed to go to a website if it has information that can provide information on how they can become better at the game or how to use the mechanics. The video game was missing a strategy guide and I took this opportunity to design it on the website for acquisition. The game added a Help [5] shortcut key that redirects the player to the game guide web page.

Gears Tactics game guide on mobile

Game guide specification

Gears Tactics Game Guide

Skill planner retention

The Skill Planner helps players to plan their next move with the level and points they have available to spend on the skills. Players can share their Skill Planner on their social media platforms by copying the link.

The game has five classes and each features a skill tree of 35 different skill nodes to choose from. The skill tree is sorted into two categories; actives and passives. The active skills are the hexagon shapes in the skill tree and the passive skills are the squares.

Each class starts with a single skill in the center of the skill tree, which is free. Each skill grants 2 skill points and the maximum level is 10. On missions in the game, your soldier will each have Action Points to spend per turn on shooting, moving, reloading, and using Active Skills. Active skills usually cost 1 Action Point (AP) and have an impact on the battlefield, after which they go on cool down for a set number of turns before they can be used again.

If the user has maxed out the skill points and continues to click on the skill nodes, a snack bar will show at the top of the page and inform you that “you have maxed out the Skill Points!”.

Skill Planner
Skill Planner on mobile

Skill planner specification

Skill tree guideline

Home page

I determined call-to-action priority and created content discoverability. Attract and appeal visitors towards our funnel, keeping them staying longer and deeper to other pages. Players can pre-order on Steam, Xbox Game Pass for PC, and Windows 10. SKU plan contents include digital license, smart delivery, and Cole Train unlimited time offer.

Explore page

The Explore page showcases an immersive story, challenging missions, aggressive gameplay, and massive boss battles of Gears Tactics. It features iconic characters such as Gabe Diaz, Sid Redburn, Mikayla Dorn, and Ukkon. The page is designed to give potential players a taste of the intense gameplay and rich story of the game, encouraging them to explore further and ultimately make a purchase. It includes high-quality visuals and clear calls-to-action to guide users towards learning more about the game and its features.

World Characters
World Story

News articles & opt-in banner

For the news articles, I designed a layout that prominently displayed the latest news with eye-catching headlines, featured images, and brief summaries. To encourage users to opt-in to receive updates and news about Gears Tactics, I created a banner. The banner included a concise message about the benefits of opt-in. The design was visually appealing and noticeable without being intrusive.

News article

Push notification specs

I ensure that push notifications are targeted, relevant, and valuable to the user in order to avoid being perceived as spammy or intrusive.

Push notifications

Credits

The Coalition web team

Product Designer Tina Kao
Sr. Producer Carolina Smith
Web Producer Jim White
Associate Producer Ryan Serbet
Lead Software Engineer Karl Romanowski
Software Engineer Sarah Nicholson
Software Engineer Karl Castillo
Software Engineer Fernando De Bem
Content Publisher Marko Djordjevic
QA Lead Mashal Pannu
QA Lead Stephen Golding
QA Tester Lincy Charles
QA Tester Artem Chaykin

Stakeholders

Publishing Design Director - Gears Tactics Tyler Bielman
Art Director - Gears Tactics Greg Juby
Sr. Product Marketing Manager James Yin
Director of Communications Dana Sissons

Next case study