Wall -E
UAV UI Design


Wall -E
UAV UI Design

Initially, our goal was to design a drone capable of moving on the ground. However, after conducting research and brainstorming, we decided to create a drone that not only moves on the ground, similar to WALL-E, but can also fly like EVE from the movie. Instead of focusing solely on one function, we merged both capabilities for a more versatile design.

Team

5 Ux designer

EXPERTISE

UX/
UI Design

Duration

4 months

Team

5 UX designers

EXPERTISE

UX/UI Design

Duration

4 months

The Process

Brainstorming and Research

We began with comprehensive research to understand UAV operations, translating insights into actionable design principles.


Overview and Framework Creation

We developed a structured approach, focusing on an overview, idea gathering, display concepts, and detailed design strategies using Miro.


Roles and Responsibilities

We identified specific roles and responsibilities for UV operators, including pilots, navigators, and payload operators, clarifying their interaction needs within the workspace.


Design Principles for Displays

We based our displays of the UI on these key principles:

  • Salience Compatibility: Important information pops out instantly.

  • Legibility: Clear text and symbols for easy reading.

  • Intuitive Design: Controls that feel natural and easy to use

The anticipated results of the WALL-E UV project include:


  • Enhanced Operational Safety: Advanced 3D terrain mapping and environmental monitoring to detect potential hazards early.

  • Increased Efficiency: Automating complex surveying tasks and enabling faster, real-time monitoring.

  • Improved Data Accuracy and Compliance: Providing more accurate environmental data to support informed decision-making and ensure regulatory compliance.

Our mission involved:


  • Designing ergonomic workstations to enhance comfort.

  • Managing cognitive load on interfaces.

  • Integrating intuitive controls for ease of use.

  • Ensuring efficient collaboration among operators.

  • Adapting the design for various functionalities and future upgrades.

Operators

The Process

Data Collected

Brainstorming and Research


We began with comprehensive research to understand UAV operations, translating insights into actionable design principles.


Overview and Framework Creation

We developed a structured approach, focusing on an overview, idea gathering, display concepts, and detailed design strategies using Miro.


Roles and Responsibilities

We identified specific roles and responsibilities for UV operators, including pilots, navigators, and payload operators, clarifying their interaction needs within the workspace.


Design Principles for Displays

We based our displays of the UI on these key principles:

  • Salience Compatibility: Important information pops out instantly.

  • Legibility: Clear text and symbols for easy reading.

  • Intuitive Design: Controls that feel natural and easy to use

Data Collected

Use Case

The WALL-E UV is designed for comprehensive mining operations, including preliminary surveys, real-time monitoring, and post-mining assessments. It features advanced sensors to detect hazards like leaching gases and terrain instability and is capable of aerial maneuvers in inaccessible areas, ensuring both safety and compliance.


Functionality and Controls

  1. Navigation: Collaborative route planning and updates between pilot and navigator based on real-time data and mission goals.

  2. Sensing: Monitored by the payload operator, who adjusts sensors to optimize data collection, with information displayed in real-time.

  3. Vehicle and Camera Control: Managed by the pilot for precise maneuvering, enhancing safety with remote operations from a ground station.

  4. Vehicle Status and Payload: Joint monitoring by the pilot and payload operator of the UV’s status and payload, with real-time adjustments via management software.


Click here to check our full research

Operators

The anticipated results of the WALL-E UV project include:


  • Enhanced Operational Safety: Advanced 3D terrain mapping and environmental monitoring to detect potential hazards early.

  • Increased Efficiency: Automating complex surveying tasks and enabling faster, real-time monitoring.

  • Improved Data Accuracy and Compliance: Providing more accurate environmental data to support informed decision-making and ensure regulatory compliance.

Our mission involved:


  • Designing ergonomic workstations to enhance comfort.

  • Managing cognitive load on interfaces.

  • Integrating intuitive controls for ease of use.

  • Ensuring efficient collaboration among operators.

  • Adapting the design for various functionalities and future upgrades.

The diagram illustrates the collaboration between three drone control operators:

  • Pilot: Uses primary and secondary displays to monitor aerial/ground modes, collision detection, and battery levels.

  • Navigator: Manages front-facing camera views and 3D displays on the primary display, with navigation and alerts on the secondary display.

  • Payload Operator: Oversees hazards, UV status, and data points, sending alerts and location information to the Navigator.

Information flows between operators to ensure coordinated drone navigation, awareness, and payload management.

Display design

The display design for the WALL-E UV project started with an in-depth analysis of operator needs and interface requirements. Using Figma, we mapped out the display screens for each operator type—pilot, navigator, and payload operator—focusing on optimizing the layout based on design principles tailored to enhance user interaction and efficiency.

