Above is the final result of the in-game screen redesign concept.

Case study – UX/UI Redesign concept

Starborne: Sovereign Space

Introduction

Starborne – Sovereign space, is a new and promising 4x strategy game developed by Solid Clouds. The game is currently in the early alpha stage of development. Therefore, many improvements can be made with regards to UX/UI, this makes it a great opportunity for a case study.

The redesign concept I have made is a case study from my own initiative and is not implemented in the game, nor made in cooperation with the developers at Solid Clouds.

Tools & resources

Affinity Designer
My vector-/pixel tool of choice, for creating concept designs.

3rd party resources
unsplashed.com – Milky Way – Felix Mittermeier (edited to suit the project)

Overview

I will begin this case study with, showing the first three screens from the game (launcher, main menu, in-game). I will discuss my general mindset regarding the screens and adress the problems I find with the current design. After each identified problem I will present a solution and finally at the the end of each section you will find a rendered solution I have made to solve the problems.

At the end, I will show before and after pictures.

Original screens

The launcher
Above is the original launcher in its current form, at the time when I performed this case study.

Main menu
Above is the main menu in its original form, at the time when I performed this case study.

Server list
Above is the server list in its original form, at the time when I performed this case study.

In-game screen
Above is the in-game screen in its original form, at the time when I performed this case study.

The Launcher

First of all, let’s talk about the purpose of having a launcher from a UX perspective. The launcher is the first thing that meets the user each time they launch the application, this makes it a prime opportunity to communicate the most important messages to the user.

The launcher is also a great opportunity to promote community content, discounts, news, etc.

Problem – No UX-purpose

The current launcher doesn’t serve a UX-purpose, it only adds extra mouse clicks for no apparent reason.

The launcher has three buttons. In the current form all three buttons are unnecessary, in its current form the game should look for updates automatically and if there is no new version, the game should just launch.

The only reason for the launcher in its current form is the button to take us to the changelog, so why not make it displayed by default?

Solution

To give the Starborne launcher a user experience purpose, I will use the launcher, as a way to communicate with the user and to guide the user to external content. For example, the game tutorials are on Youtube, the community is on Discord, etc. This game has a steep learning curve, so new users need to know where they can find help and tutorials, it is of such great importance that it should belong in the launcher so they can’t miss it.

I want to keep links to 3rd party apps in the launcher to prevent breaking immersion.

Problem – Missed opportunity of communication

The most serious problem with this launcher is that it doesn’t communicate with the user. It is a missed opportunity of communication. When you have an opportunity to communicate with the user without having to give something up, you must seize it!

Solution

The last thing I want to include in the launcher is promotion of community content. Help promote the streamers that help the game gain exposure, popularity and traction. This is super important for a new game that aims to gain a strong community. Therefore I added a Featured-section to the launcher.

Problem – Inconcistency
The minimise- and exit symbols have different weight.

Solution

I have fixed the UI issue with different weights of the minimise- and exit symbols.

Rendered solution

Problems solved:

• UX-purpose – Added
• User communication – Added
• Inconsistency – Fixed

Main menu

After launching the game, the user face the Login screen, here they can also read the latest news. After clicking the login button the user is transfered to the server selection screen, where they one click later can be transfered to the actual game environment.

Problem – Elements belonging to the launcher
News section and login screen doesn’t belong in-game (with the exception for developers that need to switch accounts). They belong in the launcher.

Solution

The login screen belong in the launcher, there is no reason to have it accessible in-game since the user is not allowed to have multiple accounts. We want the user to notice the information displayed in the launcher so we want to add clicks to the launcher, not in the main menu.

Problem – Immersion breaking elements
This is an extension of the previous problem. Having the login screen in game, will force the user to break immersion by switching between the game environment and the users desktop environment. As soon as the user has launched the game I want to avoid breaking immersion completely.

Solution

I have moved the in-game login screen to the launcher. This removed the previous first in-game screen completely. It also makes the user account creation process more streamlined since you will have to verify your account through an email link.  For the same reason, if the user has forgotten his/her password, they should find out in the launcher.

Problem – Developer elements visible for all users
The log out button should only be visible for developers. It is a UX problem since it sends mixed signals to the users and encourages the use of multiple accounts.

Solution

A log out button makes no sense, since smurf accounts aren’t allowed. If it is intended for the devs, then show it only to the devs after they are logged in (yet another reason to have the login screen in the launcher). Therefore, I have removed it.

Problem – Unnecessary clicks
There is no point in letting the user click through several screens before entering the in-game-environment.

Solution

The first screen the user meets after launching the game should include,  server selection, the game settings, and an easily identified one-click exit button. No need to complicate things by showing more than these elements. What I created is basically, a server selection screen with the possibility to access the settings or exit the application.

Problem – Unclear text
The news text needs more spacing and should rest upon a less chaotic background.

Solution

This problem has been resolved by making a clear and easy to read launcher.

Rendered solution

Problems solved:

• Elements not belonging – Moved
• Immersion breaking elements – Fixed
• Developer elements – Hidden
• Unnecessary clicks  – Removed
• Unclear text – Removed

In-game screen

Problem – Information placement
Resources, stat points and other elements should be displayed in a more intuitive manner. Data unique to the selected station should be displayed together and located in one area of the screen (for example, the resources directly to the right of the chat window and the data in the top right corner).

To build ships and structures, you click the Shipyard or Buildings buttons. A new window pops up and here you can spend the resources available at the station to build ships and structures. The problem is that the available resources are not displayed in an intuitive manner, in fact, when you build ships your resources are not shown at all, they are hidden behind the window where you build the ships. Click the images below to see what I mean.

Solution

To solve these problems, I have decided to make a fixed bottom- and a top row that will always be displayed to the user. This solves the problems with the resource management.

I have decided to put the active station at the bottom, the resources available and the rate of gaining new resources is now easy to track and are available at all times.

The data regarding the user itself are at the top and the relevant information is displayed there at all times.

Problem – Hard to read UI
The white text blends too much with the background. The UI need more distinct dark backgrounds between the white text and the background to make it easier for the eye to read.

Solution

In the center of the rendered solution below, you will see how I have made the station-owner-display more separated from the background. I have given it a darker semi-transparent background and added a blur effect on the background to make it easier to read.

Problem – Hard to read chat window
Chat window is too transparent, the text blends in too much with the background.

Solution

I have given the chat window, a darker semi-transparent background and added a blur effect to make it easier to read.

Problem – Hard to read station properties
Fleet-/Hangars-/Visitors-/Cards-/Tactics sections suffered from the same problems as the rest of the UI. It needs to be more separated from the background to be clear to interpret.

Solution

I have applied the same solution here, adding a dark semi-transparent background with a blur effect solves the issue. You can see a demonstration for the Cards section in the rendered solution below.

Rendered solution

Problems solved:

• Information placement – Fixed
• Hard to read UI – Fixed
• Hard to read chat window – Fixed
• Hard to read station properties – Fixed

Before – After

Before – Launcher

Above is the original launcher.

After – Launcher

Above is the final result of the re-designed launcher.

Before – Main menu

Above is the original main menu.

After – Main menu

Above is the final result of the re-designed launcher.

Before – In-game

Above is the original in-game screen.

After – In-game

Above is the final result of the re-designed launcher.

All after images