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. Gears5.com 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.
Design vision
- Intuitive navigation flow between five websites.
- Websites are responsive and adaptive on mobile.
- Consists Gears brand and consumer experience.
- Retain or grow usage traffic.
- Create scaleable design system and starter kit.
- Meet Microsoft Content Accessibility standards.
- Market expansion and increase content discoverability.
- Helps maximize play time.
- Promote and sell products.
- Two-way communication and foster player rapport.
- Time-saver for players.
Design challenge
- Attract and appeal visitors towards our funnel, keep them stay longer, and deeper to other pages.
- Determine call-to-action priority, ensure good content, and provide character count requirements and guidelines for Xbox Game Marketing, Community, and Gears Esports teams.
- Create user flow between five websites:
- Gears5.com ESRB (Entertainment Software Rating Board) mature +17.
- Gearstactics.com ESRB mature +17.
- Gearsofwar.com ESRB mature +17.
- Gears.gg Esports ESRB mature +17.
- Gearspop.com ESRB 10+ age.
- Create a design system with starter kit, developer UI, and visual assets.
-
Built on new architecture:
- WordPress for content management system.
- GraphQL for game stats, rewards, and login.
- 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
- Social engagements (social networking apps).
- Stakeholder wants and new ideas.
- User needs survey reports.
- Other gaming websites that users visit regularly.
-
Gamer journey stages
- Touch-points and activities (user actions and decisions taken).
- Channels (word of mouth, web search, reviews, blogs, and social media).
- Key thinking 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 Marketing Team: I align with product marketing brand, franchise SKU, and Gears 5 Operation features.
- Gears 5 Game Design Team: I walkthrough web in-game prototypes to gather feedback from UX and UI game designers.
- 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.
- Esports Team: I walkthrough gears.gg Esports web design.
- Licensing Team: I walkthrough merchandise web features at gearsofwar.com.
-
Design system
Guide user experience components of product features and accessibility specs.
-
Asset production
Guidelines, color, typography, iconography, and more.
-
Launch features
- First launch in 2019 with coming soon features; 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 that aligns with the video game release date (September 2019).
- Navigation user flow sign off.
-
Community features
Watch developers Live and news push notifications.
-
Xbox Marketing features
- Quarterly updates: Operation 2, 3, 4, and 5.
- Hivebusters downloadable content (DLC) pre-order
- Hivebusters DLC Live
- Xbox Series X launch and New Game Plus (NG+) Live with unlockable video game mode.
-
Live in-game features
- Stat cards (game modes and playlists)
- Seasonal Tour of Duty rewards progression and objectives
- Seasonal Rank System (Bronze to Master)
Player journey
The strategic goals for Gears5.com 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
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:
- 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.
- New players - improve player retention and drive long-term engagement.
- Invested players - it is essential that I provide them with engaging user experience that caters to their unique needs and preferences.
- Esports players and audiences - provide them with a robust and engaging esports experience that effectively showcases the competitive and strategic aspects of the game.
- 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.
Power BI reports
Investigate numbers based on The Coalition's telemetry events to find:
- What are the top playlists this week, such as Escape social beginner, Horde event predator hunt, Horde social frenzy, and more.
- What are the popularity of each game mode, including lifetime campaign players and lifetime multiplayers.
- 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:
- What are the top reasons players go to a game site?
- How do participants find information about the latest changes or updates to the game?
- 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:
- 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 out how to sign up for news updates?
How would you buy a collector's edition?
Treejack task test
37 Coalition employee participants
I assessed task highlight and lowlight results for the navigation and information architecture. Questions to find included:
- 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?
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
Buy Gears 5 Standard Edition
Released on Sept 6, 2019
Buy Game of the Year Edition
Released on Dec 15, 2020
Buy Hivebusters Downloadable Content (DLC)
Released on Dec 15, 2020
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.
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.
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.
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 |
| 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
