# Role

Act as a world-class product designer, interaction designer, information visualization specialist, and UI/UX art director specializing in complex real-time systems.

You are designing a **next-generation multi-UAV ground control suite (GCS)** for professional operators.

The product controls and coordinates potentially **50+ UAVs with approximately 5 human operators**, while allowing multiple GCS workstations to connect simultaneously to the same shared mission.

The goal is NOT to make a "military-looking dashboard."

The goal is to create a **professional, extremely usable, high-performance mission-control interface inspired by the interaction paradigms of modern RTS games**, while maintaining the clarity, seriousness, safety, auditability, and information hierarchy expected from real aviation software.

Create high-fidelity visual design concepts/mockups for this system.

---

# CORE PRODUCT IDEA

The central design philosophy is:

> **Do not make the operator control 50 vehicles. Make the operator control 5 intentions, and let the system translate those intentions into coordinated vehicle behavior.**

The system should abstract complexity.

Instead of forcing operators to individually control:

* UAV-001
* UAV-002
* UAV-003
* ...
* UAV-050

the system should organize them into:

* Missions
* Tasks
* Groups
* Roles
* Vehicles
* Operators
* Constraints
* Commands
* Events

The user should primarily interact with **groups and tasks**, while individual UAV control is available when needed.

Think:

**Mission → Tasks → Groups → Vehicles**

rather than:

**Vehicle → Vehicle → Vehicle → Vehicle**

---

# IMPORTANT DESIGN INSPIRATIONS

Take interaction inspiration from:

### Supreme Commander

Study:

* strategic zoom
* massive-scale unit management
* selection of many units
* control groups
* strategic vs tactical views
* command queues
* visual aggregation

### StarCraft II

Study:

* drag selection
* control groups
* contextual commands
* command queues
* extremely fast interaction
* selection feedback
* unit grouping

### Company of Heroes

Study:

* squad abstraction
* unit cards
* contextual actions
* tactical map
* clear unit state

### Homeworld

Study:

* 3D spatial awareness
* formations
* fleet relationships
* spatial visualization

### Total War

Study:

* army/group abstraction
* unit cards
* strategic/tactical hierarchy
* large numbers of units represented compactly

### Factorio

Study:

* automation
* system-level thinking
* minimizing repetitive manual actions
* letting the user specify desired outcomes rather than repeatedly operating individual machines

Do NOT copy their visual aesthetics.

Copy their **interaction principles** and improve them for a professional real-world system.

---

# DESIGN PHILOSOPHY

The interface should feel like:

**Google Docs collaboration + modern RTS + aviation mission planning + professional command-and-control software**

It should NOT feel like:

* a video game HUD
* a traditional military dashboard overloaded with tiny widgets
* a cockpit instrument panel
* a sci-fi spaceship interface
* a generic admin dashboard
* a cryptocurrency trading terminal

Avoid excessive neon green, glowing borders, unnecessary radar graphics, decorative HUD elements, fake holograms, excessive gradients, or cyberpunk aesthetics.

The interface must feel:

* modern
* professional
* calm
* precise
* information-dense
* spatial
* responsive
* trustworthy
* highly usable
* operationally serious

---

# PRIMARY USER SCENARIO

Create the visual concept around this scenario:

There are:

**5 operators**

controlling:

**50 UAVs**

inside one shared mission.

Example distribution:

ALPHA

* 12 ISR UAVs
* Area Search task
* Operator: Alex
* Status: GREEN

BRAVO

* 10 ISR UAVs
* Route Recon task
* Operator: Sara
* Status: GREEN

CHARLIE

* 8 Relay UAVs
* Communications task
* Operator: David
* Status: GREEN

DELTA

* 12 mixed UAVs
* Reserve / support
* Operator: Maria
* Status: AMBER

RESERVE

* 8 UAVs
* Available
* Operator: Ken
* Status: GREEN

The operator should NOT need to constantly look at all 50 aircraft individually.

---

# CENTRAL UI CONCEPT: SEMANTIC ZOOM

This is one of the most important design requirements.