Design Principles Used and Rationale

  1. Attention: Ensured critical information captures immediate operator attention by using color-coded warnings and alerts and minimizing resource competition with distinct notification sounds.

  2. Perception: Designed displays to avoid absolute judgment limits by using optimal color codes and redundancy gain, enhancing information legibility through well-placed text and graphics.

  3. Memory: Displayed key flight data constantly and used familiar colors and icons to reduce cognitive load, making information retrieval intuitive and quick.

  4. Mental Model: Aligned with operators' mental models by incorporating pictorial realism with visual elements like altitude lines and directional icons that mimic real-world behaviors.

Control design

After transitioning from display design to control design for the WALL-E UV, we integrated specific principles to enhance usability and operator interaction:

  1. Attention: Designed controls to minimize resource competition, ensuring critical functions like emergency shutoffs are easily accessible and distinguishable.

  2. Perception: Strategically positioned and clearly marked controls to facilitate quick recognition and action.

  3. Memory: Reduced cognitive load by making frequently used settings readily accessible and allowing the system to remember operator preferences.

  4. Mental Model: Aligned the layout and functionality of controls with operators’ mental models, with clear labels and predictable actions matching common usage patterns.

Workstation Chair

Key ergonomic design considerations for the workstation chair includes:

  • Seat Height: Adjustable between 16-21 inches to accommodate different heights.

  • Seat Depth: Allows 2-4 inches between the back of the knees and the seat edge to prevent pressure at the back of the knees.

  • Lumbar Support: Supports the lower back’s natural 'S' shape, reducing stress.

  • Backrest: Adjustable to align with the curve of the spine, providing optimal support.

  • Seat Tilt: Allows for correct pelvis positioning, maintaining a neutral position to prevent posture problems.

  • Armrests: Positioned just below elbows to reduce tension, avoiding increased wrist strain during typing.

  • Monitor Height: Positioned at eye level or lower to prevent neck, shoulder, and upper back pain.

  • Monitor Distance: Adjusted to a comfortable distance to reduce eye strain and fatigue.


Design System

Inter font is our go-to for UAV displays—legible, readable, and optimized for screens. It’s sharp, modern, and easy on the eyes, making it perfect for any resolution and platform.


