HALO: MCC - CUSTOM BROWSER
CASE STUDY
Platform
Xbox One (Console)
PC
AUDIENCE
Social Halo players
Casual - Hardcore
TEAMS
Internal: Game Design
3rd party: Behavior Interactive
RoleS
UX Designer
Game Designer
THE GOAL
Players needed a way to search and join public games mid-match
With the release of Quick Match in Halo: MCC, Custom Browser allows MCC to separate competitive and social games by introducing a new user interface. This new feature will become the new destination for finding social games; users will set filters to find the game they want to play.
QUICK MATCH: Players can find a game immediately. Custom Browser allows players to apply filters to find their desired game, making their matchmaking experience more efficient
BROWSE GAMES: Custom Browser allows players to browse all social games available
HOST GAME: Custom Browser also allows players to host their own custom game, which can be private or public
RESEARCH & DEFINE
After learning about the goals for Custom Browser, the discovery phase of this feature entailed competitive analysis (how did other social games such as Counter-strike: Source handle public lobby browsers?), reviewing requests on 343’s forums, and conducting and empathizing with players during user research listening sessions.
DISCOVERY
This project was unique because there was no project owner for the Custom Browser. I wrote the game design spec using my understanding of the Custom Browser goals, reviewed it with game design, engineering, and production for approval, and used this document to guide my work.
GAME DESIGN SPEC
USER FLOW
As a part of writing the one-pager, I also wrote multiple user flows for the three main features: Quick Match, Browse Games, and Host Game. Writing out steps is my the first part of defining the user journey, before I create a user flow chart.
UX WORK
While working at 343i, my UX output came in the form of UI specification docs: this document captured details for the design of the feature, including IA, user flow, wireframes, and general call-outs of functionality. This document was used by UX to produce wireframes, UI to create visual design, engineering to begin their work before UI comp hand-off, and production to create a working schedule for the UI team. These documents required a clear, concise written communication and a close eye on details and unhappy paths.
One of the more difficult aspects of this feature was based around the Host Game flow. In many games, there is a user flow for a player who hosts a game and a player who is a guest. The host will often have multiple options, settings, and interactivity that the guest player will not. When designing for any feature, I am always considering all player roles to ensure that I don’t forget to account for any functionality. In this spec, this more complicated user flow is represented in the Host Games Wireframes section.
UI SPEC
Some features didn’t require a prototype, but for Custom Browser, I did create a UX prototype for review. This was partially for user research, which was an internal team to Xbox. The functional prototype was used to check our assumptions and gather information to validate our expectations. This prototype was also valuable, since we would be handing off the work to a co-dev team, it allowed us to more clearly demonstrate the interactions expected from start to end.
Below is an approximation of the prototype using wireframes. I no longer have the prototype, but it was fully interactive, unlike the video demo seen here.
UX PROTOTYPE
HAND-OFF
Once the UI spec is completed, I hand these documents off for review. This usually goes to the other feature stakeholders first, such as engineering leads and game designers. Approvals may be committed in the form of a meeting during which I present my work, or may be asynchronous depending on the complexity of the project.
INTERNAL REVIEW
In some cases, the work will remain with my team or me to begin visual design. In the case of the Custom Browser, we were working with a third-party co-development team called Behavior Interactive. The documents that I created went out to Behavior to guide their visual design work. Their comps would come back to my team for review and approval, where I would spend time comparing their designs to my UI spec to ensure that all interactions were accounted for and that the engineers would have enough information to begin building in code.
EXTERNAL HAND-OFF
OUTCOME
Players were extremely happy to have a custom public browser
The feature was a success when it launched. Players were excited to be able to more specifically customize their experience, with the Halo games they preferred, social vs competitive matchmaking, and partying up with their friends to join public games. Custom browser felt largely overdue by the time it had been released, and its popularity is proven by the fact that it is still available today in Halo: MCC, and other newer Halo games.