Functional, Interactive and immersive UI for the video game Star Citizen

Research & Planning

This experience was carefully crafted based on the keybinds that were currently bound by default in game. This meant that each widget in the design needed to adhere to a modular strategy that provided the user with relevant keybinds to their current gameplay mechanic, organized in a way that made sense.

I started by mapping out all of the actions that could be performed by default, and used that as a jumping off point.

Following this, I proceeded to map out the inspiration based on what was currently in game. This involved playing the game, taking screenshots, and using reference photos found in videos to discover the various traits of the UI including size, spacing, font, color and design language.

The first manufacturer I started with was Aegis, so I took cues from their current and future desired functionality on these ships and collected more inspiration.

Design & Prototyping

Once I had a clear understanding of the challenges we faced and the functionality we desired, I started working on a system that allowed us to approach this in modular way, respecting various screen sizes to avoid having to create bespoke interfaces for multiple devices.

Using Apples widget functionality as inspiration, I created a system that allowed us to create "panels" that would show and hide based on the device size.

Once I was happy with the functionality I proceeded to start working on the design.

I followed the approach I took creating the layout system and sizing, and started working on the interface itself.

Each "widget" contained functionality appropriate for that specific gameplay mechanic, while respecting vertical space. They would contain a header with various styles, and then buttons providing the functionality.

While most of the design happened directly in Figma, I soon realized that some of the components were actually easier to design directly in Rive.

Development & Implementation

Once initial designs were completed, I moved over to Rive to implement the designs. Each widget was created responsively, but also required distinct approaches based on the desired functionality for the widget.

Some widgets would need to be broken out into their own components based on the theme, while others could be modified using a simple timeline based approach.

For more complicated widgets this would be key, as each theme has unique animations, though they share the same functionality.

The UI needed to be fully responsive both horizontally and vertically. There were some restrictions, as these were built for both phones and tablets, that meant we needed to have a minimum height value.

Based on both the aspect ratio as well as the device screen size, I created a solution that optimized space while allowing all of the functionality no matter the device.

Once the design and functionality was completed for this single manufacturer, I proceeded to work on the theming functionality to support multiple manufacturer themes.

Themes would be part of the paid subscription, so there had to be a method to allow theming control based off user data from our system. If a user is subscribed, they will be able to modify the theme.

While the setup for this exists in Rive, the functionality is handled in code.