f Tina Kao | Gears Franchise and Esports Websites

Gears of War franchise website

Gears of War is an award-winning and billion-dollar AAA title video game franchise that has redefined the third-person shooter genre. Gears of War is a video game franchise developed by The Coalition, and owned and published by Xbox Game Studios.

Visit Gearsofwar.com

My role

First UX/UI Designer to work on the Gears franchise and product websites. I translate game features to the web on desktop and mobile – including both the user flows and the user interface. I partner with the Product Owner, Web Producer, Lead Developer and contribute to the scoping and planning of each milestone. More about me.

Design process

  • Discovery and Research

    Treejack testing, Chalkmark testing, and survey reports.

  • Userflow, wireframes, and prototypes

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

  • Stakeholder sign off

    Xbox Game Marketing Manager, Licsensing Director, Esports Managers, and Director of Communications.

  • Copy, image, and UI sign off

    Images and user interface assets locked.

  • Main launches

    Gearsofwar.com 2019-2020

    • Clone starter site
    • Coming soon 4/9/2020
    • Live soft launch 4/26/2020
    • Homepage MVP content driven
    • Games
    • News feed
    • Merchandise
    • The Coalition Army
    • Games

    Gears.gg Esports 2019

    • Clone starter site
    • MVP features

Franchise Website

The Coalition Army

Enhance Gears content creator's journey in starting out or craft as a veteran. Members will receive exclusive resources and opportunities directly from The Coalition to support their growth as a creator. Members can have the opportunity to become Partners - a select group of top Gears creators that will get access to more benefits and opportunities.

How the program works

  • Users submit the enlistment form for the regular member. They will have to check their email where they’ll receive a validation URL and all enlistment will get regular Microsoft OneDrive Access to professional-grade resources.
  • If users apply for Partner, their eligibility will be pending and the Admin will do a manual validation for the Partnership.
  • If the user is denied, they will receive a Partner denied message in their email.
  • If the user is approved, they will receive an email to access Partner assets in OneDrive.
  • The Community team scrub members or partners every 30 days. They will also upload content to our OneDrive folders.

Web features

  • Program perks - I created vector SVG illustrations to represent each benefits. Member perks include unlocking access to pre-orders and discounts on Gears merchandise and exclusive in-game content. Partner perks include in-game drop content and merchandise for their audiences and receiving exclusive swag.
  • Meet the Partners
  • Membership requirements - to become a Partner, the requirement guidelines include making regular uploads and have certain daily average views on YouTube or Stream certain hours and views per month on Twitch.
  • How to start - how they can start is to register for the program. Then they’ll access resources on OneDrive for them to get creating. The users will have to sign in to Xbox Live account where they can fill in the application form.
  • FAQ - if a regular member wants to level up to Partner, they can read the FAQ in the landing page to learn more.
  • Enlist form
The Coalition Army user flow
The Coalition Army not enlisted
The Coalition Army Partners

Merchandise

The merchandise page are for consumers to shop on gearsofwar.com that redirects them to purchase from more than 20 online stores, including Microsoft Store, Xbox Gear Shop, Razor, Amazon, GameStop, Insert Coin, and more. The page is designed for conversion goals and is the key part of the sales funnel to close the deal with a purchase.

I analyzed all of the types of items in the merch inventory and categorized the tabs in to toys and collectibles, apparel and accessories, publishing, and peripherals. Under each tab has pills UI for each item type. The search textfield searches tags that are item name and item type (pills). Items may include labels, including sold out, pre-order, sale, and limited items. I created rules, such as all book type covers should face the front for consistency. All item image is 1:1 aspect ratio in PNG.

Merchandise toys
Merchandise peripherals

Home and Games

Merchandise Gears Armory
Games

News feed and posts

News feed

Credits

Web Team

UX/UI 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

Sr. Product Marketing Manager James Yin
Licensing Director Jerry Chu
Esports Operation Manager Evan Pensak
Esports Program Manager Rose Gunson
Director of Communications Dana Sissons

Business Intelligence

User Researcher Cornelia Laros
BI Manager Vanessa Hung

Next case study