The interface should support multiple levels of abstraction.

## LEVEL 1 — STRATEGIC

At maximum zoom-out, show:

* overall operating area
* mission boundaries
* 5 groups
* task areas
* major routes
* alerts
* fleet health
* operator activity

A group should appear as an aggregated entity.

Example:

ALPHA
12 UAV
SEARCH
82%
GREEN

Do not show 12 individual icons unless the user zooms in or explicitly expands the group.

---

## LEVEL 2 — OPERATIONAL

When zooming into ALPHA:

show:

* individual UAV positions
* group formation
* current task
* planned route
* group health
* task progress
* coverage
* vehicle availability

The user can see how the group is composed.

---

## LEVEL 3 — TACTICAL

When selecting a particular UAV:

show:

* position
* altitude
* heading
* velocity
* battery/energy state
* navigation status
* communication state
* current task
* next action
* alerts
* payload state

Do not permanently display all of these values.

Use contextual progressive disclosure.

---

## LEVEL 4 — ENGINEERING

Only when explicitly requested:

show:

* flight controller status
* sensors
* actuators
* logs
* configuration
* detailed telemetry
* parameters

Engineering information should not overwhelm the operational view.

---

# MAIN SCREEN

Create a high-fidelity desktop application screen at approximately:

**3840 × 2160 visual composition**

with a 16:9 aspect ratio.

The primary screen should be a **large interactive geospatial map**.

Use a realistic but fictional operating environment.

Do not use real military locations.

Use fictional terrain:

* coast
* hills
* urban area
* open land
* restricted zones
* task areas
* roads
* rivers

The map should occupy approximately **70–80% of the screen**.

---

# TOP BAR

Create a clean top command/status bar.

Include:

MISSION: ALPHA-17

Fleet:
48 / 50 ACTIVE

Tasks:
7 ACTIVE

Alerts:
3

Operators:
5 ONLINE

Network:
HEALTHY

Mission time:
01:42:17

At the far right show the currently logged-in operator:

ALEX
MISSION OPERATOR

Do not make the top bar visually dominant.

---

# LEFT SIDEBAR — MISSION STRUCTURE

Create a collapsible left sidebar.

Show:

MISSION

TASKS

FLEET

GROUPS

OPERATORS

ALERTS

HISTORY

Example:

GROUPS

ALPHA
12 UAV
SEARCH
● GREEN

BRAVO
10 UAV
RECON
● GREEN

CHARLIE
8 UAV
RELAY
● GREEN

DELTA
12 UAV
RESERVE
● AMBER

RESERVE
8 UAV
AVAILABLE
● GREEN

Use compact cards.

Each group should have:

* group name
* number of vehicles
* task
* health
* operator
* tiny status indicator

The sidebar should not feel like a conventional file tree.

It should feel like an RTS "army/group control panel."

---

# MAP VISUALIZATION

The map is the primary workspace.

Show:

* 5 UAV groups
* aggregated group markers
* individual UAVs for the currently selected group
* flight paths
* future planned routes
* task areas
* geofences
* restricted areas
* communication coverage
* points of interest
* alerts

Use subtle colors.

Suggested palette:

Background/map:

* dark charcoal
* desaturated navy
* muted terrain colors

Primary friendly/active:

* blue

Selected:

* bright cyan/blue

Healthy:

* green

Warning:

* amber

Critical:

* red

Planning/edit state:

* violet/purple

Avoid making everything colorful.

Color should encode meaning.

---

# GROUP VISUALIZATION

When ALPHA is selected:

Show 12 UAVs.

Represent them as small directional aircraft icons.

Each aircraft should have:

* heading indicator
* subtle velocity vector
* tiny status indicator

Show their planned paths using thin translucent lines.

Show the group boundary or formation using a subtle translucent shape.

Example visual concept:

ALPHA

12 aircraft

AREA SEARCH

82% COMPLETE

The group should visually read as ONE coordinated entity rather than 12 unrelated objects.

---

# GROUP CARD

Create a contextual bottom panel when ALPHA is selected.

