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.

Visit Gearsofwar.com

My role

Product Designer 2

Microsoft logo

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.

  • Userflow, wireframes, and prototypes

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

  • Stakeholder review meetings

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

  • Sign off

    Images, copy, and user interface assets locked.

  • Franchise launch

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

    Gears.gg 2019

    • Clone starter site
    • MVP features

Franchise site userflow

The Coalition Army program

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.

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 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.
  • 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 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 medial accounts.

  • Use asterisk for required text fields.
  • Dense text fields enables 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

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

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

Sr. Product Marketing Manager James Yin
Licensing Director Jerry Chu
Consumer Product Development Manager Laura Ripley
Director of Communications Dana Sissons
Senior 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