Gears POP! web design
Launched November 2018
Gears POP! is a popular spin-off video game of the Gears of War series designed specifically for mobile devices, featuring Funko's POP! toyline. The game was made available on both the Apple App Store and Google Play Store, and launched on August 22, 2019 to widespread acclaim.
With over 4 million players in its first year of release, Gears POP! quickly established itself as a fan-favorite and was even nominated for the prestigious Apple "Game trend of the year" award. The game features a unique blend of action, strategy, and collectible card game mechanics, providing players with an engaging and addictive gaming experience that has captivated audiences around the world.
Overall, Gears POP! represents a spin-off of the Gears of War series, offering players a fresh and exciting way to engage with the iconic franchise on mobile devices.
My role
Product Designer 2 at Microsoft
I contributed to the development of core features for the game by conducting a thorough mobile game competitor analysis to better understand the needs and preferences of our target audience. I presented key stakeholders with a set of MVP features, competitive landscape features, and compelling designs that effectively catered to the casual mobile game audience, while also satisfying the unique needs and preferences of Gears fans.
Through a combination of short-burst gameplay, around-the-clock game experiences, and high-quality cinematic trailers, I was able to successfully engage our target audience on web. Overall, my contributions to the development of Gears POP! reflect a commitment to delivering high-quality, engaging mobile gaming experiences that effectively cater to the unique needs and preferences of players 10 years of age and older, driving engagement, retention, and revenue for the game.
Design overview
Goals
To achieve my goals of convincing Xbox Marketing for The Coalition web team to build gearspop.com and supporting performance marketing efforts for the soft launch date of October 2018, I developed high-fidelity prototypes. By creating high-quality and engaging prototypes for gearspop.com, I can effectively demonstrate the potential of the website and convince key stakeholders of its value and potential impact.
In addition, the site needs to build game awareness and be a channel to acquire users and support performance marketing efforts within a tight timeline.
Challenges
I presented an MVP version of the site that meets all requirements and does not hinder our ability to scale up to the next phases of the site. Some challenges that I needed to address included:
- Identify the riskiest assumptions and the smallest experiment to test these assumptions.
- Sell vision to early adopters (customer group).
- Identify features to be included or not in the MVP.
- Research how competitors monetize actionable insights.
Design process
-
Pitch MVP features
Determine core features to support a mobile game audience.
-
Wireframes and player flow
Interactive design walkthrough meetings with Lead Engineer and Stakeholders.
-
Copy and image sign off
Address any final revisions to FAQ and Support from support flow design.
-
Mockups
Three revisions.
-
Stakeholder sign off
Xbox Senior Global Brand Manager, Senior Marketing Director, and Director of Communications.
-
Assets and user interfaces
Images and user interface assets locked.
-
Soft launch features 2018
Xbox Marketing and Community:
- Coming Soon
- Live soft launch on Apple Store
- Available on Google Store
-
World launch features 2019
Xbox Marketing and Community:
- Newsletter sign up flow
- Support submission flow that send ticket to support@gearspop.com
- Hero auto-play trailer on desktop and still image on mobile
- Embedded YouTube trailer and plays upon user activation
- Gameplay screenshots linear scroll on mobile if more than three assets
- Links to social media accounts
Mobile game customer group
Understanding our end users, goals, and vision for our web to identify features that are essential to delivering the best outcomes for our MVP. Early adopters will be used to obtain feedback on the MVP and determine the strategic direction of further product development.
Mobile gamers that actively seek out new games from mobile gaming websites, reviews, and mobile game developers.
Delivers and supports:
- Teen age group.
- Fun and around-the-clock experience.
- Pick-up-and-play mobile product.
- Satisfaction for Gears fans.
- Short-burst gameplay.
- Snippets of cinematic camera work.
Scope
Test website hypothesis with minimal resources, starting with no CMS requirement. The site should be designed to be simple, easy-to-use, and optimized for mobile devices, as our target audience consists primarily of mobile gamers who value convenience and ease-of-use. Site should be:
- Beneficial for customer purpose.
- Minimum but valuable features.
- Pleasurable user experience.
Competitor web features
To inform my web design and ensure that I am delivering a competitive and compelling experience for our users, I conducted a thorough analysis of our competitors' web features.
Core features prioritization
Based on my analysis of our target audience and competitors, I identified a range of core features that I believe are essential for our MVP. I recognize that I need to prioritize these features to ensure that we are delivering the most value to our users and making the best use of our resources.
Player sitemap
To ensure that our site is organized and easy to navigate, I developed a sitemap that outlines the key pages and sections of our site.
Home page
The design goal for the home page is to attract and appeal visitors towards our funnel, keeping them stay longer and deeper to other pages. MVP features include marketing micro-copy and media components, such as Electronic Entertainment Expo (E3) announce trailer and gameplay screenshots.
Soft launch
Coming soon
Click on the Apple App Store badge or Google Play Store badge to display the coming early 2019 dialog. Soft launch had no support form.
Play Now
App Stores
Inform customers the game is coming soon and can sign up for our newsletter or follow us on facebook to stay up to date.
Global launch
Play now
Game was available to download in the Apple App Store first. I made sure to inform customers the game was coming later in the Google Play Store. Global launch has a support form.
Newsletter sign-up
Designed newsletter sign-up flow for Gears POP! news and receive information, tips, and offers. Mocks include signed up, not signed up, and opting out.
FAQ
Inform about Gears POP!, where to download, platform availability, and iconic Gears characters.
Support form
Design form fields and successful submission messages. Support submission sends ticket to support@gearspop.com
Footer
The footer links to social media accounts, the Apple App Store, the Google Play Store, and the Microsoft Store for game download. Region language picker and legal links included.
Web styleguide
I tailored the web styleguide to the 10+ age audience with a bright and colorful design that aligns with the game's theme. Bold typography and expressive icons guide users to important content while featuring approachable game characters. My design is accessible to all users with high contrast and closed captions, delivering a visually engaging and conversion-driven experience.
Credits
The Coalition web team
| Product Designer | Tina Kao |
| Sr. Producer | Carolina Smith |
| Web Producer | Jim White |
| Lead Software Engineer | Karl Romanowski |
| Software Engineer | Sarah Nicholson |
| QA Tester | Artem Chaykin |
Stakeholders
| Sr. Xbox Brand Manager | Nicole Fawcette |
| Sr. Xbox Product Marketing Manager | James Yin |
| Director of Communications | Dana Sissons |
Media services & marketing
| Art Director - stakeholder | Kathryn Liu |
| 3D Artist - Gears POP! characters | Yang Zhang |