Example:

ALPHA

12 VEHICLES

AREA SEARCH

82% COMPLETE

OPERATOR
ALEX

STATUS
GREEN

CURRENT
SEARCH AREA NORTH

NEXT
RETURN

Then show contextual actions:

TASK
MOVE
HOLD
GROUP
SPLIT
TRANSFER
DETAILS

Use large, easily clickable controls.

Do not create dozens of tiny buttons.

---

# SMART SELECTION

Demonstrate an RTS-style drag selection.

Show a translucent selection rectangle over an area of the map.

Inside it are several UAVs.

At the bottom:

27 VEHICLES SELECTED

FILTER:

ISR 14

RELAY 7

TRANSPORT 6

Then show:

[ CREATE GROUP ]

[ ASSIGN TASK ]

[ ADD TO GROUP ]

The UI should make it obvious that the operator can manipulate many vehicles simultaneously.

---

# SMART FILTER / QUERY INTERFACE

Create a visual example of intelligent fleet selection.

Example command:

"Select available ISR aircraft within 20 km of Task Bravo with more than 60% energy."

Represent the query as structured chips:

TYPE
ISR

AVAILABILITY
AVAILABLE

DISTANCE
< 20 KM

ENERGY

> 60%

TASK
NONE

Result:

8 VEHICLES SELECTED

The design should feel like a powerful professional filtering system, not a developer query interface.

---

# TASK OBJECT

Create a visual card representing a mission task.

Example:

TASK-143

AREA SEARCH

Priority:
HIGH

Area:
Northern Sector

Required:
4 UAV

Assigned:
ALPHA / 4

Progress:
63%

Health:
GREEN

Estimated completion:
18 MIN

Make this task visually connect to its geographical area on the map.

The operator should be able to select the task and immediately understand:

* what needs to happen
* where
* with what resources
* who owns it
* how far it has progressed
* whether there is a problem

---

# COMMAND QUEUE

Create a visual command/task sequence for ALPHA.

Show:

TRANSIT
↓
SEARCH AREA A
↓
LOITER
↓
RETURN
↓
RECHARGE
↓
SEARCH AREA B

Represent this as a clean horizontal or vertical workflow.

Allow drag-and-drop reordering.

The design should communicate that operators are specifying **intent**, not manually flying every UAV.

---

# COMMAND PREVIEW

Create a modal or side panel that appears before executing a high-level action.

Example:

ASSIGN TASK

6 VEHICLES SELECTED

Estimated completion:
18 min

Energy reserve:
OK

Route conflicts:
NONE

Geofence conflicts:
NONE

Vehicle compatibility:
6 / 6

Communication:
GOOD

Potential issue:
1 aircraft may require reassignment

Buttons:

CANCEL

PREVIEW

CONFIRM

The design should emphasize that the system validates the intended command before execution.

---

# MULTI-OPERATOR COLLABORATION

Create a second visual state showing five operators connected to the same mission.

Represent them subtly:

ALEX
Commanding ALPHA

SARA
Commanding BRAVO

DAVID
Planning

MARIA
Monitoring

KEN
Engineering

Show that multiple users can view the same map simultaneously.

When Alex selects ALPHA, display:

COMMAND AUTHORITY
ALEX

Other operators can see ALPHA but cannot accidentally issue conflicting commands.

---

# COMMAND LEASE

Create a visual interaction for temporary command authority.

Example:

ALPHA

COMMAND LEASE
ALEX

Expires:
02:34

Observers:
SARA
DAVID

Button:

REQUEST CONTROL

When another operator requests control:

OPERATOR B REQUESTS COMMAND

Reason:
Emergency intervention

Buttons:

TRANSFER CONTROL

DENY

This should visually communicate shared awareness and explicit authority.

---

# ATTENTION MANAGEMENT

Create a prominent but restrained "ATTENTION" area.

Example:

ATTENTION

🔴 UAV-27
Navigation degraded

🟠 ALPHA
Task behind schedule

🟠 BRAVO
Approaching constraint