Color Palette

  • Dark Background (#1E1E1E): Reduces eye strain.

  • Yellow (#FFD100): Warnings/mid-range alerts.

  • Red (#F56E4D): Emergencies/low-range alerts.

  • Green (#2DC859): Normal range indicators.

  • Cyan (#13D3EE): Neutral indicators.

  • Mode Indicators: Blue (#14BAEE) & Orange (#CC7F0B): Differentiate aerial and ground modes.

    Text/Icons:

  • White (#FFFFFF): For dark backgrounds.

  • Black (#000000): For light backgrounds.


Our palette ensures high visibility and reduced eye fatigue, with dynamic badges for quick info at a glance.



Wall -E
UAV UI Design

Initially, our goal was to design a drone capable of moving on the ground. However, after conducting research and brainstorming, we decided to create a drone that not only moves on the ground, similar to WALL-E, but can also fly like EVE from the movie. Instead of focusing solely on one function, we merged both capabilities for a more versatile design.

Team

5 Ux designer

EXPERTISE

UI Design

Duration

4 months

The Results:

The anticipated results of the WALL-E UV project include:

  • Enhanced Operational Safety: Advanced 3D terrain mapping and environmental monitoring to detect potential hazards early.

  • Increased Efficiency: Automating complex surveying tasks and enabling faster, real-time monitoring.

  • Improved Data Accuracy and Compliance: Providing more accurate environmental data to support informed decision-making and ensure regulatory compliance.

Our mission involved:

  • Designing ergonomic workstations to enhance comfort.

  • Managing cognitive load on interfaces.

  • Integrating intuitive controls for ease of use.

  • Ensuring efficient collaboration among operators.

  • Adapting the design for various functionalities and future upgrades.

The Process

Brainstorming and Research

We began with comprehensive research to understand UAV operations, translating insights into actionable design principles.


Overview and Framework Creation

We developed a structured approach, focusing on an overview, idea gathering, display concepts, and detailed design strategies using Miro.


Roles and Responsibilities

We identified specific roles and responsibilities for UV operators, including pilots, navigators, and payload operators, clarifying their interaction needs within the workspace.


Design Principles for Displays

We based our displays of the UI on these key principles:

  • Salience Compatibility: Important information pops out instantly.

  • Legibility: Clear text and symbols for easy reading.

  • Intuitive Design: Controls that feel natural and easy to use

Key ergonomic design considerations for the workstation chair includes:

  • Seat Height: Adjustable between 16-21 inches to accommodate different heights.

  • Seat Depth: Allows 2-4 inches between the back of the knees and the seat edge to prevent pressure at the back of the knees.

  • Lumbar Support: Supports the lower back’s natural 'S' shape, reducing stress.

  • Backrest: Adjustable to align with the curve of the spine, providing optimal support.

  • Seat Tilt: Allows for correct pelvis positioning, maintaining a neutral position to prevent posture problems.

  • Armrests: Positioned just below elbows to reduce tension, avoiding increased wrist strain during typing.

  • Monitor Height: Positioned at eye level or lower to prevent neck, shoulder, and upper back pain.

  • Monitor Distance: Adjusted to a comfortable distance to reduce eye strain and fatigue.


Data Collected

Use Case

The WALL-E UV is designed for comprehensive mining operations, including preliminary surveys, real-time monitoring, and post-mining assessments. It features advanced sensors to detect hazards like leaching gases and terrain instability and is capable of aerial maneuvers in inaccessible areas, ensuring both safety and compliance.


Functionality and Controls

  1. Navigation: Collaborative route planning and updates between pilot and navigator based on real-time data and mission goals.

  2. Sensing: Monitored by the payload operator, who adjusts sensors to optimize data collection, with information displayed in real-time.

  3. Vehicle and Camera Control: Managed by the pilot for precise maneuvering, enhancing safety with remote operations from a ground station.

  4. Vehicle Status and Payload: Joint monitoring by the pilot and payload operator of the UV’s status and payload, with real-time adjustments via management software.


Click here to check our full research

Operators

The diagram illustrates the collaboration between three drone control operators:

  • Pilot: Uses primary and secondary displays to monitor aerial/ground modes, collision detection, and battery levels.

  • Navigator: Manages front-facing camera views and 3D displays on the primary display, with navigation and alerts on the secondary display.

  • Payload Operator: Oversees hazards, UV status, and data points, sending alerts and location information to the Navigator.

Information flows between operators to ensure coordinated drone navigation, awareness, and payload management.

Display design

The display design for the WALL-E UV project started with an in-depth analysis of operator needs and interface requirements. Using Figma, we mapped out the display screens for each operator type—pilot, navigator, and payload operator—focusing on optimizing the layout based on design principles tailored to enhance user interaction and efficiency.

Design Principles Used and Rationale

  1. Attention: Ensured critical information captures immediate operator attention by using color-coded warnings and alerts and minimizing resource competition with distinct notification sounds.

  2. Perception: Designed displays to avoid absolute judgment limits by using optimal color codes and redundancy gain, enhancing information legibility through well-placed text and graphics.

  3. Memory: Displayed key flight data constantly and used familiar colors and icons to reduce cognitive load, making information retrieval intuitive and quick.

  4. Mental Model: Aligned with operators' mental models by incorporating pictorial realism with visual elements like altitude lines and directional icons that mimic real-world behaviors.



Control design

After transitioning from display design to control design for the WALL-E UV, we integrated specific principles to enhance usability and operator interaction:

  1. Attention: Designed controls to minimize resource competition, ensuring critical functions like emergency shutoffs are easily accessible and distinguishable.

  2. Perception: Strategically positioned and clearly marked controls to facilitate quick recognition and action.

  3. Memory: Reduced cognitive load by making frequently used settings readily accessible and allowing the system to remember operator preferences.

  4. Mental Model: Aligned the layout and functionality of controls with operators’ mental models, with clear labels and predictable actions matching common usage patterns.

Workstation Chair

Key ergonomic design considerations for the workstation chair includes:

  • Seat Height: Adjustable between 16-21 inches to accommodate different heights.

  • Seat Depth: Allows 2-4 inches between the back of the knees and the seat edge to prevent pressure at the back of the knees.

  • Lumbar Support: Supports the lower back’s natural 'S' shape, reducing stress.

  • Backrest: Adjustable to align with the curve of the spine, providing optimal support.

  • Seat Tilt: Allows for correct pelvis positioning, maintaining a neutral position to prevent posture problems.

  • Armrests: Positioned just below elbows to reduce tension, avoiding increased wrist strain during typing.

  • Monitor Height: Positioned at eye level or lower to prevent neck, shoulder, and upper back pain.

  • Monitor Distance: Adjusted to a comfortable distance to reduce eye strain and fatigue.



Design System

Inter font is our go-to for UAV displays—legible, readable, and optimized for screens. It’s sharp, modern, and easy on the eyes, making it perfect for any resolution and platform.


Color Palette

  • Dark Background (#1E1E1E): Reduces eye strain.

  • Yellow (#FFD100): Warnings/mid-range alerts.

  • Red (#F56E4D): Emergencies/low-range alerts.

  • Green (#2DC859): Normal range indicators.

  • Cyan (#13D3EE): Neutral indicators.

  • Mode Indicators: Blue (#14BAEE) & Orange (#CC7F0B): Differentiate aerial and ground modes.

    Text/Icons:

  • White (#FFFFFF): For dark backgrounds.

  • Black (#000000): For light backgrounds.


Our palette ensures high visibility and reduced eye fatigue, with dynamic badges for quick info at a glance.