WMS Mobile UX for Industrial Control

Embedded and mobile UI for a smart racking system that improves inventory accuracy, optimizes rack operations and overall warehouse efficiency, and requires minimal training.

Overview

We partnered with Spacemaker Inc. to design embedded and mobile interfaces for managing their smart racking system and warehouse management system. The application enables warehouse staff and system technicians to operate automated storage units from embedded touchscreens and forklift-mounted displays, mirroring the physical controls on rack trays. This warehouse management UX redesign streamlines tray movement, item retrieval, and storage organization, improving inventory accuracy, rack-status visibility, and operational safety while minimizing training requirements. Our responsive industrial UI prioritizes visibility in harsh lighting, interaction speed, and role-based workflows for operators, technicians, and supervisors, enabling staff to quickly check inventory, report issues, and monitor logistics from both fixed and handheld devices.

Challenges

The previous UI failed to support real-time decision-making and required too many steps for common tasks. Users often struggled to locate time-sensitive alerts or key metrics. Visibility was poor in warehouse lighting conditions, and the interface lacked support for accessibility standards or multilingual staff. We also needed to balance improvements with device constraints and legacy system dependencies.

Our Approach

Role-Based Prioritization

Each role sees only what matters: operators get fast pick-and-put screens; technicians see prioritized diagnostics. Narrowing choices speeds decisions and reduces errors, improving inventory accuracy.

Visual Clarity in Harsh Lighting Conditions

We optimized the embedded UI for forklift-mounted displays and handheld devices to improve warehouse management UX. High-contrast colours and bold icons ensure rack-status visibility in bright or low-light conditions. Critical alerts and status indicators remain scannable in motion, supporting faster decisions and improving inventory accuracy.

Maintainable UI Architecture

While this was a single-application deployment, we developed the interface using lightweight React patterns and minimal framework customization. This ensures easy future updates, clean code maintenance, and support for added functionality without overengineering the system.

Device Adaptability

We optimized the application to run on embedded fixed screens and handheld devices, delivering the same functionality across form factors. Layouts and controls are tailored for equipment-mounted displays and phones so users access the same features with interfaces adjusted for screen size and input method. Whether used on an equipment-mounted display or by service technicians with a handheld device, the app provides consistent, usable workflows that support warehouse management UX.

Design System

To ensure visual and functional consistency across current and future interfaces, we developed a foundational design system tailored to Spacemaker’s industrial workflows. It defines typography, spacing, iconography, and component behaviours that align with the brand and operational needs. The system supports embedded touchscreens and handheld devices, creating a cohesive visual language that reduces rework as new features are added and helps keep the embedded UI maintainable.

Results

The redesigned WMS interface transformed daily operations by streamlining core workflows and making real-time status clearer and more actionable for operators and technicians. By reducing unnecessary steps and surfacing the right information at the right time, operators and technicians complete tasks faster. The result was measurable gains in throughput, improved inventory accuracy, reduced task time, and safer handling.

Accelerated Task Cycles

By defining role-based workflows for forklift operators and service technicians, we drastically reduced the number of steps required to complete common industrial tasks like tray retrieval and item lookup, supporting improved inventory accuracy and stronger warehouse management UX. The intuitive flow led to faster overall cycle times.

Real-Time Data Visibility

Critical inventory data, status alerts, and system diagnostics are now displayed prominently and in real time through the embedded UI and handheld views. This eliminated delays caused by slow, outdated screens and enabled faster, data-driven decisions on the warehouse floor, improving operational responsiveness.

Optimized Visual Clarity

The high-contrast visual design, coupled with bold iconography, ensured maximum rack status visibility and scannability under varied warehouse lighting conditions. Operators can safely interpret alerts and metrics even when screens are vibrating or in motion.

Minimized Onboarding Time

The modern, streamlined layout and consistent interaction patterns prioritize intuitive task flows; progressive disclosure is used as an interaction technique to reveal advanced controls only when needed, minimizing the learning curve. New staff can now operate the automated racking systems with minimal training, accelerating onboarding.

Device Parity & Adaptability

The single interface delivers consistent embedded UI experiences whether accessed on equipment-mounted screens or handheld devices used by service technicians. This device parity reduces errors from context switching and preserves workflow integrity across platforms.

Scalable Architecture

The maintainable UI architecture, built with lightweight React components, gives the client a stable foundation for integrating future smart racking technologies or expanding the system to other logistics applications while keeping the embedded UI maintainable.

Let's Work Together

Let’s bring clarity to complexity. We help industrial teams move faster with better software.