Menu

Designing A Game Interface

A design test within the frames of user experience design and graphical user interface practices rendered as part of a recruitment process.

All credits of the concept arts used for the following mockups goes to its respective owners.

UI design concept game intro screen

The Problem

To tackle the frictions in the design brief, I articulated the most critical features into design opportunities for ideation and brainstorming.

How might we design an interface with a large quantity of 'slots' without losing the player in information?

How much of the information should the player be able to see? And when should what be in focus?

Design Process and Methods

Mood Board

I began by accumulating inspirational material into a mood board. This approach allowed me to ground early design choices on existing patterns and solutions.

Concept Sketching / Wireframing

For this particular test, I used the simplest means of paper and pen to capture ideas I had floating. Two rough sketches were made whereas the first one was semi-developed in high fidelity. While conceptualizing it, I stumbled upon the obstacle of how to item-listing.

This forced me to revise the design and eventually divide the whole experience into multiple screens. This is where the second sketch came to play, where both collectively later formed the outcome.

Auto Critique

Concept development was done in light of the approach of auto-critique. An approach I'm familiar with since before that means to criticize ones’ work, to use ones’ involvement as a means to generate knowledge. By critiquing my own work whilst designing it, I purposefully analyze it to understand its meaning and significance.

How does the design present itself? How does it affect me? What do I feel? Such a notion allows me to pinpoint why a particular concept is significant whilst others are not. And in what ways can it be reassessed.

Expert Critique

To probe further inspiration I reached out to ve people involved in the gaming sphere as well as with background in interaction design. Their feedback was taken into account throughout the latter iterations to drive the design forward and evaluate the outcome.

Screen ─ Overview

The "OVERVIEW" is the first screen the player encounters in their experience of customizing the six spacecrafts in the game. A blurred background creates a contrast that conveys that the ship cards are distinctive elements.

The placeholder for "CUSTOMIZE YOUR SPACECRAFT" in combination with the visuality shared between the ship cards and the bottom buttons signifies that the ship cards may be engaged with. Once a player clicks on one of the ship cards, it scales to signal importance, a higher rank in composition, and foremost focus the player’s attention accordingly. For further emphasis, a border stroke is conveyed. The remaining unselected cards are deranked in composition, semi-opaqued for further contrast.

 

The player is presented with a narrative element surrounding the selected ship as well as the stats. Here, the player has the option to either move forward and customize the selected ship or load existing templates if such exists. In this particular scenario, the player has selected the frigate spacecraft for the first time and is about to continue and customize the ship. This overview is designed in light of minimalism and storytelling.

UI design concept game overview screen

Screen ─ Detailed Overview

In this screen, the player has the ability to modify the frigate spacecraft pre-set with stock items for own preferences. To ease and avoid player frustration, only the lower part of the screen changes once the player decides to attach an item(s).

"CUSTOM TEMPLATE"

Complement with a text cursor, the line under "CUSTOM TEMPLATE" affords a subtle yet common text box. The player has the option to name their template, and in doing so, any changes to the spacecraft are automatically saved.

"ARMORY"

The left text box is a storytelling element that engages and nurtures a relationship with the spacecraft. The content in this placeholder changes as the player hovers on the slots below.

Slots

Each group form a focal point that gives a sense of the relationship between grouped slots. Each slot is presented with a + symbol to afford the possibility of alteration or adding. Attached items display an icon and correspond- ing item level. Available slots are displayed in semi-opaque with a thin border stroke whilst non-available slots are shown in semi-transparency.

On hover over a slot, it is highlighted with an additional thin border stroke around it. On click, the lower part of the screen transitions, upholding consistency, to what can be seen in the next screen. This design of slots, by grouping, tackles the large quantity of slots without introducing additional steps for the player. Accessibility allows for close reach of the basic and critical features.

Stats

The stats are positioned in close proximity to the 3D placeholder to suggest a relation between those two elements. The design of the stats builds upon existing designs that allow for familiarity and readability.

UI design concept game detailed overview screen

Screen ─ Items Overview

The left-textbox placeholder is re-utilized to display additional information for that particular item or its belonging category. The grouped slots remain at the bottom screen with the player being presented with a carousel list. Items are grouped (ballistic, plasma, laser, etc).

 

Each item has a hover-state, displaying a tooltip above the item slot. Additionally, stats are altered on hover to display changes to the spacecraft in relation to the item. On click, the button at the bottom enables: allowing the player to attach the selected item to the spacecraft.

UI design concept game items overview screen

Screen ─ Dialogue

If changes are made to the spacecraft and the player has not named their template: If the player clicks on "BACK", a confirmation dialogue is shown. On Discard, the player returns back to the spacecraft overviews. If Save template, the player remains on the screen. This aids error prevention, helping the players to avoid making mistakes.

UI design concept game dialogue screen

UI design concept game flowchart

UI design concept game mood board

UI design concept game mood board

UI design concept game sketch

UI design concept game sketch

UI design concept game sketch

Reflection

An interesting and challenging design brief that presents two problems or frictions that may be solved in numerous ways. What I believe progressed as planned was my strategy to tackle this design test as well as to work systematically from start to finish. Each iteration built upon the next.

What I would revise would be the research part of the design process. Research into the values of the gaming studio and the patterns in style guides could have yielded additional inspirational material.

 

My vision of the game described in the brief was a third-person strategic and tactical sci- game in a distant galaxy. With that, I proceeded to visualize a futuristic, minimalistic yet modern user interface graphics that would elevate the narrative and familiarize the player with modern trends in the gaming industry.