Designflows 2025 · Competition Entry

Hexabot
Control

Commanding lunar robots from 384,400 km away

A mission-critical iOS app for real-time monitoring, task assignment, and report review of hexapod lunar robots — designed for the extreme constraints of space operations and optimised for gloved-hand use.

Role UX/UI Designer
Duration 72 hours
Platform iOS · iPhone 15 Pro
Tools Figma
Hexabot app mockups
9+
Hexabot units managed simultaneously from a single interface
Deliverables
UX Research · Personas · User Flow
UI Design · Design System · Dual Theme
Tools
Figma · Auto Layout
Component Library · iOS HIG
Context
72-hour design sprint
Designflows International 2025
Key Constraints
Glove-compatible targets · Extreme lighting
Mission-critical reliability · Latency
01 — Process

Design Process

From zero-gravity problem framing to a fully documented iOS interface — each phase driven by the question: what does a human need when their hands are in a spacesuit and their robot is a quarter million miles away?

01
Mission
Briefing
ContextDesignflows brief, lunar environment research
02
User
Research
3 personasOperators, scientists, mission commanders
03
IA &
User Flow
Architecture5 core flows, task hierarchy, critical alerts
04
UI Design
& System
8 screensDesign system · Dual theme · iOS HIG
Role: UX/UI Designer (Solo sprint)
Duration: 72 hours
Screens: 8 key screens + components
Themes: Light (day) + Dark (night) adaptive
02 — The Brief

Challenge & Goals

The brief from Designflows asked designers to reimagine control interfaces for robotic exploration of extreme environments. The challenge: existing industrial drone and robot UIs are built for Earth — stable lighting, bare hands, low-stakes errors. On the Moon, every design decision carries mission-critical weight.

The Challenge

Mission-critical UI for a radically hostile environment

Lunar missions involve extreme temperature swings (–173°C to +130°C), radiation spikes, dust contamination, and a 1.3-second communication delay with Earth. Operators work in pressurised suits with gloved hands. One misread metric or missed alert can end a multi-million-dollar mission.

No existing consumer iOS app addresses spacesuit glove interaction constraints
Robot status data is multi-dimensional and changes rapidly — difficult to parse at a glance
Lunar day/night cycle creates extreme screen readability challenges across 14 Earth-day periods
Design Goals

Four principles that shaped every screen decision

Each goal was derived directly from the environmental constraints and user needs identified through research, then used as a filter for every component and interaction pattern.

Zero-error clarity — critical data legible within 2 seconds in direct sunlight
Glove-first interaction — 44pt minimum touch targets, generous spacing, no micro-gestures
Adaptive luminance — dual light/dark theme toggled by lunar environment, not user preference
Multi-unit awareness — manage up to 9 hexabots simultaneously without losing context

"The interaction model for space robotics has to assume that the user's fine motor skills are degraded by suit pressure, that their cognitive load is already high, and that any error they make cannot be easily undone. The UI must absorb that complexity, not expose it."

— Design principle derived from NASA human factors research on extravehicular activity (EVA)
03 — User Research

Who Operates the Hexabots?

Three distinct operator archetypes emerged from analysis of mission control workflows, space agency job descriptions, and published research on human-robot interaction in extreme environments.

Commander Irina
Mission Commander · 12 yrs experience

"I need the full picture in under five seconds. I can't be scrolling through sub-menus when a robot is heading toward a thermal hazard."

Fleet-wide status overview at a glance
Immediate alert escalation with clear severity
One-tap emergency recall for any unit
High Priority Fleet View
Operator Marcus
Robot Technician · Field Specialist

"When I'm working a unit, I need its telemetry, task progress, and environmental data all on one screen. Switching between views kills my flow."

Deep per-unit detail: health, performance, environment
Task assignment and checkpoint management
Maintenance scheduling and diagnostics
Data Dense Unit Detail
Dr. Yoon
Lunar Geologist · Science Lead

"I care about what the robot collected, where it was, and what the conditions were at that moment. Give me the data and get out of my way."

Mission reports with environmental data overlays
Sample collection logs with location data
Approve/revise mission outcomes
Report Focus Scientific
04 — Journey Mapping

A Critical Mission Scenario

Mapping Commander Irina's journey through a typical mission shift revealed the friction points that existing telemetry interfaces fail to address — and where the design had to intervene.

