Project Summary:
Star Realms is a tabletop card game that was ported to a digital version which is currently available on Steam. I love the game itself, however, I thought it would be fun to redesign the UI (User Interface) to improve the player’s experience overall.
I had 4 design goals:
Make the UI more modern with a design style which blends the original, more physical and detailed style, with a cleaner, lighter look.
Establish a clear hierarchy with the interface to reduce the player’s cognitive load.
Use transition animations that are quick and snappy so as to not be tedious.
Add some semi-skeuomorphic design to the UI to compliment the game’s original physical style.
Below is the end result, built in Unity. I chose to begin with screens/menus that were most relevant to the core navigation.
**Please note the demo ends at the LOADING screen! You may return to the main menu by clicking the Back button**
Design Changes
Old Main Menu
To start, the original game’s resolution is oddly small, so I resized it to 1920x1080. I then created a wireframe tree in Adobe XD to organize and simplify the menu progression. I used large button icons to describe each menu and animated them using Unity’s built in Animator and Particle System.
NEW Main Menu:
Old Arena Screen
The Arena screen is a challenging design task as it contains a lot of information for the player to process. I designed the layout itself to simplify the information, and added Quests so that the player has some goals in PvP games.
NEW Arena Screen:
Old Profile Screen
Profile screens are another instance where the player is presented with a lot of detailed information. I decided to break these down into tabbed groups of scrollviews. As a bonus feature I added an animated sprite based on the player’s selected Avatar.
NEW Profile Screen:
Old Campaign Select Screen
First, I divided the Campaign menu into specific missions, based on each individual “Faction”. This way the player’s progress is more linear and they can get an idea of each Faction’s theme.
Old Campaign Screen
I then added a list of the Campaign missions to the left so that the player can see their progress at a glance.
NEW Campaign Screen:
Old Practice Screen
I designed the Practice screen (changed from VS. AI) to be simple and straight-forward to show off those beautiful illustrations by the original artist, Antonis Papantonio.
NEW Practice Screen:
Old Tutorial Screen
Here the original layout simply needed to be expanded to show more information that is easily accessible. I decided a scroll view would be appropriate.
NEW Tutorial Screen:
Resembling a character select screen from a fighting game, I added the ability to select a custom avatar for each player during a match.
Finally, I made a simple Intro screen animation using Photoshop and Unity’s built in animation system.
Asset Sheets:
Adobe XD Wireframe
*Rights Disclaimer*
Star Realms is the intellectual property of White Wizard Games LLC. Use of it’s respective material is not meant for any type commercial or monetary gain whatsoever, and fails under fair use.