Insight

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. Gears 5 will be published by Xbox Game Studios for Microsoft Windows and Xbox One.

Visit Gears 5 Website

Role

Web UX/UI Designer

I work on the new Gears5.com website, launched in June 9, 2019. It supports a third-person shooter genre audience for the mature 17+ age group.

Responsibilies

  • Translate Gears 5 game features to web for desktop and mobile – including both the user flows and the user interface.
  • Partner with the Web Product Owner, Web Producer, Lead Developer and contribute to the scoping and planning of each milestone.
  • Present my designs and explain my thought process to the Web Team and Key Stakeholders, and iterate based on feedback.
  • Deliver competitive landscape research, sitemaps, wireframes, information architecture, intuitive user flow between websites, and high-fidelity prototypes on all screen sizes.
  • Design personalization, give users more control, build excitement, loyalty, connection, and long-term relationship.
  • Create a design system; web colors, typography, user interface components, iconography, user interaction, and more.


  • Company: The Coalition (Developer), Microsoft Corporation (Xbox Game Studios, Publisher)

  • Product: Gears 5 website

  • Web Launch: June 9, 2019

  • Game Shipped: September 10, 2019

  • Role: Web UX/UI Designer

  • Collaboration: Web Product Owner, Web Producer, Software Engineer Lead, Test Lead, Business Intelligence Team, Full Stack Developers, and Software Test Engineer

  • Stakeholders: Director of Communications, Esports, In-game Designer, Licensing, and Marketing

  • Deliverables: User research, wireframes, user flows, information architecture, rapid prototypes, web design guidelines, and UX/UI/CX

  • Software Tools: Adobe (Xd, Ai, Ps), Microsoft Azure, and Axure RP

  • Work Date: March 2018 - Present


Design Process

Customer Journey Map

Created series of touchpoints that capture the context of each interaction between Gears of War websites and the customer, including:

  • User stories (user story, challenge, needs, and solutions).
  • Touchpoints and activities.
  • Channels where interaction takes place.
  • Thinking key quotes (needs, wants, pain points, and motivations).
  • Sentiment chart (positive, neutral, and pain points).

Research, User Testing, and Analysis

Working with User Researchers (BI) in the development and evaluation of usability studies and user testing. The intent is to increase our customer conversion and task oriented success rates before our Software Engineers implement them.

Research methods include:

  • Treejack study (task questions and answers).
  • Chalkmark (CTA UI placements and heatmaps).
  • User group and persona research (Esports, Community, and in-game users such as beginners, casual, and hardcore players).
  • Review pulse reports on user attitudes towards connected sites and companion applications.
  • Using Microsoft Azure tool to make strategic decisions and iterate on our websites for different stages in development. Examples of analytics review are user groups, user flow, sessions, retention, user growth, funnels and conversion rates.

Challenge

  • Website features consisting of engagemanet, retainment, attraction, and monetization.
  • Scaleable, responsive, and adaptive on all devices; desktop, tablet, and mobile.

Opportunity

  • Design a brand new website that encompasses work leading up to Gears 5 soft launch with pre Electronic Entertainment Expo (E3) content.
  • Attract and appeal visitors towards our funnel, keep them stay longer and deeper to other pages.
  • Localization.
  • Accessibility.

Launched Features

Homepage

  • Age gating, mature 17+.
  • Determine call-to-action priority and increase content discoverability.
  • Attract and appeal visitors towards our funnel, keep them stay longer and deeper to other pages.
  • Hero tile auto-play trailer on desktop. Still image on tablet and mobile.
  • Media; videos, wallpapers, and images.
  • Join Xbox Game Pass Banner.

Adaptive Navigation

  • Gears of War franchise utility navigation on desktop.
  • Gears 5 navigation that is both repsonsive and adaptive. Tablet and mobile devices uses bottom tab bars and touch interaction drawers.
  • Sign in with the email account associated with your Xbox Live Gamertag.

Explore

  • Game introduction including game modes and features.
  • Purchase Gears 5 Standard or Ultimate Edition.

Watch

Include 2019 E3 trailers and how-to videos.

Game Stats

  • Players are able to view their stats for various modes; Versus, Horde and Escape.
  • Encourage players to show off their Stat Card images of their in-game stats to the world on their social platform.
  • Go in-game to customize banners and character skins for your Stat Cards.

News

  • Content for E3 announce date of June 9, 2019 posted by the Coalition Studio Community team.
  • Ensure good content by limiting character count headlines and body paragraphs.

Media

  • Marketing assets.

Footer

  • Link to Gears of War Franchise pages.
  • Link to social media accounts.
  • Microsoft footer; region language picker and legal links.

Outcome

The nature of this UX/UI work is confidential.

Visit Gears 5 Website