Brooklyn Sheets
Halo Infinite
343 Industries
Role
UI Technical Artist
Engine
Slipspace Engine (343 Industries Proprietary)
Platforms
Xbox One, Xbox Series X/S, PC
Trailer for Halo Infinite Multiplayer
Storefront
After Halo Infinite was released, it became clear the storefront wasn't able to display offerings effectively. The storefront received a major redesign, updating both visuals and functionality. Previously, we were limited to one page of items in the main store and a separate page for the HCS store. This update enabled scrolling and added a unified style with new flags, banners, and gleams. I was the sole implementer after our UX Designer built the functionality for a scrolling storefront.
Implementation required setting up a verbose series of bindings to allow various aspects to update based on their tile size, item rarity, item count, storefront, sale status, and options such as gleams and new status. Sometimes, during implementation, I would find a unique case that had not yet been designed. When that happened, I would reach out to the UI Artist to discuss and show a few options.
The default tile sizes were based on a grid system with friendly names 2x1, 2x2, 2x4, 4x2, and 4x4, which allowed the tiles to fit together easily. However, the HCS storefront had a unique 3x1 tile design so that, when only 8 offerings were shown, the entire storefront could be filled without leaving empty space or requiring users to scroll. This 3x1 tile was intended only for that scenario, as it would create an uneven grid in the storefront when used with the default tiles. I ensured this 3x1 tile wasn't an option for the main store, and that storefront designers would receive an error if they tried to implement it there.
The work I did on this allowed for more "storefronts" to be easily built in the future. After this rework, Spartan Points introduced a new store: the Exchange, which allowed players to earn in-game currency and purchase cosmetics. Setting up the Exchange storefront was straightforward, and it became a tab within the main store just like the HCS store.
343 Industries paid close attention to Microsoft's accessibility guidelines, which served as a focus throughout development. One of these guidelines required specific color contrast standards for text color relative to its background and the text size. The previous storefront passed color contrast requirements because the text was farther from the asset image, and the images were much smaller. With the new update, the text could overlap the asset's image, and required a slight redesign. Along with color contrast, Halo Infinite supported 3 text sizes for accessibility, which required extra attention when designing the storefront. Localization and large text made it easy to run out of space, so to keep scrolling to a minimum, I made custom bindings to use as much vertical space as possible before switching to scrolling.
Free-to-Play Battlepass Redesign
This redesign expanded across multiple screens and widgets. The battle pass level block and common layout got a refresh to make premium feel even more premium, while also upgrading the free-to-play version and making key information like season and level easier to read. Part of this was aligning the level box sizes to two sizes. Most areas would use the smaller level box, with the larger size reserved for the main battle pass screen and reward moments. Both sizes were implemented so that they could be animated and resized while maintaining a consistent style.
In-game view of the battlepass level up reward moment.
Not every screen had mockups for the new design, so I met with the artist to discuss options and showed different implementations. Usually, we reached a decision quickly, but sometimes we iterated a few times before settling on the layout. Similarly, animation was not always blocked out, so I implemented the first iteration based on the old style and then met with them to implement final touches before submission.
This redesign also included events; however, they eventually stopped being used and became operations like the other passes.
As part of the battle pass visual updates, the main menu was redesigned as well. Part of this layout change was to accommodate the challenges widget. Challenges had recently been updated to reward players with Spartan Points, and we wanted to highlight them for easier access. When adjusting the layout to add in challenges, we also addressed the growing contrast accessibility issue with the button list.
The previous Battlepass Upsell didn't highlight possible rewards. In the slideshow above, there's a comparrison for the old and new Upsell. Below in the in-game animated view.