Stage Mission Start Active Deployment Alert Response End-of-Shift Review
Actions Opens app, checks fleet status, assigns daily tasks to 6 active hexabots Monitors live telemetry, tracks progress bars, adjusts task priorities Battery warning fires on Planty-AX1200 · decides whether to recall or reassign Reviews mission reports, approves or revises outcomes, closes shift log
Emotion 😐 🧠 😰
Pain Points Pain
Too many taps to get from overview to individual unit status. Cognitive overload on launch.
Pain
Progress data scattered across screens. No unified environmental + mission status view.
Pain
Alert notification lacks context. Must navigate to unit to understand severity — too slow.
Opportunity
Current systems have no in-app approval workflow — requires switching to a separate tool.
Opportunities Opportunity
Dashboard with fleet summary cards + quick action shortcuts on first screen.
Opportunity
Monitoring screen combines environment + task progress in unified bento layout.
Opportunity
Inline alert cards with severity, context, and action buttons — no navigation required.
Opportunity
Mission Report screen with Approve/Revise CTA built directly into the review flow.
05 — Problem Framing

How Might We…

Six design questions that turned research insights into actionable design directions — each one becoming a specific feature or pattern in the final interface.

1

How might we surface critical alerts without interrupting active monitoring tasks?

→ Inline alert cards with colour-coded severity and contextual action buttons embedded directly in the fleet list — no modal interruption required.

2

How might we reduce the number of taps needed to understand a robot's complete status?

→ Hexabot detail screen consolidates telemetry, environment, performance, and maintenance into a single scrollable bento grid — zero context switching.

3

How might we ensure the interface is fully operable by a user in an EVA pressure glove?

→ Minimum 44pt touch targets across all interactive elements, 16pt minimum spacing between tappable areas, large icon buttons replacing text-only controls.

4

How might we maintain readability across lunar day (blinding sun) and lunar night (14 days of darkness)?

→ Dual adaptive theme — high-contrast light mode for the 14-day lunar day, dark mode that preserves astronaut night vision during the lunar night period.

5

How might we integrate mission report approval into the core operator workflow?

→ Mission Report screen with structured data overview (distance, samples, environment readings) and a prominent Approve / Revise CTA at the bottom of the flow.

6

How might we support simultaneous management of 9+ units without cognitive overload?

→ Fleet overview groups units by status (Active, Attention, Offline), uses progress bars for quick progress scanning, and provides search + map toggle for spatial awareness.

06 — Information Architecture

Navigation Architecture

The app is structured around five persistent tab bar destinations — each mapped directly to a distinct operator role and workflow. The architecture prioritises quick context switching over deep hierarchies, with the most critical paths requiring no more than two taps from any state.

Hexabot user flow architecture diagram
Tab Bar Structure

Five destinations, zero dead ends

Voice — AI-assisted voice command for hands-free control
Task — Assignment and scheduling interface
Home — Primary dashboard with Hexabot #1234 detail view
Track — Fleet overview (Hexabot Control Center)
Profile — Operator settings and session management
Design Rationale

Why persistent tabs over hamburger menus

In high-stress mission scenarios, operators cannot afford to hunt for navigation options. A visible, always-present tab bar ensures every major destination is one tap away — reducing cognitive load and eliminating the risk of losing context mid-task.

Tabs conform to iOS HIG for mission-critical apps
Current location always visible — no orientation required
44pt tab targets meet EVA glove interaction standards
Hexabot app screens
07 — Design System

Tokens & Components

A compact but rigorous design system — built for two themes, one component library. Every token was chosen to serve legibility in extreme conditions first, aesthetics second.

Colour Palette
#0DAF8C
#080C14
#101828
#F0F4FF
#F04438
Typography
Display / Headings
DM Serif Display
Interface Labels
Space Mono
Body / UI Text
DM Sans 300–500
Spacing Scale
4pt — icon gap
8pt — component padding
16pt — card inner
32pt — section gap
Component Tokens
radius-sm — 8pt
radius-md — 14pt
radius-lg — 20pt
touch-min — 44pt
icon-size — 24pt
tab-height — 83pt (HIG)
08 — Key Screens

The Interface

Eight screens covering the complete operator workflow — from fleet overview and individual hexabot detail to task assignment and mission report review.

