Project Overview
In my work as a Game Design Intern at Scopely, I was given the opportunity to work on a cross-disciplinary development team on an unannounced F2P mobile game. As part of my work, I helped support the Lead Game Designer and Lead UX designer in shaping parts of the game's core loop, ideating on game features, and creating a one-pager and wireframe concepts for the game's inventory system.
Timeframe
3 Months
Role
UX Design
Game Design
Wireframing
Platform
Mobile-first/ Cross-platform
Problem
The Scopely team I was part of was in the concept phase of their game's production. As such, there was a need to create design plans and UI concepts for main game features, such as the inventory system.
Goal
There were three major goals to complete:
1. Create a one-pager design plan document for the inventory system
2. Create wireframes for the inventory system based on the deisgn plans
3. In all areas, explore how we can innovate over other games in the genre.
Competative Analysis
I conducted a survey of UX from popular games in our target genre before I set out to work on any game design plans or UI wireframes. I focused on three games in my initial investigation: Animal Crossing: Happy Home Paradise, Design Home, and Redecor, and created a rough initial analysis in a shared team Miro board.
​
​
​
​
​
​
​
After this initial survey, I decided to focus on Animal Crossing and Design home, as I believed these game's features aligned most closely with our game, and would be the most useful to analyze in more detail.​ I created a list of strengths and weaknesses in the inventory systems for both games, so that I could use these lists as a basis for considering features in my own inventory system plans.
Click image to expand
Animal Crossing Happy Home Paradise
AC:HHP is the closest comp for inventory system. The tabs are organized fairly well and overall the inventory menu feels unobtrusive to designing. Plus, like we are planning, they have a 3D space, unlike most of the other comps.
What they do well:
-
Menu is simple to understand and does not take up much space on the screen. Players can scroll through easily using the L and R buttons
-
It is easy to visualize what items will look like in the game world thanks to the previews in the menu
-
They use markings to differentiate between items that have been customized and those that haven’t
-
You can view variations of an item while designing a room from the menu
-
Menu design is cute and fits the theme of the game well
What they don’t do well:
-
Menu tabs are too general, a large amount of furniture types get organized into each tab and it can become hectic trying to find a particular item if you have a lot in your inventory
Design Home
What they do well:
-
Furniture is well organized by type
-
You can easily differentiate between items you do or don’t own
-
You can search for a furniture type from the inventory menu
What they don’t do well:
-
A little hard to understand how an item will look when actually placed in the room bc they are 2D images, the angle can sometimes change how it appears once you place it
-
Menu is very simple and uninteresting
-
It is a bit tedious trying to navigate through the inventory since there is not one single menu w/ tabs on screen at all times
Inventory System: One-Pager
When I moved on to creating the one-pager game design document detailing the inventory system, I made sure to keep in mind the findings from my competitive analysis, as well as the goals of our game as outlined by the Lead Game Designer. The one-pager focuses on my pitch and goals for the inventory system feature, what user stories were at the the heart of what the feature would allow players to do, a design overview of the feature, and relevant reference material, which included my competitive analysis and some screenshots.
​
Click Here to view the one-pager document in detail.
Inventory System: Wireframes
Defining Features
Using the one-pager design outline for the inventory system as my reference, I then moved on to the process of creating inventory flow wireframes. I began by first considering what problems might exist for a player when accessing their inventory in a home decor game. I assessed these problems based on my evaluation of competitors in the genre that I had previously conducted, and organized them into concerns for players that are already familiar with games in our genre, versus players who are new to it. I separated problems by these categories because behaviors between these types of players would differ, so I wanted to be conscious to consider both of their needs in my design. I then translated these problem statements into feature goals for my own inventory design.
![[UX] Inventory - Define - Player Stories (1).jpg](https://static.wixstatic.com/media/79a8ed_35487b506fae4ebc9af76653054d5897~mv2.jpg/v1/crop/x_0,y_1050,w_8506,h_4483/fill/w_600,h_316,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BUX%5D%20Inventory%20-%20Define%20-%20Player%20Stories%20(1).jpg)
Click image to expand
After getting approval from the Lead UX designer on these goals, I then translated the goals into a checklist of features. This allowed me to identify what key features I wanted to ensure made it into my design. These were essentially the core requirements, but I was open to including other features if ideas came up during my design process.
Features Checklist
-
Unlimited item inventory
-
​infinite scroll
-
-
Favorites tab
-
Inventory menu can be used in designing and outside of it
-
Item category tabs
-
Filters under category tabs
-
Frequently used items tab
-
Owned items have a unique icon to shop items
-
Space for item UI is big enough to show item preview image
Initial Wireframes
With my goals outlined, I then transitioned into creating my initial wireframe concepts. I first made sketches based on my initial design ideas.
Click images to expand
Using my sketches as a starting point, I then created clean wireframes in Figma for each screen needed for the core inventory system flow.
Item inventory (Designing)
Owned Items
Item Details
Click images to expand
Feedback and Iteration
I received feedback from the lead UX designer on my initial wireframe concepts, and she urged me to focus more on scalability for categories and tab menus, and assuring that information players wanted to see about their items, such as how many they owned, was readily visible throughout the inventory flow. She also urged me to remove any information from the screen that was not needed, such as the cost of items players already owned.
Keeping these goals in mind, I created a second iteration of wireframe concepts. I began with sketches for a new menu UI, focusing on scalability. I thought of using a vertically scrolling carousel for choosing a category in this iteration rather than buttons, as I felt this would be a more scalable option, and would ensure no worries about screen space if the team added more categories in the future. For filters, I opted to use a more traditional filter menu that could be configured to have any number of filters added.
Click image to expand
Next, in transitioning to clean wireframes, I made sure that item inventory count for each item was readily visible. And lastly, I made some layout changes based on feedback, such as moving the favorite button's location. I created a more detailed flow for this iteration to show a player would use the inventory system features.
Click images to expand
Conclusion
Due to the time at my internship coming to a close as I finished the last wireframe iterations, I did not have the time to create any further designs or iterations for the inventory system. Regardless, I felt satisfied with my work at the end, and was proud to have created the inventory system plans from conception to wireframes. I'm excited to see how my work will influence the team's final designs when the game is launched!