Gears 5 logo

Web design vision and strategy

The Gears of War franchise is an award-winning and billion-dollar AAA title video game that has redefined the third-person shooter genre. was launched in 2019 and used by more than 8 million players in the first year of release. The Gears of War franchise has over US $1.2 billion in gross revenue with more than 50 million unique players. Gears 5 is the sixth installment of the Gears of War series and is published and owned by Xbox Game Studios for Microsoft Windows, Xbox Series X and Series S, and Xbox One.

My role at Microsoft

Product designer 2 in The Coalition team

As the first designer for the Gears franchise and product websites, I collaborated closely with the product owner, web producer, and lead developer to ensure the success of each milestone. Working alongside three developers and three QA testers, I spearheaded the development of a reusable, scalable, and shareable web design system for The Coalition.

Using wireframes and high-fidelity interactive prototypes, I created and rapidly iterated on design ideas to effectively communicate design strategies and detailed interaction behaviors. Additionally, I delivered comprehensive sitemaps, information architecture, and user flow for seamless website navigation on all screen sizes.

Design overview

Establish end-to-end UX for five Gears websites

Based on the acquisition, engagement, retention, attract and monetize goals, I saw how there can be a split between a franchise site for legacy games and a product site for each new video game.

There was a need to establish a design system that meets Microsoft content accessibility standards. The design system increases the design efficiency as the websites evolve and create websites from scratch faster for brand new games at The Coalition Studio.

Starter - splitting sites

Design vision

  1. Intuitive navigation flow between five websites.
  2. Websites are responsive and adaptive on mobile.
  3. Consists Gears brand and consumer experience.
  4. Retain or grow usage traffic.
  5. Create scaleable design system and starter kit.
  6. Meet Microsoft Content Accessibility standards.
  7. Market expansion and increase content discoverability.
  8. Helps maximize play time.
  9. Promote and sell products.
  10. Two-way communication and foster player rapport.
  11. Time-saver for players.

Design challenge

  1. Attract and appeal visitors towards our funnel, keep them stay longer, and deeper to other pages.
  2. Determine call-to-action priority, ensure good content, and provide character count requirements and guidelines for Xbox Game Marketing, Community, and Gears Esports teams.
  3. Create user flow between five websites:
  4. Create a design system with starter kit, developer UI, and visual assets.
  5. Built on new architecture:
    1. WordPress for content management system.
    2. GraphQL for game stats, rewards, and login.
    3. Gatsby for our frontend development framework.

Design process

  • Initial process

    Define UX goals and metrics for features that will meet user needs and determine success.

  • Needs surveys

    Understand product direction based on user needs and problems. Create a user needs report asking about players attitudes towards gaming websites, what they use them for, and what would entice them to return regularly.

  • Treejack testing

    Deep dive pie tree visualization of highlight and lowlight tasks. Study participants were Gears and shooters video game players.

  • Chalkmark testing

    First-click heat map testing. Content click rates, highlights, lowlights and additional findings with participants with less, some and more experience with the game.

  • Experience ecosystem map

    1. Social engagements (social networking apps).
    2. Stakeholder wants and new ideas.
    3. User needs survey reports.
    4. Other gaming websites that users visit regularly.
  • Gamer journey stages

    1. Touch-points and activities (user actions and decisions taken).
    2. Channels (word of mouth, web search, reviews, blogs, and social media).
    3. Key thinking quotes (needs, wants, pain points, and motivations).
    4. Sentiment chart (feel positive, neutral, or negative around each touch-point).
    5. Opportunity ideas.
  • 7 player personas

    Targeting our most invested players.

  • User insights

    Microsoft Azure user insights and Power BI reporting.

  • Concept evaluations

    Wireframe and sitemap. View ideas and not to have a fully functional prototype.

  • Pitch design vision

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

  • Web branding

    Define and develop web brand and personality (look, feel and voice). Begin content iteration across wireframes and prototypes.

  • Prototyping and review meetings

    Design prototypes for overall interaction, visual, content and then prioritize. I also ensure good content while limiting character count.

  • Stakeholder sign-off

    1. Xbox Marketing Team: I align with product marketing brand, franchise SKU, and Gears 5 Operation features.
    2. Gears 5 Game Design Team: I walkthrough web in-game prototypes to gather feedback from UX and UI game designers.
    3. Community Team: I pitch designs to the Director of Communications. Features include The Coalition Army, News, developer stream, video on demand, and videos across five Gears websites.
    4. Esports Team: I walkthrough Esports web design.
    5. Licensing Team: I walkthrough merchandise web features at
  • Design system

    Guide user experience components of product features and accessibility specs.

  • Asset production

    Guidelines, color, typography, iconography, and more.

  • Launch features

    1. First launch in 2019 with coming soon features; copy, trailer, and media.
    2. Soft launch with pre Electronic Entertainment Expo (E3) content, explore the game, pre-order, and media.
    3. E3 announcement with pre-oder Standard and Ultimate Edition that aligns with the video game release date (September 2019).
    4. Navigation user flow sign off.
  • Community features

    Watch developers Live and news push notifications.

  • Xbox Marketing features

    1. Quarterly updates: Operation 2, 3, 4, and 5.
    2. Hivebusters downloadable content (DLC) pre-order
    3. Hivebusters DLC Live
    4. Xbox Series X launch and New Game Plus (NG+) Live with unlockable video game mode.
  • Live in-game features

    1. Stat cards (game modes and playlists)
    2. Seasonal Tour of Duty rewards progression and objectives
    3. Seasonal Rank System (Bronze to Master)

