Gears5.com design vision and Operation

Gears 5 is the sixth installment of the Gears of War series. The Gears of War franchise is an award-winning and billion-dollar AAA title video game that has redefined the third-person shooter genre.

Gears5.com was launched in 2019 used by more than 8 million players in the first year of release. Gears 5 is published and owned by Xbox Game Studios for Microsoft Windows, Xbox Series X and Series S, and Xbox One.

Visit Gears5.com

My role

First Product Designer and independent contributor to work on the Gears franchise and product websites. I partner with the Product Owner, Web Producer, Lead Developer and contribute to the scoping and planning of each milestone. More about me.

UX/UI responsibilities

  • Work in the development and evaluation of personas, usability studies, user testing, and competitive landscape.
  • Create and rapidly iterate on ideas using wire-frames and high-fidelity interactive prototypes to effectively communicate design strategies and detailed interaction behaviours.
  • Deliver sitemaps, information architecture, user flow between websites on all screen sizes.
  • Create a design system that is reusable, scalable, shareable among teams and partners, and meets Microsoft Content Accessibility standards.

Design vision

  • Intuitive navigation flow between five websites
  • Mobile responsive and adaptive
  • Accessibility
  • Retain or grow usage traffic
  • Scaleable design system

Opportunities

  • Market expansion and targeted market
  • Maximize play time
  • Promote and sell products
  • Two-way communication and foster player rapport
  • Rapid development
  • Time-saver for players

Challenges

  • Attract and appeal visitors towards our funnel, keep them stay longer, and deeper to other pages.
  • Create user flow between Gears5.com, Gearstactics.com, Gearsofwar.com, and Gears.gg with access restriction of ESRB mature +17 and Gearspop.com for 10+ age.
  • Create a starter kit, developer UI and visual assets, and design system that is built on our new architecture:
    • WordPress for content management system.
    • GraphQL for game stats, rewards, and login.
    • Gatsby for our frontend development framework.
  • Ensure good content and provide character count requirements and guidelines for Xbox Game Marketing, Community, and Gears Esports teams.
  • Ensure products are both responsive and adaptive, consisting of its brand and consumer experience.
  • Determine call-to-action priority.
  • Increase content discoverability.

Starter

New design system and new technology

Starter - splitting sites

Seamless end-to-end user experience

Splitting five websites

Based on the engagement, retain, attract and monetize goals, I saw how there can be a split between a franchise site of legacy games and products sites per new game.

Gears5.com user journey

Design process

Design thinking
  • 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. 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 visualisation of highlight and lowlight tasks. Study of participants were shooter and Gears players.

  • Chalkmark testing

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

  • Experience ecosystem map

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

    • Touch-points and acivities (user action and decisions taken).
    • Channels (word of mouth, web search, reviews, blogs, and social media).
    • Thinking key quotes (needs, wants, pain points, and motivations).
    • Sentiment chart (feel positive, neutral or negative around each touch-point).
    • 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

    • Xbox Game Marketing - I align with product marketing brand, franchise SKU and Operations.
    • Game Design - I walkthrough web game feature prototypes.
    • Community - Pitch designs to the Director of Communications. Features include The Coalition Army, News, developer stream, VOD and videos.
  • Design system

    Guide user experience components of product features and accessibility specs.

  • Asset production

    Guidelines, color, typography, iconography, and more.

  • Launch features

    Gears5.com 2019-2020

    • Coming Soon features include copy, trailer and media.
    • Soft launch with pre Electronic Entertainment Expo (E3) content, explore the game, pre-order and media.
    • E3 announcement with pre-oder Standard and Ultimate Edition. Align with video game release date.
    • Navigation user flow sign off.

    Community features

    • Watch Developers Live
    • News push notifications

    Xbox marketing features

    • Operation 2
    • Operation 3
    • Operation 4
    • Operation 5
    • Hivebusters DLC pre-order
    • Hivebusters DLC Live

    Translate game features

    View stats and rewards process

    • Stat cards
    • Tour of Duty
    • Rank System (Bronze to Master)
    • Xbox Series X launch and New Game Plus Live
    • Rank System (Grand Master)

Who are Gears Players?

