The Making of Starbornes' Politics Panels

As we near the release date for the Starborne: Dissidence Update, Our UI/UX guru, Kai (also known as iMaple) has put together a post detailing our workflow and design goals with the redesign of the politics panel. This is one of Starborne’s heaviest UIs with a storied history to say the least, and we are really happy to share some insight into the anticipated upgrade.

UI|UX Design Process

UI (User Interface) and UX (User Experience) are design disciplines you’ll find at most software companies, and the field of game development is no different. If game design determines how a feature works, UX design determines how users (you) actually interact with that feature. Whereas UI design dictates how that interaction – mostly menus in our case – appears. The two disciplines go hand in hand so they often appear in the same title, and they’re good skills to have for game designers.

Creating Wireframes

Our basic UX flow when it comes to creating multi-layered panels for the game is pretty straightforward as you can tell from the images below. We try to apply this basic structure in any menu we create to make them more consistent and easy to learn. Starborne is a very complex and menu heavy game, so our most important goal is to convey information as effectively as we can while minimizing the amount of clicks needed to get stuff done.

We start out with wireframing, which is the act of laying out a UI at a low fidelity – think of them as rough blueprints omitting most of the finer visual details and style. The focus lies instead on sanity checking the interaction and UX flow while creating the basic foundation for the new UI. Ideally, this process answers the following questions with a yes:

• Does this menu fulfill all the feature requirements?
• Does this panel take the least amount of effort to accomplish the desired tasks?
• Is the navigation through the panel intuitive?
• Does the panel tie into the overarching menu and UI structure?

Wireframes to Mockups

From here, we create the first UI mockups using colors, accurate dimensions and real game data. Most often, we discover some issues such as one part of the panel being too information heavy or simply not looking the way we wanted to, and we repeat this process a couple of times until we are happy with the result.

One thing to keep in mind is that it’s really important to clean up the final™ mockup before the hand-off. Usually, there will be several errors with labels or stats that slipped through the many revisions, and they’re often so innocuous that they won’t be noticed as the panel goes through the production pipeline.

Consistency and Modularity

You will notice that sidebars and info boxes in the screenshots retain the same design even if they’re used in a slightly different context, which is advantageous in several ways. On the technical level, these UI elements can be saved as prefabs in the game engine, making it much easier to create additional copies and edit them as a group afterwards. For example, if we were to change the border frame of a standard button, we can do this with just a few clicks rather than having to find and edit 100 different, yet identical buttons scattered across the Unity project.

The second advantage is that it speeds up our own designs process, not just the implementation thereof. If we start looking at our panels as a combination of pre-built components rather than individual parts that we have to create from scratch each time, we can visualize new panels much more quickly.

Off to Production

Once the design is ready, it’s sent to production along with notes and explanations for each menu, as well as color data and exact dimensions for every UI element. However, even the best of documentation won’t cover everything, so it’s important that the designer is available to answer any questions that arise during implementation.

Lastly, the design goes through QA to iron out bugs and compatibility issues with the build. General UX related feedback at this stage, unless critical enough to be applied immediately, is written down for consideration in a future revision.

There are many more layers that we won’t be able to discuss here, such as UI scaling, user testing, ensuring platform compatibility and developing functional prototypes, but we hope this gives you atleast a small insight into how user interfaces are created for video games. That said, this process varies with every team based on its size, time available and projects at hand, as you can see from the design approach for Anno 1800 or Stellaris.

It took several iterations for us at Solid Clouds to settle with this workflow, and we don’t doubt for a moment that we’ll find room for improvement moving forward!

Politics Panel UI Changes

Now that we’ve covered the creation process of Starborne’s UIs, let’s dive into some of the specific changes coming to the politics panel. For context, this panel was a combination of several hastily developed systems jumbled into one menu that barely held together. The amount of tech debt it accrued over the years eclipsed even our most complex game systems in scale and I’m so, so glad we finally got the time to address it.

Overview Screen

The first thing we’ve burned to the ground and built from scratch is the overview screen. Previously, this screen attempted to do everything at once, conveying information of mixed nature crammed into small sections all over. The sole purpose of this new screen is answering the simple, yet important question of who is winning, and how much time do I have left to make sure they don’t?

The top 10 entities as well as your own are sorted under each victory condition. This entire system is highly modular allowing Alliances, Players and even entire Sectors to compete in one of many victory conditions, the latter being what we’re trying out in the Dissidence Update.

Create|Join an Alliance

Next up is the alliance section of the panel. At first, you will see a list of nearby alliances you can join as well as all invitations you’ve already received and applications you’ve sent out. Previously, these options were scattered across multiple menus and we wanted to centralize this process. As an added bonus, applications and invitations now support an associated personal message!

