Clothing Inventory Redesign
Project: Ultimate Sackboy
Ultimate Sackboy, an endless runner game developed by Exient, is available on the Apple Store and Google Play. The game plunges players into the captivating universe of Sackboy, a renowned hero from PlayStation. Your mission is to guide the character through an exhilarating run, dodging obstacles and striving to reach the goal while earning valuable points. I had the delightful opportunity to contribute to the development of several features within this exciting game.
Details
01
Role
Product/UX Designer
02
Date
June 2021 – January 2022
03
Skills Used
Competitor Research
Wireframing
Prototyping
Visual Communication
Collaboration
Critical Thinking
Documentation
04
Tools Used
Adobe XD
Adobe Photoshop
Unity
Confluence
In-house localisation software
The Challenge
As players progress through the game, they collect a diverse range of clothing items from lootboxes and unlocks. To accommodate this increasing variety and to allow users to easily equip and upgrade their items, the wardrobe needs to be redesigned. The new design should also support equipping entire costumes.
The Solution
01
Feature Research
When I initially worked on this feature, I found the design and accessibility as follows:
- Tapping the Wardrobe button in the navigation bar allowed the player to enter the Wardrobe, where they could see Sackboy displayed at the top of the screen wearing their currently equipped items.
- Below Sackboy, there were 3 slots for each category of clothing, visually representing the items equipped in those slots on the 3D Sackboy.
- To change an item in a slot, the player would tap on the category, leading to a full list of all items of that type, separated into ‘Owned’ and ‘Locked’ sections if they hadn’t been found yet.
- If the player had enough copies of an item to upgrade it, an up arrow highlighted this, and the upgrade button became interactable. If they didn’t have enough copies, they would see the Craft Item popup instead.
- Up to that point, we only had individual items, as costumes had not been implemented yet. This redesign aimed to address the inclusion of entire costumes as well.
In-app placeholder clothing item categories
In-app placeholder items of the ‘Head’ category
The Wardrobe Menu end goal
02
Competitor Analysis
Next I researched how indirect competitors manage their inventories and documented my findings. I explored their functionalities, layout, and overall user flow, focusing primarily on mobile games like Clash Royale and Tennis Clash, as well as the PlayStation game from which we acquired the IP, Sackboy: A Big Adventure.
03
Ideation & Wireframes
After I started sketching out ideas, I hopped onto Adobe XD to create wireframes to bring those ideas to life by thinking of all the possible user flow edge cases.
- I chose to have a Category Bar containing buttons for ‘Costumes’ and different Item categories like ‘Head,’ ‘Body,’ and ‘Cosmetics.’ There are a total of 4 buttons.
- When a Category button is chosen, a contextual Sub-Category Bar appears with relevant Sub-Category buttons.
- Below the Top Bar, there’s a banner showing the Category/Sub-Category Title and the count of complete costumes or owned items.
- The Costume Category displays Costume cards, categorized as ‘Complete’ (all items owned), ‘In Progress’ (some items owned), or ‘To Be Found’ (no items owned).
- For Item Categories, the items are shown in either the ‘Owned’ or ‘To Be Found’ section. Tapping on an Owned Item previews it along with the previously equipped items.
- If a ‘To Be Found’ Item/costume is tapped, a translucent popup appears to give users feedback without providing a preview.
- A Random Outfit Button automatically equips a random selection of items.
- Additionally, we may consider adding a Snapshot Button to switch to the Snapshot Screen, allowing players to capture their Sackboy with equipped items. Furthermore, a Filter/Sorting feature would be ideal to enable players to sort and filter their items as needed.
After that, I explored all the potential card combinations in both their static and clicked states, whether the items were part of a costume or not.
Next I designed the Call-To-Action behaviour for new and upgradeable items, both on the items themselves as well on the Wardrobe tab in the navigation menu. Then I moved onto visualising all the possible user flows within both Costume and Item categories.
I also looked into updating the Upgrade popup and adding an information tooltip leading to a popup with all the necessary information on the upgrading system and it’s benefits. Improvements to the upgrade reward confirmation flow were also designed.
04
User Flow
I then created a user flow that accounted for all possible scenarios, making sure not to miss any edge cases. This was always an iterative process, going back to previous steps when needed.
05
Review & Iteration
Finally, I compiled a design document with all the flows and additional requirements for stakeholders from Art, Design, Code, and QA disciplines. The Lead Designer reviewed and provided feedback for iteration. The design underwent a review by all stakeholders and after receiving feedback, we discussed the necessary iterative improvements to the flow, and the entirety of the document.
06
Implementation
During the implementation phase, I provided support to Art, UI and Code disciplines to ensure alignment. The design was tested by myself and QA throughout.
More Projects
Creating a first time user experience
A UX designer & product person passionate about creating simple and innovative user experiences.