UI Design - SteamWorld Heist 2
Intro
I worked on SteamWorld Heist 2 as a UI/UX Designer from April 2023 until the end of development in 2024. During my time with the team I
- Established an art style for the UI together with the Art director
- Improved hierarchy and readability in menus
- Created guides and systems to quickly create new UI assets
- Designed, created, and implemented most UI assets available in the game
SteamWorld Heist II is a turn-based tactics shooter video game developed and published by Thunderful. It was released for Windows, Nintendo Switch, PlayStation 4, PlayStation 5, Xbox One, and Xbox Series X and Series S in August 2024.
Foundation
When I joined the team, the game was already playable and the visual style was set. Most menus were in place but contained mostly placeholders and lacked functionality. Overall, the UI was lagging behind and the rest of the game was in the final polish state.
Since it was pretty late in development, we were on a tight time budget, especially for things that required help from programmers or would affect many aspects of the game.
Problems
The problems the team and I was facing was
- Unclear visual style for the UI
- Unfinished UI assets. Many assets were placeholders or relics from the first game
- Unclear page hierarchy. Players had difficulty finding where to look in each menu and took a long time to find what they were looking for
- Difficult for players to find the important pages. QA feedback said that many had difficulty finding and using the most important menus
Constraints
Because of time and budget constraints, the UI
- Must fit with the rest of the game. The game's style is already established and cannot be changed
- Should be kept with as few changes as functional possible. Focus on replacement of assets and other visual changes
- Should be fast to produce with few people
Establishing a UI art style
Together with the Art director, I started exploring various styles for the UI.
When the style was set I also created icon assets to be used in the game.
Player and Designer priority
I talked to the game design and worked with the Lead Designer to improve the user experience.
We sent the game for QA testing found these main problem points:
- Many menus looked the same and was difficult to distinguish from each other
- There was no way to highlight important information
- Important functions were difficult to access
Knowing the time we had left on the project was limited my work mainly focused on improving the experience on each menu.
Quick asset production
For creating and managing the UI assets, I used Figma. I needed a way to quickly find all assets and to share colors, shapes, and effects between all assets and Figma was well suited for this.
I knew I would have to work fast and that there would be many tweaks along the way from both Art and Design I made sure to set up a system were I only needed to make a change once. I used Figma components and style libraries to keep the visuals cohesive and to apply changes to all already made assets.