Interests, passions, and lifestyle

Gears of War players

Demographic majority

  • Age: 18-34
  • Country: United States, Mexico, and United Kingdom
  • Languages: English and Spanish

Social and traffic

  • Social network: Twitter, Facebook, YouTube, Reddit and Instagram
  • Traffic channels: organic search, direct, referral and social

Browser

  • Chrome: 41.1%
  • Edge: 24.98%
  • Safari: 22.15%
Gears of War players

Mobile OS

  • Android: 51.52%
  • iOS: 47.2%

Sessions by device

  • Mobile: 54.6%
  • Desktop: 42.6%
  • Tablet: 2.8%
User segments chart

7 Gears player personas

Our most invested players takes most of the web population size with the most revenue share and Gears friends.

Data segments

I investigate the number of sign-in Xbox user ID that visited each page group. This allows me to create a strategic end-to-end user experience journey.

Type of users

  1. Potential players
  2. New players
  3. Invested players
  4. Esports players
  5. Esports audiences
  6. Content creators

User testing and survey reports

I worked with a User Researcher to development and evaluate usability studies and user testing. The intent is to increase our customer conversion and task oriented success rates before our Software Engineers implement them.

Chalkmark first-click success rates

The goal of this user testing is to access navigation of Gears5.com. Participants see a mockup and click on the area where they expect to be able to complete the task.

Chalkmark first-click rate heatmap test.

Several questions to find are:

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

Treejack task highlight and lowlight results

The goal of this user testing is to assess navigation of information architecture.

Treejack user testing

Several questions to find are:

  • Do participants understand the navigation and labels?
  • Do participants run into any issues when looking for specific information?
  • Do participants find the content they expect where they expect it?

A/B testing

Particpants rated their appreciation of each design and selected their favorite (light versus dark). Participants ratings of each design were similar regardless of they 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.

User needs survey reports

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.

Top reasons players go to a game site:

  1. Find information about the latest changes or updates to the game.
  2. Find information that I can use in the game.
  3. Learn more about the game world, story, and characters.

Top features that would entice players to use a game website on a regular basis:

  1. Professional quality videos that explain how to better or use new mechanics in the game.
  2. Professional quality short movies that explore the game's characters, narrative, and world.
  3. Coaching tools: match replays on overhead maps, damage accuracy and other stat breakdowns.

Top websites players go for information on the games that they play or follow:

  1. YouTube.
  2. Gaming news website, including Kotaku, Plygon, and Gamespot.
  3. Individual game's website.
  4. Reddit.
  5. Streaming sites, including Twitch, Beam, Azuby, and Ustream.

User flow

Gears 5 stock keeping unit launches

Xbox Game Studios reconsidered and increased priority for Gears 5 amongst Xbox Game Pass subscribers and Xbox Series X|S owners. My design is to simplify and translate the release SKU on our site. Below are 'Get The Game' components for web.

Join Xbox Game Pass Ultimate

Access to 100+ games

Join Xbox Game Pass Ultimate banner

Gears 5 Standard Edition

Sept 6, 2019

Standard Edition banner

Game of the Year Edition

Dec 15, 2020

Game of the Year Edition banner

Hivebusters Downloadable Content

Dec 15, 2020

Hivebusters banner

Home

The home page design goal is to attract and appeal visitors towards our funnel, keep them stay longer and deeper to other pages. The challenge is to determine call-to-action priority and increase content discoverability.

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 designed to fascinate and spark potential player's interest to subscribe to Xbox Game Pass as the growth driver. 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

Operations are huge quarterly updates contain a ton of new content including Tour of Duty rewards, ranking system rewards, new heroes and villains, new modes and new maps. The strategic goals for in-game web features is to increase exposure, game engagement, and revenue. Each webpage is created with high quality visuals, interface, and interaction design optimized for multi-screen sizes.

Operation 5 and 4

Operation 5 on desktop
Operation 5 on mobile
Operation 4 on desktop
Operation 4 on mobile

Operation 3 and 2

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

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
Director of Communications Dana Sissons

Business Intelligence

User Researcher Cornelia Laros
BI Manager Vanessa Hung

Next case study