Starborne Politics Panel

As we near the release date for the Starborne: Dissidence Update, I thought I’d 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 I’m really happy to share some insight into the anticipated upgrade.

UI/UX Design Process in Starborne

UI (User Interface) and UX (User Experience) are design disciplines you’ll find at most software companies, and game development is no different. If game design determines how a feature works, UX design determines how users (you) actually interact with that feature, and UI design determines how that interaction (mostly menus in our case) looks. 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 rather 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?

Creating 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(tm) 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. This also intrinsically leads to more consistent UIs as “Short Header with Filtering Options” will always look and behave like “Short Header with Filtering Options” for players.

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 I won’t be able to discuss here, such as UI scaling, user testing, ensuring platform compatibility and developing functional prototypes, but I hope this gave you 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 I don’t doubt 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 won’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. Personally, I’m really excited to see what kind of wacky servers we can launch that turn the classic Starborne experience on its head once in a while.

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!

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 Starborne Discord!

Images © Solid Clouds ehf. 2019 – 2020. Panel put together by these fine people:

• Kieran Kelly
• Bergrós Þorsteinsdóttir
• Marinó Vilhjálmsson
• Jóhann Sigurðsson
• Robert Adloff
• Þorgeir Karlsson