The option to create your own alliance has been relegated to a single button on the right hand side which swaps the page content. The goal here was simple: Get new players to join an established alliance rather than trying to do it themselves and inevitably getting destroyed two weeks in. The extra room in the create alliance screen is used for our new alliance crest picker (coming soon).

Alliance Overview

Once you have created your alliance, you gain access to the alliance overview screen containing the most important stats, up to 4 memos which have replaced the message of the day, and a list of ongoing alliance movements and alliance pins from your alliance. With this screen, we wanted to centralize as much of the essential information alliance members need to know to give alliance leaders a bit of a breather.

The member roles screen should now be more intuitive to use, and we’re working on additional contribution metrics on the member list screen to properly credit players who are supporting their alliance via resources, ships and other avenues. Ultimately, this menu’s primary goal is to make cooperation between allies easier in the game, making it heavily dependent on direct player feedback from power users.

Player Profile

The player profile has also received a facelift, and now displays the player’s faction, two additional badges and other information you would expect to find here. This menu will likely undergo several changes as we continue to upgrade our account progression and customization systems, but the highly modular nature of the screen should enable us to get through them at a much faster pace than before.

Ranking System Changes

The largest gameplay change is the quintuplication of ranking categories. Starborne at its core really only cares about the victory conditions, but you do so much more over the course of a game that we felt you should be credited for your personal accomplishments in more than just a handful of metrics.

Sovereign Spreadsheet 2.0

UI wise, we managed to unify player, alliance and sector rankings into a single screen, sparking much joy in my heart. You can also sort each list by any ranking category, and tooltips explain how they are calculated and how much they contribute to your score. We’re also looking to add support for weekly rankings in the near future, allowing you to see exactly how much progress you’ve made over the last 7 days.

These new categories aren’t just for show though. Our long-term goal here is to award end-of-game rewards for personal achievements on top of alliance-wide or sector-wide rewards for winning the server. That said, this is the first iteration of the new scoring system and we have no doubts that some values are unfairly weighted compared to others, so we’ll require a few servers worth of play data before activating these rewards.

Gonna be the very best! (At something)

Similar to the victory conditions outlined earlier, the ranking categories are backed up by the same dazzling rankings API (courtesy of our amazing backend engineers Jóhann and Marinó), meaning it’s just as modular and allows us to easily add, tweak and remove categories in the future. Check out the section below for an early look at what to expect in the Dissidence Update!

General Ranking Categories (Player)

• Empire Score = Weighted total of all Empire Score categories
• Activity Score = Weighted total of all Activity Score categories
• Battle Score = Weighted total of all Battle Score categories
• Game Score = Weighted total of Empire, Activity and Battle Score

Empire Score Categories (Player)

• Level = Commander Level
• Stations = Total number of Stations
• Claim = Total number of unique claimed hexes
• Navy Points = Total number of ships built (Light/heavy/capital differ in value)
• Building Points = Total amount of building points from all buildings and outposts, previously referred to as Influence

Activity Score Categories (Player)

• Achievements = Total number of completed achievements
• Loot = Total amount of resources gained from raiding
• Missions = Total number of missions completed (Level 1/2/3/4/5 missions differ in value)
• Harvest = Total amount of resources gained from harvesting solar flares
• Augment = Total amount of successful outpost augments

Battle Score Categories (Player)

• Attack = Total damage inflicted against ships while attacking (Includes damage against ships while performing sabotage)
• Defense = Total damage inflicted against ships while defending (includes damage against ships while defending against sabotage)
• Destruction = Total number of ships destroyed (Light/heavy/capital ships differ in value)
• Bombing = Total bombing damage inflicted against buildings
• Sabotage = Total damage inflicted against stations and outposts while sabotaging

Alliance Ranking Categories

• Claim = Total number of unique claimed hexes, counts towards Territorial Victory
• Dyson Level = Level of this alliance’s Dyson Sphere, counts towards Dyson Victory
• Victory Points = Total amount of victory points gained from mysterious and enigmatic mechanisms, counts towards Strategic Victory
• Game Score = Total Game Score of all members

Sector Ranking Categories

• Claim = Total number of unique claimed hexes, counts towards Territorial Victory
• Dyson Level = Level of this alliance’s Dyson Sphere, counts towards Dyson Victory
• Victory Points = Total amount of victory points gained from mysterious and enigmatic mechanisms, counts towards Strategic Victory
• Game Score = Total Game Score of all member alliances

Excited? The reworked politics panel and many more features are coming with the Starborne: Dissidence Update on October 1st.

If you have any questions or feedback, let us know in the UI_UX channel on the official Starborne Discord!