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
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 user 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.
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
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.
Merchandise
The merchandise page is 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 are 1:1 aspect ratio in PNG.
Home and Games
News Feed
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
| 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
Design system
View case study
