This case study will take an in-depth look at the loadout screen in the Last of Us games and determine where there can be areas of improvement. Research and discovery loadout screens are presented along with defining the design challenge with a user journey map, followed by ideation, prototypes and final production art.
Clickable Protoype 1
This video showcases how a player would browse and then switch between loadouts
Created in Figma with placeholder assets
Clickable Protoype 2
This video shows how a player would go about editing their loadout so they can cater it to their play style
Created in Figma with placeholder assets
1. Game UI Analysis
2. Loadout Screens - Analysis
3. Loadout Screens - Analysis
As a player I...
-Want to see all my current gear
-Want to be able to swap items in and out of my loadout
-Want to have custom loadouts so I can adapt for different stations
-Want to be able to name my loadouts to remember which is which
-Want to see the stats of a weapon so I know if I want to add it to my loadout
-Want to see how many items left I can equip
-Want to have a smooth seamless experience
As a player my goals are...
-To be able to see everything at a glance
-To quickly access the menus I need
-To be satisfied with my loadout prior
-To the missionto reset a whole loadout so I can start fresh
-To be able to quickly compare the stats of different weapons
Player Pain points
-Menus cover other menus creating clutter on the screen
-I want to know why I cant add anymore items
-Customizing is too many clicks and buried in other menus
-I cant tell which loadout I currently have equipped
-I accidentally reset my whole loadout and now I have to start all over
-I have difficulty counting the number of ticks in the stat bar of the weapon
This flow is designed specifically for a player who is about to venture into the city to scavenge for supplies and wishes to change their loadout before they begin the mission.
4. Editing an Existing Loadout - Flow
1. Loadout Selection menu - Default State
-Player opens the menu by pressing the touchpad on the PS5 controller
-The default view of this menu will show the player their current build, in this specific wireframe the player has 4 out of the 6 slots filled.
2. Loadout Selection Menu - Custom 1, Item Slot 1 Selected
-The player scrolls down the menu to highlight over items they have in their loadout to see the detailed information
-Selecting an item slot or pressing triangle will bring the players to the loadout edit menu
3. Loadout Edit Menu - Default State
-Players can navigate to the different weapon types with the left and right d-pad
-The menu on the left will populate the information and stats of the selected item
-Players can add or remove items by selecting the item slot and then choosing a weapon in the menu to fill that slot
4. Prompt - Reset Loadout
-In the Loadout edit menu there is a prompt to reset the entire menu, this is a destructive action that will require confirmation to proceed
5. Flyout - Not Enough Loadout Points
-If the player is in a position where they are not able to add more items to their loadout because they’ve run out of a points, a flyout with an arrow will appear
-This will let players know the reason they are not able to add more items as well as indicate the location of the information for future situations
6. Return to Loadout Selection Menu
-Once the player is finished editing their loadout, they can press the back button to return to the Loadout selection menu
5. Loadout Selection Menu - Flow
1. Custom 1 Equipped
-The player currently has Custom 1 selected, the box around the loadout name indicates the one that is equipped
-The text on the bottom also tells the player ‘This is your current loadout’
2. Preview Custom 3
-Using the left and right buttons on the d-pad allows the player to preview the other loadouts without commiting to a change
-The box remains around ‘Custom 1’ while the colour and line under the tab shows the player which loadout they are currently viewing
-In this specific screen the player is looking at Custom 3 while Custom 1 is the one that is equipped
3. Equip Custom 3
-The player can press select (X button) to confirm the change of equipping another load out
-The rectangle will then change to Custom 3 while the text ‘This is your current loadout’ will appear on the bottom of the screen.
