UX/UI and why it matters for Industry 4.0 software

Lumi De Smedt on , updated

In this blogpost, our front-end developer Lumi De Smedt shares their views on UX/UI in today’s industrial environment and lifts the veil on how UX/UI principles are applied to Factry’s software development process.

Users should be able to switch half of their brains off and still work with the software.

As a front-end developer and UX expert, I mostly work on client-specific MES applications. Before customers decided to implement our software, they had often been limited to paper or had to rely on outdated systems. It’s up to me to deliver a user interface that works fast, and is both simple and intuitive, regardless of the amount of data that needs to be displayed.

However, a great user experience is in the eye of the beholder. What is logical to me, does not necessarily feel right to someone else. That is why at Factry, UX/UI is considered a team effort. Having different people with various backgrounds around the table proves to be of huge value to the development process, as it enables a more critical and iterative way of thinking.

Industrial UX vs. website development

In my previous working experience as a developer, part of my job was developing government websites. These websites had to be easily accessible to different target groups, including people with disabilities. However the basic context is completely different, this experience still pays off when I am doing UX work for Factry clients today.

Compared to developing websites for a general audience, building an industrial user interface is just as much about making different screens work in the best way possible for many different people. Through, for instance, setting up a clear and concise information architecture. Or, by providing buttons which are sufficiently large and stand out for the visually impaired.

The main similarity between website development and industrial UX is that user demands are central to the process. The main difference, on the other hand, is that our MES software needs to display a lot more data. I’m not talking about blocks of text, but rather tables and a lot of numbers. This requires a rather specific approach.

Striking the right balance between instant information and in-depth process insights is crucial. For the most part, screens are either made for the factory floor or the office environment. In case there is an overlap, information tends to be hidden, depending on its relevance for a specific user. This way, we prevent anyone from getting lost in an information overload.

The UX process at Factry

UX/UI-focused software development can never be described as a linear process. However, we could roughly break it down into three phases, whereby, at the beginning, we try to move from concept to creation fairly quickly.

1. Project requirements & specifications

We start by identifying the client’s needs and goals. A large part of that job is carried out by our COO Yves. He talks the whole project through with our clients and translates their needs and the desired software specifications into a detailed technical briefing for the development team.

As a front-end developer, it is important to fully understand the scope of a project right from the outset. First, we discuss the broad outlines of the project and brainstorm on how the requirements fit into our framework. Once we’re on the same page, it’s up to me to deliver a fresh UX perspective, supported by continuous interaction with our technical experts.

2. Wireframe & prototype

Building a wireframe usually starts out with drawing a few simple squares on a sheet of paper. I begin by designing the bigger blocks and try to keep it simple. For me, this process is all about making data easily digestible for users, and getting the balance right between showing too much and too little information.

UI drawing with pen and paper. The old-fashioned way.

Afterwards, I move on to working in the browser in order to create a digital version. I come up with a few variations, which I then share to my team members for a first review. Once again, as everybody has a different take on things, getting feedback from colleagues is hugely important.

First iteration designed in the browser

In a follow-up client meeting, we take a screen-by-screen look at the wireframe, during which we find out which buttons should be added, or which ones will probably not be used as much. As developers are not present on the factory floor, these evaluation meetings prove to be extremely useful. Next step in the process is building the prototype, i.e., a more detailed user interface.

Screenshot of FactryOS material manager
On this screen, information is provided on a material definition for phosphoric acid. An advanced search function is displayed on the left. On the right, you can find more detailed information, including any material properties.

Our MES software is browser-based. When creating wireframes and prototypes for a new project, I start to work in browser mode straightaway. Doing so makes clear from the start what a user screen will look like when it is finally introduced on the factory floor.

Wireframing and prototyping goes beyond design. Another part of my job is to deliver suggestions on UX writing. It’s important everything is phrased in a similar fashion, making sure the user is guided throughout the screens, and not a single button lacks supportive text or icons.

3. Feedback & testing

As soon as the prototype is wrapped up, it’s time for fresh client feedback. The software can be tested easily through visiting an URL, making iteration more efficient. The client can immediately jump into the software, using dummy or even real data, and watch the magic happen in a live environment. A nice improvement to how it used to be.

Afterwards, we keep in touch with the customer, and continue to interact on matters. Let’s say a button is displayed too small on a tablet device. In that case, the client can quite effortlessly create a support ticket in order to solve the issue. We genuinely take the time to look into every client suggestion. Depending on priorities, iterations can be implemented in a matter of days.

The value of a UX style guide

When joining Factry in 2019, I mainly focused on improving the branding of our software. Later on, I turned my attention to creating a style guide, as it is the foundation for any solid UX strategy. When multiple developers are working on a single project, guidelines guarantee the style is applied consistently throughout every screen of the software.

Many frontend developers are incredible perfectionists. I, for one, am no different. The devil is in the detail: spaces around objects should always be identical and pixel-perfect. Buttons should be similar throughout every screen and have the same color, location and accompanying icon.

Visual uniformity of software benefits anyone who works with it. It allows users to automatically know what to expect when clicking a button, without having to think things through. In fact, it should enable people to turn half their brains off and still use the software.

UX & Industry 4.0 in 2021

Even though many mobile software applications nowadays are built for very specific purposes, half of them are actually websites. While a fast iteration process has become a standard in the web and mobile app world, industry software has taken a backseat – until now, that is. As the web has increasingly matured, and Industry 4.0 is swiftly catching up on this trend, I’m convinced that industrial businesses will further embrace browser-based software, including modern UX, in 2021.

Feel free to share your thoughts, ideas and comments on this article through lumi.desmedt@factry.io. Interested in working together? Contact our sales team and get a free demo of our Industry 4.0 software. Or would you like to contribute your UX/UI expertise to developing great software? Contact our HR department.

Never miss the golden tip, subscribe to our quarterly newsletter