Halo Infinite Selection Screen

UI/UX Design
Halo Infinite Selection and Filter Screens
Fig.1 Halo Infinite AI Selection and Filter Screens.
Roles & Responsibilities

Redesign the Halo Infinite selection and customization experience.

Tools

Adobe Illustrator, Adobe Photoshop, Figma.

Work Process

For this project I did the following

  • Research and understand the customization menu.
  • Create UI mockup based on the research.
Research
  • I started by looking at how the customization page is.
  • I realized that there is too much horizontal scrolling which makes selecting something slow.
  • Users have to go through multiple pages to see all the information about the item they select.
Halo Infinite AI Selection Screen - Original
Fig.2 Halo Infinite AI Selection Screen - Original.
Halo Infinite AI Information Screen - Original
Fig.3 Halo Infinite AI Information Screen - Original.
Halo Infinite Filter and Sort Menu - Original
Fig.4 Halo Infinite Filter and Sort Menu - Original.
UI Styleguid & Mockups

I created a style guide based on the original game.

Halo Infinite AI Selection Screen.
Fig.5 Halo Infinite AI Selection Screen.
Halo Infinite Filter and Sort menu
Fig.6 Halo Infinite Filter and Sort Menu.
Outcomes
  • Changed the scrolling to vertical scrolling for faster selection.
  • Combined multiple screens so the user can see all the information without going through different pages.
  • Blurred and lowered the opacity of the background when opening filter and sort menu so it doesn’t blend with the background.
  • Added background color to the apply button in the filter and sort menu to make it easier to see.
  • Created a UI that is based on the original game.
Halo Infinite AI Selection Screen Final Redesign
Fig.7 Halo Infinite AI Selection Screen Final Redesign.
Halo Infinite Filter and Sort Menu Final Redesign
Fig.8 Halo Infinite Filter and Sort Menu Final Redesign.