A solo project I undertook to re-imagine the Skyrim inventory system to better hone my UI design skills.
Waste Away was a group project to build a waste management simulator game, in which I designed all of the UI.
This was a personal project to make a re-imagining of the Skyrim inventory system inside of Figma. The motivation for this specific choice was due to it feeling outdated and clunky to use. The goal of this re-design was to make the inventory system more accessible and efficient for players to use.
Skyrim’s current system consists of a list of items in text form, the player being able to filter items by categories such as ‘apparel’ and ‘books.’ The item list is in alphabetical order with no other way to sort items other than using the ‘favourite’ option to categorise their own items. To view any item’s stats the player must scroll to that item. Because of these reasons I felt that this system could be adjusted to better suit the needs of its player base. To start, I recreated the current inventory system in Figma as a reference point for all my future designs.
For my first prototype the menu has been moved to the top of the screen and the items in the list have been given icons to help the player recognise what each item is at a glance rather than needing to read the name. The menu was moved to take advantage of the currently unused space at the top of the screen and give more horizontal space to iterate the item menu. I wanted to use simple icons with colour coding to keep the minimalist approach of the original whilst adding needed clarity and visual information to the items. These icons range from items that effect or interact with health, magic, stamina, types of resistances, strengths modifiers, if stolen and miscellaneous effects. I also wanted to maintain the monochromatic colour scheme of the original and the immersive background in my design as those were key aspects of the original inventory.
For the second prototype I decided to add a filtering and sort option. I did this through a toggleable option at the top of the inventory section that would be controlled with the triggers of the controller. These sorting options would include alphabetical, weight, value, value to weight, quantity and types of properties (grouped icons from previous design). This design would allow the player to navigate the long lists of items much easier by filtering to what they require at the time.
For my third prototype I wanted to try and combat the long list format that I found frustrating by implementing a grid-based system. This grid would use the current images for the items and the icons I introduced in prototype-1, make the inventory visible at a glance and increase the amount on screen whilst maintaining the minimalist look. This design would also make use of more of the screen space available by expanding into the centre of the screen. To accommodate this new layout, I also added a cursor system to select the items instead of the normal scrolling. This design was made to try and reduce time spent getting to items in the inventory with the new visual approach rather than the text previously.
For my final prototype I wanted to hit on all my favourite aspects I’d tried and focus on prototype 2 as that had the one I found the most successful. I added symbols by the side of the items depending on their sub-type to allow for quick recognition when scrolling through the list and add more visually appealing elements that weren't text. I also added a toggle to extend the inventory box to display more information such as the items type, weight and value. This feature makes use of the empty space in the centre of the screen whilst allowing more player choice on the amount of detail displayed. This design will allow novice users to have a streamlined experience whilst more advanced users can utilise these settings to the fullest.
Waste Away was an 8-man team endeavour, working with other student programmers, designers and 3D artists over a 3-month period. As part of being assigned design lead over the project I also took charge over the games user interface and visual aesthetic.
In a management game players need to be able to make informed decisions at a glance and so clarity was the biggest pillar in my wireframes for the games UI. I used Balsamiq to create my wireframes due to it naturally lending itself to rapid prototyping and amongst a team environment I wanted to constantly be seeking feedback and iterating on my designs.
Beyond functionality, visual appeal played a crucial role. The game's colour palette was chosen under my guidance. I created a few different palettes aiming for a balance between thematic representation and user comfort that I had my team vote for individual colours they thought fit. I then crafted two final palettes from the ones the team most resonated with and we settled on striking selection of teal greens, a rich blue and a pop of burnt orange to contrast and complement.
The wireframes I created were instrumental in guiding the development of the in-game UI. They outlined the layout, hierarchy, and interactions of various elements, ensuring consistency and clarity throughout the user interface. By collaborating closely with the development team, I was able to refine the wireframes to align with technical constraints and optimise the overall user experience.