Player journey

The strategic goals for are centered around increasing exposure, game engagement, and revenue by promoting Operations and in-game features. To accomplish this, the site needs to align with Gears 5 game messaging and support the needs of potential players, new players, and invested players alike.

To better understand the player's journey, I created a detailed player journey map that highlights each touchpoint between the website and the customer. This map includes key journey stages such as the user's past experience, awareness, exploration (homepage and get the game), and engagement (community and in-game). The image below provides a high-level overview of the player journey, which helped me tailor the new website to meet the needs of each player group.

User insights

User segment chart

PC and Xbox players

To better understand our target audience, I conducted an investigation into the number of sign-in Xbox user IDs that visited each page group. I was able to identify the most invested Gears players, who make up the largest population size and generate the most revenue share for the game. These players are often heavily invested in the game and have a large network of Gears friends. Specifically, I identified the following types of players:

  1. Potential players - a key growth opportunity for the game, and it is essential that we provide them with a compelling and engaging user experience that effectively highlights the unique features and benefits of Gears 5.
  2. New players - improve player retention and drive long-term engagement.
  3. Invested players - it is essential that I provide them with engaging user experience that caters to their unique needs and preferences.
  4. Esports players and audiences - provide them with a robust and engaging esports experience that effectively showcases the competitive and strategic aspects of the game.
  5. Content creators - role in driving engagement and expanding the reach of the game. By providing these creators with the tools and resources they need to create compelling content, we can drive engagement, revenue, and customer satisfaction while expanding the game's reach to new audiences.

Azure app user insights

Demographic, social, and traffic

  • Age: 18-34
  • Country: United States, Mexico, and United Kingdom
  • Languages: English and Spanish
  • Social network: Twitter, Facebook, YouTube, Reddit, and Instagram
  • Traffic channels: organic search, direct, referral, and social

Top browsers, mobile OS, and sessions

  • Browsers: Chrome (41.1%), Edge (24.98%), and Safari (22.15%)
  • Mobile OS: Android (51.52%) and iOS (47.2%)
  • Sessions by device: Mobile (54.6%), desktop (42.6%), and tablet (2.8%)

User flows tool

Used to find out how users navigate away from a page and what do they click on a page.

Gears of War players
Gears of War players

Power BI reports

Investigate numbers based on The Coalition's telemetry events to find:

  1. What are the top playlists this week, such as Escape social beginner, Horde event predator hunt, Horde social frenzy, and more.
  2. What are the popularity of each game mode, including lifetime campaign players and lifetime multiplayers.
  3. What are the number of page views, average views per user, most viewed pages, unique user geolocation, and more.

UX research

To ensure that our website design met the needs and preferences of our users, I partnered with a Xbox User Researcher to develop and evaluate user needs and usability studies. This involved conducting extensive research to better understand our target audience, including their preferences, habits, and pain points, as well as their expectations and requirements for our website.

User needs survey

1,040 respondents

Two surveys were sent out to Gears of War 4 players asking about their attitudes towards gaming websites, what they use them for, and what would entice them to return regularly. Questions to find included:

  1. What are the top reasons players go to a game site?
  2. How do participants find information about the latest changes or updates to the game?
  3. What are the top features that would entice players to use a game website on a regular basis?

Chalkmark A/B test

45 player participants rate from 1 to 5

Participants rated their appreciation of each design and selected their favorite (light versus dark). Participants ratings for each design were similar regardless of their experience with Gears of War and whether they had seen the Gears 5 Announcement trailer or not. Rating goes from strongly dislike it, neither like nor dislike it, to strongly like it.

Chalkmark first-click test

45 player participants with a wide range of familiarity with Gears of War

