Gears of War logo

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.

My role

Product Designer 2 at Microsoft

First 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.

  • User flow, wireframes, and prototypes

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

  • Stakeholder reviews

    Xbox game marketing manager, licsensing director, Esports managers, and director of communications.

  • Sign off

    Images, copy, and user interface assets locked.

  • Franchise launch 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
  • Esports launch 2019

    • Clone starter site
    • MVP features

Franchise user flow

Franchise player flow

The Coalition Army program

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.

Content Creators enlist flow

  • 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.
The Coalition Army user flow

Partners overview

  • Program perks - I created vector illustrations to represent each benefit. 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.
  • Membership requirements - to become a Partner, the requirement guidelines include making regular uploads and having certain daily average views on YouTube or streaming certain hours and views per month on Twitch.
  • How to start - Register for the program. Then they’ll access resources on OneDrive for them to get started creating. Users will have to sign into a 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 on the landing page to learn more.
  • Enlist form
The Coalition Army not enlisted
The Coalition Army not enlisted on mobile

Meet our Partners

Each partner has entered the program by consistently creating high quality Gears of War content, maintaining a constructive example-setting attitude, and building a loyal audience.

  • Order partners by live.
  • Use TCA acronym stripes logo for default profile image.

Enlist form

Content creators are asked to register for the program and verify their video and social media accounts.

  • Use asterisk for required text fields.
  • Dense text fields enable users to quickly scan.
  • Display error messages for video channels and social media channels.
  • Once enlisted, the content creator gets access to resources to start creating Gears content.
Meet our partners
Enlist form


The merchandise page is for consumers to shop on 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 are 1:1 aspect ratio in PNG.

Merchandise toys
Merchandise peripherals

Home and Games

Merchandise Gears Armory

News Feed

News feed


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


Sr. Product Marketing Manager James Yin
Licensing Director Jerry Chu
Consumer Product Development Manager Laura Ripley
Director of Communications Dana Sissons
Sr. Community Manager Liam Ashley
Esports Operation Manager Evan Pensak
Esports Program Manager Rose Gunson

Business intelligence

User Researcher Cornelia Laros
BI Manager Vanessa Hung

Next case study