Self Ordering Terminal (SOT) for a robotic kitchen inside a shipping container called SAM

Overview

As part of this project, we are introducing our new containerized 20-foot system. It is designed for international use in remote and infrastructure-limited environments, from defense to emergency response to event catering.

SAM is a pioneering project designed to provide automated, high-quality meals to soldiers in the field. The system is housed within a mobile shipping container, allowing it to be transported via trailer to any location. Inside, a robot prepares meals, while soldiers interact with dual-screen terminals to place their orders.

• Role: UX/UI Designer & Front-end Implementer

• Tools: Figma, Cursor (AI Code Editor), v0, Node.js, React

• Key Focus: Digital-Physical Integration, Military UX, AI-Assisted Development, Multi-language Support (English & Korean).

The Challenge

The project faced unique environmental and behavioural constraints:

• Mobility & Durability: The interface had to reflect the rugged, industrial nature of a shipping container.

• Speed of Deployment: We needed to design, prototype, and code the front-end rapidly for integration with the robot's back-end.

Research & Discovery

Through physical product designers and field researchers, we identified two primary user groups:

• The Soldier (End User): Needs a fast, high-contrast, easy to-use interface to order food under various lighting conditions.

• The Operator (Admin): Requires a secure area (pin-code protected) to manage settings and system health.

Key Insight:

Our researchers noticed a "patience gap." Soldiers expected instant access to their food. We realised we needed a visual bridge between the digital screen and the physical locker.

Design Strategy

Visual Identity

I chose a Dark Military Theme to match the black shipping container.

• Assets: High-quality food imagery combined with sharp branding elements.

• Typography & Layout: Optimized for 1920×1080 resolution tablets.

• Accessibility: High contrast for outdoor/industrial visibility.

Solving the "Locker Tension"

To prevent soldiers from forcing the lockers, I collaborated with the Industrial Designer to create a sync animation.

Prototyping & Testing

I developed the initial high-fidelity designs in Figma

• Usability Testing: We tested the flow on 1920×1080 tablets to ensure touch targets were appropriate for soldiers (who might be wearing gear).

• Bilingual Validation: We implemented a toggle for English and Korean, ensuring the UI remained balanced and readable in both scripts.

AI-Powered Implementation (The Tech Stack)

To accelerate development and ensure the final product matched the design pixel-for-pixel, I leveraged AI coding tools:

• Exploration: Evaluated Figma AI, v0, and Replit for code generation.

• Execution: Used Cursor to build the full React front-end.

• Process: I translated Figma layouts into clean HTML/CSS and React components. This allowed for rapid iterations and real-time responsiveness testing on the actual tablet hardware.

• Collaboration: I worked closely with the back-end developers to ensure the React app was ready for GitHub and seamless integration with the robot's Python-based logic.

Results & Impact

To accelerate development and ensure the final product matched the design pixel-for-pixel, I leveraged AI coding tools:

• Seamless Integration: Successfully bridged the gap between the digital UI and the physical robotic hardware.

• Reduced Damage: The locker animation successfully modified user behavior, reducing the risk of mechanical failure.

• Efficiency: Using AI (Cursor) reduced the development timeline, allowing for a functional prototype to be delivered to the back-end team ahead of schedule.