In-Game UX Design for HALO: Master Chief Collection
UI Design
Conceptualization
Client Presentations and Scheduling
Managed User testing with MS Research Labs
Welcome to the File Browser Feature
The Master Chief Collection had been rehauled and ported to the PC. The collection for this package included six games that received graphical, audio, UI, and UX upgrades.
My Role
I was a UX Designer in charge of designing the complex and massive File Browser Feature for HALO: Master Chief Collection.
I created numerous design iterations, documentation, information architecture, wireframes, and prototypes. Ultimately, I delivered a prototype that worked with an XBOX controller for real-world user testing using Axure as the prototyping tool.
Problems and Solutions
The Product Problems:
On top of the numerous features that needed to be designed, a primary challenge was that the prototype couldn’t work with a mouse and keyboard and must work with an XBOX controller.
The Product Solutions:
Allow the user to share their gaming experience in numerous forms with the HALO gaming community in an easy-to-use interface that feels familiar but new.
View, search, share and recommend files, game footage clips, screenshots, and maps
Mods created from the game’s user base also need to be considered.
The UX Process
Understanding the user:
We were interested in engaged HALO: MCC multiplayer players, engaged PC shooter game fans, and casual shooter game fans who have played multiplayer in the past.
We knew that the user base for hard-core MCC fans praised the file browser in HALO Reach. I wanted to use what the fan base already liked with that browser but update the UX in a stylish package.
Design tools I used
The tools I used for this project were Illustrator and Axure.
Information Architecture and Screen Flows
After prioritizing the feature list, the next item was to design the information architecture. The IA was changed multiple times during the design process. After numerous meetings and approvals, it was time to design the wireframes.
IA for MCC File Browser
Specs for Main Menu/My Files
Specs for My Files/Recent Files - Module Highlight
Specs for My Files/Recent Files - Module Selected
Specs for My Files/Saved Files - Module Highlight
Specs for Main Menu/File Share
Specs for File Share/Screenshots - Module Highlight
Specs for File Share/Filter - Module Highlight
Wireframe Designs
The first version of the wireframes was over 80 screens. After our first meeting, it was clear I needed to go back to the drawing board as the first design was too complicated. After researching competitors and a bit more competitive analysis, I developed the final design version.
Wires for Screenshots - Full Screen
Wires for File Share/Search
Wires for File Share/Search - Selected
Design Validation
The XBOX user testing lab creates reports called “Expert Reviews.” These reviews are conducted by the in-house testing lab using a Tenets and Traps framework.
Part of this Expert Review came with “Highlights” and “Lowlights.” I focus on the lowlights to help improve my designs before testing with users. 7 lowlights were found after the user testing was complete. Even though most participants found the search function useful, there were still issues. There were also issues with the bookmark functionality, UI buttons, iconography, and other minor lowlights. All of these were redesigned for the final deliverable.
Testing
Six participants (5 male and 1 female) took part in a 30-minute usability study interacting with a prototype of the File Browser for Master Chief Collection.
Most participants found the “Search” functionality useful and understood how to find specific content. However, some participants had difficulty understanding the difference between Temporary History and Local Files within the “My Files” feature. Additionally, most participants did not understand where files would go after making selections like “Save,” “Download,” or “Upload.”
““I think the search function was pretty awesome. I liked that I could press start and search by Gamertag; all those filter settings were pretty good. I liked that I could navigate easily and clearly understand what I was doing.””
Prototypes
Below is a video of me using the final prototype with an XBOX controller in Axure.
Conclusion
In conclusion, the file browser function in Halo: The Master Chief Collection is a valuable tool for players to manage, organize and share their in-game content. It allows for easy navigation and access to saved games, screenshots, and other files, making it a convenient and efficient feature for players. Overall, The file browser function is a well-designed and user-friendly addition to the game, greatly enhancing the player experience.