Redesigning a SAAS solution by building a Design System

The company MachIQ offers a SAAS solution to the different actors of the industry in order to fluidify the exchanges between the factories and the machine manufacturers.

The APM product is aimed at production plants and offers them greater efficiency in maintenance management and a direct connection with machine manufacturers.

The DCX modular offering is aimed at machine manufacturers and allows them to offer their services (technical support via videochat, spare parts sales, access rights management, engineer scheduling).

Goals

Improve and overhaul APM to offer a better experience and unify the visual identity with DCX applications.

Build a Design System for both APM and DCX products to keep consistency through the products and to be more efficient to maintain the interfaces.

My job

Most of the time, II worked with Emma Pevrol, Head of Product Department, Jade Schnoebelen, Project Manager and Krzysztof Filipecki, Product Designer (I worked with him for 5 months).

Understand the product and the scope

Overview of the product

The first version of APM already had a large number of screens. Given the complexity of the product, the first thing to do was to understand how it worked. So I spent a number of hours with Jade, the Project Manager. She explained to me in detail the different parts of the site, the users that are affected by each section and the future goals of APM.

APM is a complex product to understand. To make it easier to understand, I proposed to make an overview of APM that lists all the pages, tabs, forms and actions of the product. This document allows you to have an overview of APM and to make an inventory. This document helped me a lot to understand the functioning of this service.

Organize our work-flow

At the same time, we met with Jade, the Project Manager, and Krzysztof, my design colleague, to divide up the screens to be designed and the work-flow we wanted to use. It was decided that I would work on the "critical" screens and Krzysztof on the less complex ones. Krzysztof was in Poland and I was in Switzerland with the product team members, so it was easier for me to work with the project manager on some of the features.

The company also wanted to build a Design System, so it was logical that we agreed to work according to the logic of Atomic Design. This is a modular approach to design to be more efficient and organised.

How I designed those screens

Define a colour palette

One of the first choices my colleague and I had to make was to create a colour palette that was effective and that each colour could be used for a specific purpose. The colours that serve as a base were used to create shades to bring more richness to the design system.

The colours have been defined as styles, making them a dynamic feature. When a style is changed, the elements that have the style applied are also changed.

The choice to use a name and not the function to name colours is simple. How do you name a colour that is used for alerts, the "delete" action of a button and the various statuses. It is easier to update the cherry variable and apply it to several possible uses.

Set up text styles

The definition of basic text styles is an important element in maintaining unity across the interface. In the same way as colours, text styles are defined at the start of the design phase. When a text style is changed, the changes are reflected in instances throughout the document.

The icon library

The icon library used for APM is FontAwesome because it was already implemented and working well.

However, the library did not satisfy all our needs. Aiming at the machine manufacturer and factory market, some icons did not exist. One of the challenges was to extend the library with the creation of APM-specific icons while respecting the FontAwesome style to remain consistent.

Form fields

The form fields are important elements since they allow the integration and transmission of data on the applications (purchase of supplies, create a maintenance ticket on a machine, etc.). It is therefore necessary to create sufficient fields for all types of data that the user can enter.

Providing a user management and authorisation system, not all users can enter or change certain data. Disabled fields are effective in indicating to users that they cannot enter or edit data.

Buttons and their states

This part of the design system is about creating buttons that are used in a logical way.

Solid buttons are used for a main action on a page. The colour is used to indicate the nature of the action: blue means a "classic" task, green for save and commit actions, and red for actions that are irreversible (delete data).

Outline buttons are used to indicate that there is a secondary action.

Buttons can be labelled with text to be as explicit as possible or with an icon representing the task to be performed. In both cases, care must be taken to ensure that the meaning is understandable.

The size of the buttons depends on their use. Some actions are located directly in the table rows. This implies a smaller space and therefore buttons adapted to this use.

Widgets and analytics for dashboards and assets

One of the strong points of the products developed is the ability to track the status of machines, supply management, and maintenance tasks. Widgets allow different user profiles to track and visualise the data they need in graphical form.

A part of the Design System is dedicated to widgets. It is important that widgets can have their own rules so that they are understandable. For example, colours have been added for the widget graphics.

Assemble components to design complete screens

We were using this method to design the screens.

Below you will find different sections of APM and APM-Lite that I worked on.

Kanban to manage work orders

Department managers and maintenance staff can see the service requests reported.

The kanban method has been adopted for this functionality, which allows to see pending, in progress, overdue and completed tasks in an efficient way.

A task can be assigned to a specific person or department, a date by which to complete it, the level of criticality and the supplies required for the task.

Equipment analytics

The machines are now connected in order to report a failure but also, and more importantly, to predict a failure - using IoT - that may occur.

My role was to work with our IoT engineer and design the widgets displaying machine data in graphical form.

Calendar view for tasks management

Maintenance workers may have tasks scheduled months or even a year in advance. These regular tasks are created automatically. It is therefore important to have several views to display the tasks.

My role here was to design the "calendar" and "list" views. The "list" view type can be presented in weekly, monthly and yearly format. The "calendar" view can be displayed in weekly and monthly format.

Connected equipment catalogue to machine builders throught DCX

The equipment and supplies shop is intended to be directly connected to the machine manufacturers' catalogues.

The user does not need to use an additional tool to see if a part is available or not and proceed to purchase.

Equipment, product, spare parts and order pages

There are a number of pages for the different items entered into the system: machines, spare parts, supplies, service requests all have a page detailing their relative information and possible actions.

Multiple levels tables

Some tables are used to display data only but some tables allow the user to select and manage files, equipment or supplies.

These tables are therefore presented on two levels. Level 1 is the display of data and indications (if a supply is to be ordered, for example). Level 2 for access to details and actions that the user is allowed to perform.

User administration rights management

As products can be used by user profiles with very different purposes and needs, it is important to have good management of access rights.

A person, whose job is to buy supplies from machine manufacturers, should not have access to the maintenance part of the equipment.

Handoff and follow-up of the developers

The last part of my job was to prepare the different graphic assets for the developers. This mainly involved exporting the icons and checking that there were no colours or typography that were not provided for in the design system.

I regularly exchanged with the developers to answer their questions about the design choices and to give them indications so that the element was integrated as planned. Emma, Jade and I check and test the work done by the developers. The feedback was entered into JIRA to track the progress of the backlogs.

Deliverables of the redesign of APM

In the end, we built a unified Design System – for APM, APM-Lite and DCX – composed of 300+ styles and components including variants and multiple states for the same component, style and the full icon set.

The amount of designed pages delivered for APM only is 200+ pages. It includes complete pages but also the different tabs in the page, modals, forms, and interactions of specific parts of the page.

Final thoughts

First of all I am very proud to have worked on this project. The complexity of the project was a big challenge and it gave me a lot of professional experience. I discovered product design, how to work on this type of project, and how to evolve my workflow on interface design according to user feedback.

I learned a lot about building a design system and designing interfaces based on the Atomic Design method. This allowed me to be more rigorous, organised and attentive to the consistency of interfaces from one product to another.

I discovered and learned a lot about React technology, IoT, how to communicate with developers and the industry.

Areas of improvements

I would have liked to improve and structure the ideation and user testing phases. Many of the design phases and the search for ideas and solutions were done informally. Setting up UX workshops would have been more effective to solve some problems.