Star Citizen
Keybind UI Redesign
UI/UX Design
This project is a UI/UX redesign of Star Citizen's Key Binding screen.
A solo project focused on Figma prototyping and UI design practice.
Through user research and iterative design, the project explores improvements in information structure, navigation, and visual feedback.
Information
Role
UI Designer
Date
09/2025 ~ 12/2025
Tools
Tools: Microsoft Excel, Microsoft Whiteboard, Figma
Project Type & Team
Academic Project, Solo Project, Figma Practice
Location
DigiPen Institute of Technology, Redmond, WA,
United States
.png)
Process Overview
- SC Keybind UI Redesign
UI/UX Design
As the sole designer on this project, I analyzed and redesigned the Key Binding screen of Star Citizen.
I identified core pain points through user surveys. The original screen crammed all bindings into a single view with no hierarchy, no search functionality, and low visual clarity. These issues made the UI difficult to navigate and tough for new players to learn.
I proposed and iterated on solutions across three problem areas. Information overload, lack of discoverability, and missing structural hierarchy. The redesign introduced tabbed categorization, a search-and-filter system, key profile support, and accessibility for miscellaneous settings via an Advanced menu.
In a follow-up pivot, I layered in situational visual feedback. Color-coded states for key conflicts, unassigned bindings, hover, and focus.
Below is a step-by-step breakdown of the
Star Citizen Keybind UI Redesign.
Work Process
Analyse & Research
I conducted user surveys to identify pain points in the original Key Binding screen. The research consistently pointed to low visual clarity, lack of navigational structure, and information overload as core issues.
From the start, I focused on understanding how players actually interact with keybinding menus. What they look for first, where they get lost, and what frustrates them most. This survey shaped the redesign's direction toward progressive disclosure and categorized navigation with access to miscellaneous settings.
I also explored existing keybinding UIs in other complex games to establish a baseline for usability standards and identify patterns worth adopting or improving.
Problem Statement
I identified three core problems through user research and analysis of the existing Key Binding screen.
First, the screen attempted to display all bindings at once in a single view, with small and tightly packed text. This made it difficult for players to read. New players in particular struggled to find even basic, essential controls.
Second, there was no search or filtering functionality. Players had no efficient way to locate specific bindings, forcing them to scan through dense lists manually.
Third, the UI had no clear structure. The original screen listed the key binding info without any grouping or categories, so players had no way to tell what belonged where.
These problems compounded into a single issue.
The Key Binding screen delivered information, but there's a difficulty in providing actual guidance to the player.
Solution & Prototype Mockup
To address each problem, I designed a set of solutions and built them into a Figma prototype.
For information overload, I restructured the layout to show only essential bindings first, with advanced options tucked into a separate menu. I also increased text size and spacing to improve readability across the board, tying them into a single key per single list item.
For discoverability, I added a search bar and a filter system so players could quickly locate specific bindings by keyword or control. I also designed a key profile feature that lets players save and load their own binding presets.
For structural clarity, I introduced tab-based navigation that groups bindings into major categories such as General, Player Movement, and Ship Controls. This improvement gave the screen a clear hierarchical structure that players could follow without guessing.
Pivot Update & Polished Mockup
After the initial redesign, I pivoted the project's focus toward situational visual feedback, moving the UI from a static list to something that actively communicates its state to the player.
I added color-coded feedback to each row. Red for key conflicts, yellow for unassigned keys, and subtle highlights for hover and focus states. Each conflict and warning also includes a brief description so players can understand the issue at a glance without digging through menus.
A follow-up user study confirmed that these changes made the screen significantly easier to scan and reduced the stress of manually hunting for errors. Users also suggested adding quick-resolve actions for conflicts or unassigned keys, which I noted as a future improvement.