Then show:

47 VEHICLES NOMINAL

The idea is that the system should suppress normal information and surface exceptions.

Do not create a wall of alerts.

---

# FAILURE / REASSIGNMENT CONCEPT

Create a visual state where one aircraft becomes unavailable.

Example:

UAV-03
UNAVAILABLE

The system automatically identifies potential replacements.

Show:

TASK:
ALPHA SEARCH

REQUIRED:
4 VEHICLES

CURRENT:
3 / 4

RECOMMENDED REPLACEMENTS:

UAV-19
READY

UAV-27
READY

UAV-31
READY

The design should communicate that the mission system can reason about resources rather than forcing the operator to rebuild the mission manually.

---

# STRATEGIC ZOOM CONCEPT

Create THREE visual panels side by side demonstrating the same map at different abstraction levels.

## PANEL A — STRATEGIC

Show:

5 groups
7 tasks
3 alerts

Only aggregated group markers.

## PANEL B — OPERATIONAL

Zoom into ALPHA.

Show:

12 individual UAVs
formation
task area
route
coverage

## PANEL C — VEHICLE

Zoom into UAV-07.

Show:

position
heading
energy
navigation
communication
payload
task

Make it visually obvious that the UI becomes more detailed as the user zooms in.

---

# INFORMATION HIERARCHY

The visual hierarchy should follow:

1. What is happening?
2. What needs my attention?
3. What is the mission doing?
4. What is each group doing?
5. What does this particular vehicle need?
6. Engineering details only when requested.

Do NOT invert this hierarchy.

---

# VISUAL STYLE

Use a modern professional dark interface.

Preferred aesthetic:

* dark graphite
* deep navy
* muted blue-gray
* restrained cyan
* subtle green
* amber
* red only for critical states
* occasional violet for planning/editing state

Use:

* soft shadows
* very subtle borders
* restrained transparency
* clean typography
* generous spacing
* clear grouping
* strong alignment
* high contrast

Avoid:

* excessive glow
* cyberpunk
* sci-fi holograms
* decorative radar screens
* fake military insignia
* unnecessary gradients
* excessive rounded cards
* tiny unreadable text
* excessive information density
* ornamental UI

The result should look like a product that could actually be used for hours by professional operators.

---

# TYPOGRAPHY

Use a modern highly legible sans-serif.

Possible visual direction:

Inter / SF Pro / IBM Plex Sans / similar.

Use typography hierarchy:

Large:
Mission / major group

Medium:
Task / group name

Small:
Telemetry / metadata

Monospaced type may be used sparingly for:

* IDs
* timestamps
* numeric telemetry
* coordinates

Do not make the whole interface monospace.

---

# ICONOGRAPHY

Use simple geometric icons.

UAV icons should be directional.

Groups should have an aggregated visual identity.

Tasks should have distinct but restrained icons.

Alerts should be unmistakable.

Avoid decorative military iconography.

---

# INTERACTION STATES TO VISUALIZE

Produce visual examples of all of the following:

1. Nothing selected
2. One group selected
3. Multiple groups selected
4. Individual UAV selected
5. Drag-selecting multiple UAVs
6. Task selected
7. Command preview
8. Command queue
9. Operator requesting command authority
10. Operator transferring command authority
11. UAV failure
12. Automatic replacement recommendation
13. Strategic zoom
14. Operational zoom
15. Vehicle-level zoom
16. Alert escalation
17. Collaborative mission planning

---

# CRITICAL UX PRINCIPLE

The system must always answer these questions visually:

### WHAT?

What is happening?

### WHERE?

Where is it happening?

### WHO?

Who/what is responsible?

### WHY?

Why is the system doing this?

### NEXT?

What will happen next?

### WHAT IF?

What happens if something fails?

### WHO CAN CHANGE IT?

Who currently has command authority?

These should be understandable within seconds.

---

# REAL-TIME FEEL

The interface should look alive.

Show subtle indicators of real-time state:

* moving aircraft
* updating progress
* changing task status
* operator presence
* live connection status
* changing fleet counts
* recent events

