Design of the production line operator interface and app for Brighteye's MOM solution Momentum

Brighteye wanted to update their operator interface and have a mobile-friendly version to work on tablets.
Result
Budget
~ 1 000 000 ₽
2021
Unfortunately we can't post the results — NDA.
Brighteye is a Belgian organisation that created 'Momentum', a cloud-based manufacturing operations management (MOM) software platform that provides enterprise-level manufacturing execution system (MES) capabilities, Warehouse Management (WMS), Advanced Production Scheduling (APS) and much more.
Brighteye was founded back in 2003 and has a lot of big, interesting clients such as Unilever, Olam, KAMAZ and the Momentum software is built upon Microsoft Azure technologie.

Логотипы клиентов
Brighteye has helped over a hundred organisations worldwide

Situation

All of the above led to a situation in which
  • It's often impossible to update the software as production chains worth millions of dollars can freeze because of it;
  • It's impossible to integrate the software into production facilities from outside the Microsoft ecosystem;
  • the interface looks old-fashioned, it is difficult for operators to navigate it and the UI-patterns are outdated.
Старый интерфейс Brighteye
While seeing the old screen, you can understand why Brighteye decided to have the interface redesigned

Challenge

As a first step in this optimization process Brighteye decided to turn Momentum into a web application, which finally offers a line operator the freedom to get up from behind his work computer and walk freely around the shop floor with a work tablet.
So the customer asked us to redesign the interface for line operators - the people who start production lines and monitor the operation of the equipment. For example, think of twelve bakery machines that work in parallel all day: one pours ingredients, another mixes them, a third one bakes them and so on.
Старый интерфейс оператора производственной линии в Momentum
As you can see here, the interface looked quite outdated
The reasons behind this change were not purely aesthetic, but also practical as a tablet interface is very different from a desktop one. Think of functionalities such as single tap instead of double clicks, larger controls designed for fingers, swiping and multitouch, all very different from desktop commands.
Старый интерфейс оператора производственной линии в Momentum
For example: On the left of the screen you can see a list of equipment involved in a production process, which you can easily click with a mouse on a computer, but seems rather difficult to tap with a finger on an eight-inch tablet.

The Process

Immersion

Brighteye had already prepared own developments, analytics, documents with use cases and a vision of what should be achieved.
They also provided us access to a 'test plant' – a simulation of a sauce factory, that can be controlled through the operator interface to start lines, monitor the processes on the dashboard and control that there are enough ingredients and quantities for the recipes.
Старый интерфейс оператора производственной линии в Momentum
We've been given admin access, so on the left you can see how many options Momentum provides, but we only worked on the 'Operator' section
Before we started, Elizaveta Vikhrova, Test & QA Officer, and Denis Bredikhin, R&D Manager, from Brighteye explained us in detail and demonstrated us how an operator works in Momentum and what their responsibilities are. This was very useful and helpful to us, as production processes are very complex and can differ from industry, organisation, location, etc.
Старый интерфейс оператора производственной линии в Momentum
Connections between tanks with components for sauces and other equipment
Just to be clear, we did not have to redesign the logic of the work processes, the interface had to work as before. So after the demonstration, we dove right into designing.

Design

We divided the project into several parts and started with a list of operations. So let's start with the main interface of the operator, where he spends most of his time.
In the old design, the process schedule and dashboard shared the same space. Because of this, the graphs did not fit on the screen and the operator needed to scroll to see them all. Both tools also require a different focus of attention, therefore, we divided the schedule and dashboards into separate pages / views.
Новый интерфейс оператора производственной линии в Momentum
As you can see, you can reach 'Dashboards' in three different ways: switch to the dashboard tab, select an operation in the list or click on the green 'Go to active operation' at the bottom
We also added an operation list card view to the schedule, as it contains more information.
Новый интерфейс оператора производственной линии в Momentum
Any process view can be expanded to see even more information
Both the schedules and the dashboards were made in several resolutions, as different (brands of) tablets also come with screens in different dimensions.
Дашборд оператора производственной линии в Momentum
If the charts do not fit into one dashboard, you can also add vertical tabs to the left
The dashboard consists of several widgets, which each plant can assemble for themselves according to their needs and wishes, as it is more convenient.
Дашборд оператора производственной линии в Momentum
Dashboard layout option for large monitor screens and TVs
Let's zoom in on how to launch the processes. In the original design, before the equipment starts up, the system shows the operator an instruction message as a human factor insurance where the operator must first confirm that he has read everything before he's able to start up the machine(s).
We have provided space for text as images may not be sufficiently clear.
Новый интерфейс оператора производственной линии в Momentum
In the example above you can see three steps at the bottom. But if there is a need for more than three steps, we've left room to add more steps
Let's continue. The second step in starting up the equipment is setting up the label(s).
Новый интерфейс оператора производственной линии в Momentum
You can customize the text on the label here
The third step is to check the equipment. There were many more parameters in the old design, but we hid them because in most cases the operator knows how everything is set up as he launches the same processes every day. But if someone needs to, they can still check all of them by pressing the 'All Equipment Parameters' button.
Новый интерфейс оператора производственной линии в Momentum
We left the most important parameters as the others are usually constant and the operator knows them by heart
Apart from going through all the steps, the line only starts when specific parameters are correct. They are usually set by default, but can be changed if needed.
And a production line will stop when the correct parameters are not met. However, the operator does not need to go through all the steps again as he can simply click on 'Break off'. And then the production itself begins while the operator can monitor it on the dashboard.
Furthermore, we designed a standard authorization process where the operator can enter his username and password and then choose a working area and a line.
Страница авторизации в Momentum
It is enough to log in and select the production line once - the operator does not need to go through this screen every shift
The last thing we needed to do, was to make different states of the widgets and show the expanded schedule widget and screens in different resolutions so the layout is perfectly adaptive to make the web application look good in any browser on any computer.
Новый интерфейс оператора производственной линии в Momentum
The clock is ticking, and twenty tons of curry is not ready yet
Brighteye Founder and Product Manager Lieven Decorte also asked us to add the option for a dark theme, as several factories work at night, and bright white screens could hurt the operator's eyes.
Темная тема интерфейса оператора производственной линии в Momentum
Sometimes a light screen can hurt your eyes - for example, in a dark room or during night shifts

Testing

After finishing the design, several Brighteye developers and partner-inegrators went on to test the design performance. The main task was to check whether a person familiar with the old interface could quickly figure out the new design.
We came up with scenarios and prepared a table with estimates of how successfully the tested person coped with the tasks. Of course we didn't give direct instructions, that would have been too suggestive. Instead we tried to softly guide them through all the interface functions by working with and constantly evaluating tasks and subtasks.
Тестирование интерфейса оператора производственной линии в Momentum
We tested how convenient it is to use the new interface
We found all the bottlenecks and quickly fixed them to hand the final design over to Brighteye.

Final

When Brighteye started to implement the design, we switched to support mode.
In the future, Brighteye will continue the redesign on its own, as they have a great in-house UX designer and good UX analysts. They asked us to help on this project to benefit from our fresh take on UI-patterns and Android design experience. Now they can assemble their future interfaces from the components of the UI kit, which we prepared at the end of the project.
~ 1 000 000 ₽
Budget
Result

So what we recommend to redesign a big system (or how to eat an elephant)?

Update the interface in small fractions and you can't go wrong

Unfortunately we can't post the results — NDA.