Final Inventory Design

The design of the inventory popup interface was informed by the design of the shop, as these two features act alongside each other to make the purchase & use of in-game artefacts seamless. The same background colour scheme, font layout & background icons were used in both interfaces to ensure continuity. As shown in Inventory - Design User Testing, vigorous user testing was also undertaken on other iterations of this design to ensure that the final design aligned to user's needs and provided optimal experience. All changes made to the original design can be seen & justified in the design process & iterations below.

Design Process & Iterations

Wireframes

Multiple distinct wireframes were designed for the inventory interface in order to gather feedback from users to inform our final wireframe choice. The four variations can be seen as follows:

1. 
2. 
3. 
4. AB user testing was performed on these variations, which can be seen in Inventory - Design User Testing. Based on AB user testing, the following wireframe was selected:

Hi-Fidelity Prototypes

Based on user testing on each of the wireframes, the following hi-fideltiy prototypes were created: 1.

User testing was performed on these wireframes to gauge their appropriateness for the game. Based on the feedback gathered from users, the following was selected as the final design for the inventory interface:

The carousel on the left was kept as it shows connection to the shop feature and is also a visually simple way to indicate to users that they have multiple items in their inventory without displaying them all at once & overwhelming the user. The description of each item was also found to be important to users in maintaining efficient gameplay and not having to navigate back to a guidebook for information about items. As noted by users, having spaces for a single defence and attack item is a visual way of showing that you can only use one of each of these at a time. Additional borders and colour variations were added to provide contrast between multiple use items (left side of the screen) and single use items (right side of the screen), to create clear distinction between the two in addition to the count of each single use item ie. 'health potion x1' to show how many of these are available to the player. The stats were simplified to show only the health bar as this is the only stat that can be changed through inventory items (ie. health potions) - no other stats (coins, crystal health etc.) are affected by inventory items (note that attack items have a greater impact on enemy health and defence items lessen the impact of enemy attack; they do not impact the player health directly).

Sprint 4: Inventory Interface Redesign

Based on the formation of an overarching UX committee at the beginning of Sprint 4, some changes with the inventory interface were required to ensure complete design continuity and integration throughout the game. Changes included the removal of buildings from the inventory, changing the alignment & font of the header to match other game screens, removing background 'text boxes' to avoid any confusion between clickable and non-clickable items & changing back buttons to match those used in other game areas. Since the health bar is still visable on the main screen when the popup is active, it was removed from the popup to avoid duplication. The final inventory design is pictured below.