But do not make the interface visually chaotic.

The system should feel like a living operational environment.

---

# EVENT / HISTORY PANEL

Create a chronological event stream.

Example:

14:32:08
ALEX
Assigned ALPHA to TASK-143

14:32:14
SYSTEM
Route validated

14:32:21
SARA
Updated BRAVO search area

14:33:02
SYSTEM
UAV-03 unavailable

14:33:04
SYSTEM
Recommended UAV-19 as replacement

14:33:17
ALEX
Accepted replacement

Make the history auditable and easy to understand.

---

# DESIGN THE UI FOR MULTIPLE MONITOR SIZES

The application should support:

* laptop
* 27-inch monitor
* ultrawide monitor
* 4K command-center display

Do not depend on tiny controls.

The interface should gracefully adapt.

On smaller displays, secondary panels collapse.

On larger displays, additional information can appear without making the main map smaller.

---

# CREATE A DESIGN SYSTEM

After creating the main screen, show a small design-system panel containing:

* colors
* typography
* buttons
* status indicators
* group cards
* task cards
* UAV icons
* alert states
* operator presence indicators
* command authority indicators

This should look like a real product design system.

---

# IMPORTANT: SHOW REAL UI, NOT A CONCEPT ART SCREEN

The output should look like a **real, implementable professional software interface**.

Do not generate a cinematic image of a command center.

Do not generate people sitting in front of screens.

Do not generate a futuristic holographic battlefield.

Generate the actual application UI.

The viewer should be able to imagine a software engineer implementing it.

---

# VISUAL OUTPUT

Create a polished high-fidelity visual presentation containing:

### HERO SCREEN

Full 16:9 multi-UAV mission control interface.

### SCREEN 2

Strategic zoom → operational zoom → vehicle zoom.

### SCREEN 3

Multi-operator collaborative mission view.

### SCREEN 4

Task creation + resource allocation + command preview.

### SCREEN 5

Failure → automatic reassignment → operator confirmation.

### SCREEN 6

Command queue / mission workflow.

### SCREEN 7

Design system.

Use consistent visual language across every screen.

---

# FINAL DESIGN TEST

Before finalizing the visuals, mentally test the design against this scenario:

Five operators are simultaneously managing fifty UAVs.

Operator A manages a 12-UAV search group.

Operator B manages a 10-UAV reconnaissance group.

Operator C manages communications.

Operator D is planning future tasks.

Operator E is monitoring system health.

One UAV fails.

A new task arrives.

Two groups need to be reorganized.

An operator needs to temporarily transfer control of a group.

The system needs to continue operating without everyone fighting over the same controls.

The UI should make this scenario feel manageable rather than overwhelming.

The final visual design should communicate:

> **One shared mission.**
>
> **Many operators.**
>
> **Many vehicles.**
>
> **One coherent operational picture.**

Prioritize cognitive ergonomics, hierarchy, semantic zoom, group abstraction, collaborative authority, exception management, and high-level intent over decorative aesthetics.

### One thing I'd add to the Gemini workflow

Don't stop at the first generated dashboard. Ask Gemini to produce **separate iterations around specific interaction problems**.

For example, after the master prompt, give it:

> "Now forget the visual styling and focus exclusively on the interaction design for managing 50 UAVs with 5 operators. Produce 5 radically different UI concepts for selection, grouping, command authority, task assignment, and strategic zoom. Do not optimize for visual beauty yet. Optimize for reducing operator cognitive load."

Then another:

> "Take concept #3 and redesign it as if Supreme Commander, Google Docs collaborative editing, and a professional aviation mission planner had been combined. Show exactly how five operators can simultaneously manipulate different groups without command conflicts."

And finally:

> "Now create a polished production-quality visual design based on this interaction model. Remove anything that looks like a video game HUD. Keep the RTS interaction model but make the visual language appropriate for professional aviation software."

That **three-stage process—interaction → information architecture → visual design** will likely give you much better results than asking Gemini to jump directly to a pretty GCS screenshot.