The intent is to increase customer conversion and task-oriented success rates before our Software Engineers implement them. Participants see a mockup and click on the area where they expect to be able to complete the task. Questions to find included:

  1. Do participants manage to watch the trailer and learn more about Gears 5?
  2. Do participants understand how to purchase the game? Merchandise? Game Pass?
  3. Do participants find out how to sign up for news updates?

How would you buy a collector's edition?

Chalkmark first-click rate heatmap test.

Treejack task test

37 Coalition employee participants

I assessed task highlight and lowlight results for the navigation and information architecture. Questions to find included:

  1. Do participants understand the navigation and labels?
  2. Do participants run into any issues when looking for specific information?
  3. Do participants find the content they expect where they expect it?
Treejack user testing

High-level Gears 5 player flow

Stock-keeping unit launches

Following Xbox Game Studios' prioritization of Gears 5 among Xbox Game Pass subscribers and Xbox Series X|S owners, I designed a streamlined and simplified approach to showcase the release stock-keeping unit (SKU) on our sites.

To achieve this, I created a set of 'Get The Game' components for web that provide a clear and concise breakdown of the different purchasing options available to players. These components are designed to be easily accessible and user-friendly, enabling players to quickly and easily navigate through the purchasing process.

Join Xbox Game Pass Ultimate

Access to 100+ games

Join Xbox Game Pass Ultimate banner

Buy Gears 5 Standard Edition

Released on Sept 6, 2019

Standard Edition banner

Buy Game of the Year Edition

Released on Dec 15, 2020

Game of the Year Edition banner

Buy Hivebusters Downloadable Content (DLC)

Released on Dec 15, 2020

Hivebusters banner

Gears 5 home page

The primary goal of the home page design is to attract and engage visitors, encouraging them to explore the website and ultimately convert into customers. To achieve this, I focused on creating a visually appealing design that effectively highlights key content and encourages visitors to explore further.

One of the main challenges in designing the home page was determining the call-to-action priority and improving content discoverability. To address this, I utilized a user-centered approach, conducting extensive research to better understand our target audience and their needs. Based on this research, I strategically placed call-to-action buttons and relevant content throughout the page, prioritizing the most important information while ensuring that all content was easily discoverable.

Gears 5 homepage for Game of The Year on desktop
Gears 5 homepage for Game of The Year on mobile

Explore and get the game

The Explore page is a key component of our website design, designed to fascinate and spark the interest of potential players, ultimately driving subscriptions to Xbox Game Pass as a growth driver. To achieve this, I focused on creating a visually captivating design that effectively showcases the unique features and benefits of the game. Our users are price conscious, but price isn't an obstacle if the game is good enough.

Explore Gears 5 for Game of The Year
Explore Hivebusters DLC on mobile
Explore Hivebusters DLC on desktop
Explore Hivebusters DLC Live

Operation quarterly updates

The Operations are a critical component of Gears 5, providing players with large quarterly updates that offer a wealth of new content, including Tour of Duty rewards, ranking system rewards, new heroes and villains, new modes, and new maps. To ensure the success of these updates, I focused on creating in-game web features that would increase exposure, game engagement, and revenue.

To achieve this, I utilized a high-quality visual design, developing interfaces and interactions that were optimized for multi-screen sizes. I was able to create a visually captivating and engaging experience that effectively drove player engagement and revenue.

Operation 5

To further enhance the user experience and drive engagement, I created highly visible call-to-action buttons that directed visitors to live stats and rewards progression web in-game features. These buttons were strategically placed throughout the website to encourage visitors to engage with the game and to incentivize them to continue playing.

To ensure that the website remained up-to-date and relevant, I leveraged Gears 5 live CMS to pull specific in-game features onto the web. This enabled us to provide visitors with real-time updates and information, ensuring that the website remained current and engaging.

Operation wireframe on desktop
Operation wireframe on mobile
Operation 5 on desktop
Operation 5 on mobile

Operation 4, 3 and 2

To facilitate the design and development process, I created a comprehensive design system library, which included a range of components and page templates that could be reused and customized as needed. This not only ensured consistency and efficiency but also enabled us to deliver high-quality designs and features more quickly and effectively. By leveraging this library and working closely with the development team, I was able to create a dynamic and engaging website that drove user engagement and revenue for the game.

Operation 4 on desktop
Operation 4 on mobile
Operation 3 on desktop
Operation 3 on mobile
Operation 2 on desktop
Operation 2 on mobile


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
Sr. Xbox Brand Manager Nicole Fawcette
Director of Communications Dana Sissons
Sr. Community Manager Liam Ashley

Business intelligence

User Researcher Cornelia Laros
BI Manager Vanessa Hung

Next case study