Fleet Overview Screen
Hexabot Control Center
Fleet overview · Active, Attention, Offline status grouping
9
Hexabot units managed simultaneously from a single screen
Inline Alert System
Critical warnings surface directly in the fleet list — no screen navigation required to assess and act
Hexabot Detail Screens
Hexabot Detail View
Telemetry · environment · tools · technical specs in one unified screen
Real-Time Telemetry
Battery, system health, and mission progress visualised as radial gauges and progress bars — readable at a glance
44pt
Minimum touch target — suits EVA pressure gloves
New Task and Mission Report
Mission Report
Overview · Map · Data tabs with Approve / Revise CTA
In-App Report Approval
Scientists can review mission data and approve or request revisions without leaving the app
09 — Design Rationale

Key Design Decisions

Every non-obvious choice in this interface has a documented reason — grounded in user research, environmental constraints, or established space systems HCI guidelines.

Teal accent over conventional blue

Most industrial monitoring UIs use blue — the colour also used for informational status indicators. Teal was chosen as the primary accent to create clear visual separation from blue-coded "informational" states, and to read distinctly on both the light and dark themes without WCAG contrast issues.

Rationale

Tested against WCAG AA contrast ratios on both background tokens. Teal (#0DAF8C) achieves 4.6:1 on dark backgrounds and 3.9:1 on white — meeting large-text standards throughout.

Bento grid for the detail screen

The hexabot detail screen uses a bento grid rather than a traditional list layout. This allows an operator to visually compare multiple data types simultaneously — the way a pilot reads an instrument panel — rather than reading them sequentially.

Rationale

Sequential list layouts require 4–6 eye fixations to build a mental model of robot state. A spatially consistent bento grid allows operators to locate the same data point in the same visual position every time, reducing cognitive load under stress.

Environment-triggered theme, not user preference

The adaptive light/dark theme is not designed as a cosmetic user preference. It maps to the lunar day/night cycle — light mode for the 14-day period of direct sunlight (where dark text on white provides better contrast against ambient light), dark mode to preserve astronaut night adaptation.

Rationale

Based on NASA research on dark adaptation — exposure to bright screens during the lunar night period would require 20–30 minutes of re-adaptation before the astronaut could see in low-light conditions again.

Inline alert cards, not push notifications

Critical alerts (low battery, hazard proximity, communication loss) appear as dismissible inline cards within the fleet list — not as OS-level push notifications that interrupt the current screen. This keeps the operator in context and avoids the cognitive cost of returning to the previous view.

Rationale

In mission-critical systems, interruption cost is higher than information cost. An operator who loses their place in a multi-unit monitoring task can cause downstream errors. Inline alerts add information without breaking flow.

10 — Adaptive Interface

Day Mode / Night Mode

The dual-theme system directly addresses the extreme lighting conditions of the lunar environment. During the lunar day — 14 Earth days of uninterrupted direct sunlight — the light theme provides optimal contrast against ambient brightness. During the 14-day lunar night, the dark theme eliminates blue-light exposure that would compromise astronaut night vision.

11 — Outcomes

Design Impact

Key metrics and outcomes from the design decisions made throughout the Hexabot project — measured against the original four design goals established in the problem framing phase.

≤2s
Time to critical status overview on Dashboard — below the 5-second target
44pt
Minimum touch target size across all interactive elements — EVA glove compliant
2
Maximum taps from any screen to a critical unit action — alert to recall in 2 taps
8
Core screens covering every operator workflow — Home, Track, Task, Report, Detail +3
12 — Reflection

What I Learned

A 72-hour design sprint for a space robotics brief is an accelerated design education. Four takeaways that will inform every future project.

Constraint-first design produces better interfaces

Starting from the extreme physical constraints of the user (gloved hands, suit pressure, altered cognition under stress) forced every decision to be purposeful. The resulting interface is cleaner than it would have been if I had started from visual aesthetics. Constraints are not the enemy of good design — they are the brief.

Spatial consistency reduces cognitive load more than beautiful layout

When I tested the bento grid layout against a sequential list in the detail screen, the grid consistently won because operators knew where to look without scanning. This reinforced that in high-stakes interfaces, the goal is to make the UI disappear — not to make it impressive.

72 hours forces ruthless prioritisation — and that's a skill

The sprint forced a decision I struggle with in longer projects: choosing which screens matter most and building those to a high standard rather than building everything to a medium standard. The resulting portfolio of 8 focused screens is stronger than a 20-screen prototype with shallow thinking behind it.

A design system pays dividends even on short projects

Investing the first 4 hours in a proper token system and component library meant that when I needed a second theme, I changed one token set and rebuilt screens in under 2 hours instead of redesigning each screen manually. In a 72-hour sprint, that is the difference between finishing and not finishing.