Heidi Mok Bio Projects
← All Projects

Robot Operations UI

I was the design lead on a new interface that enabled factory operators to manage production workflows and recover systems quickly, reducing downtime risk.

  • Design lead
  • Robotics & Automation
  • Q1-Q2 2025

Backstory

Automated industrial robots assist with repetitive and heavy lifting tasks such as the palletizing and depalletizing of items or picking small individual items from bins to other containers. For many factory and logistics warehouses, there are long-term challenges finding and retaining labor so the ability to configure any industrial equipment for autonomous operations for a variety of use cases has a big advantage to traditional robot systems.

target

Goals

  • Design a new interface that operators could use to run production on customer sites.
  • Easy robot interaction for factory operators using a handheld pendant device and on desktop.
  • Reduce high cost associated with engineers providing direct through a customizable robot recovery flow.
target

Key Challenges

  • Differences in Japan, US, EU, and China markets
  • Slow adoption to web-based UI
  • Complicated recovery logic
  • Cultural and language barriers
  • Starting from a place of mistrust
  • Poorly defined requirements

My Role

As a designer, I started by gathering information to get the lay of the land. We did not have a dedicated product manager so I took on the responsibility of writing requirements and managing stakeholders throughout the process. I followed an end-to-end design process and worked primarily with three developers in an iterative way to ship the UI. To overcome key challenges, I focused on several strategies: (1) More engagement with Japan-based stakeholders to build trust (2) First hand experience of integrating and operating a robot cell to learn by doing (3) Utilizing a new design system to improve consistency, efficiency, and match industry colours.

A Few Key Learnings

  1. Operators rarely looked at the UI when production was running. But when something went wrong, it became a high stress moment and that’s when the user experience needed clearer guidance. The emphasis of the UI needed to be on clear operator control. The final design incorporated a large panel on the bottom of the UI using high contrast colours to indicate system changes: green when production is running and red when attention is required.
  2. three panel states showing grey, green, and red
  3. The digital twin was one of the main value drivers of the system because of the visual connection to the real world. Even though it was important to display data about status and order details, the final design featured the digital twin as the main backdrop with data surrounding it to minimize context switching.
  4. digital twin of a factory
  5. Project managers often used static flow charts to discuss changes to the robot recovery flow with customers. These were then passed on to system integrators and engineers to implement. The recovery flow customization aspect of the UI should look similar to these flow charts to increase adoption. The final design uses React Flow to create an interactive flow chart experience.
  6. flow chart of system recovery steps

Outcome

The first major release marked a significant new product offering that was made available across all customer sites.

← All Projects