Project Banner
UI / UX Design

Redesigning a machine monitoring platform

Project Summary

BRIEF

Keeping in line with Industry 4.0, an old Machine Monitoring platform has to be designed into a web application, letting you access your data from anywhere. The redesign included redefining the product vision, functionality and look for users in the context of an Industrial Plant.

PROBLEM

The purpose of the application was to view and analyse data to generate reports. The structure of the old the old interface was confusing. As the data was directly linked to machines in the plant, users were hesitant to freely move around the application.

SOLUTION

“Seamless”, “Welcoming” and “Forgiving” were the new values on which the new design was based. A new information architecture with logical grouping, a fresh brand identity to enhance the structure were introduced. For the product to be developed, a set of guidelines with technical and design specifications was produced.

Project Type: Commercial
Sponsor: Forbes Marshall Pvt. Ltd.
Guided by Amod Gijare & Dr. Tridha Gajjar

This project is under an NDA - contents have been used with permission and belong to Forbes Marshall Pvt. Ltd.

Project Summary Image

About Eversense

A machine monitoring solution is a network of hardware and software products, which is customised to track data as per the plant's needs. Eversense is Forbes Marshall's software solution which centralises plant data and makes real-time data accessible anywhere. Before Industry 4.0, machine readings were tracked manually.

Data helps identify the root cause in case of machine breakdown. Minimising downtime is necessary to reduce loss in production.

USERS

In a plant, Operators, Managers and Plant Owners make use of this interface for different purposes such as tracking transmission, breakdowns, generating reports, performance-based analysis, etc.

Image Credits: Forbes Marshall Pvt. Ltd and Hureo's Usability Analysis Report.

The New Interface

A 6-month long project which included understanding the old product in great detail through various activities to define a new vision. The outcome of this project included reimagining the features, giving a fresh look and creating guidelines for implementation.

The vision was to make a "seamless", "welcoming" and "forgiving" product experience.

FEATURES

  1. Dashboard
    We found that different users will use the application for 3-4 specific tasks. Why make the user navigate the interface every time, if the objective is the same?
    A customisable first page, where you can make widgets out of the main graphs, tables, reports that you use the application for, neatly linked to the main functionality.
  2. Alarms
    An alarm is triggered when a reading goes out of the normal range or when communication is lost. These alarms can be tracked here and due to their serious nature, the reading alarms have been highlighted more visually - an improve,emt over the last interface.

    Alarms (History)
    View and filter past Alarm data and export the table.
  3. Data: Live
    Track machine parameters in real time. Pin the most important parameters above and view all parameters logically grouped to reduce clutter.

    Data: Historical
    An interactive graph view to compare parameters over time. Combinations of parameters to compare can be grouped and saved for easy access.
  4. Reports
    Export your data in different types of reports for easy sharing and further analysis, including automated emails.

The New Look

Apart from the values in the product vision, we wanted the interface to look trustworthy, simple and professional. The visual language included not only defining colours and typography, but also creating a component system, icons and brand identity.

The objective was to enhance the user experience by having clear visual cues and hierarchy of elements.

The Visual Language is very important to breathe life into a well-thought out structure of the product. UX and UI depend on each other.

Design Guidelines

In the same way that an interface should be user-centric, guidelines should be considerate of who will use them and how. In this case, the document is meant for future designers of the product and developers.

They are in the form of a website design in Adobe XD, where:

  • it can be viewed and interacted with as a website
  • components can be copy pasted into your own files
  • interactions and animation can be played and broken down
  • specifications can be shared for development
The guidelines explain each decision in detail, right from the design specifications to why a certain function works the way it works. Think of it as "design secrets" document.

Writing the guidelines was a very reflective process and include the following sections:

  1. The Basics: Product Vision, layout, colour, typography, logo, what the product is.
  2. The Structure: layout and functionality of all the features.
  3. Controls & Features: These were terms coined for the smaller elements on a page which may be common across pages. They break down how the element works, so the pattern can be used in another feature. For example, time controls, export function, etc.
  4. Components: This includes the design of smaller visual components such as cards, tables, pop-ups, top-navigation, etc. and how they have been used across pages.

What does the redesign improve?

Newer does not always mean better. In this case the interface is not better because it is newer, but because it learned from the strengths and weaknesses of its predecessor being in use for nearly two decades.

ALIGNED WITH ACTUAL USAGE (and not ideal)

  • Different people will log on to perform only a select few tasks, out of a sea of available parameters and functionalities.
  • Features such as a customisable dashboard, pinned parameters, saving comparisons and report types are based on this key insight - saving time and personalising the experience for the operator.

ADDRESSING THE USER'S FEARS

  • Since the data is linked directly to the machines, it was perceived that playing around on the UI will impact the machines directly.
  • Users felt that they had to be very precise in their movement on the UI and were hesitant to explore the full functionality of the interface, even though they were aware that it had a lot to offer.

FUNCTIONAL VISUALS

  • Reducing visual clutter, logical groupings of elements and colours that guide you.
  • Bringing what's most important at the forefront, making what's secondary available on click and providing feedback.

SEAMLESS LINKING

  • There are some tasks which require jumping across functionalities, for example, viewing the Trends Graph for an Alarm, which the previous interface could not handle well.
  • The solution for the new information architechture was cracked by considering the common denominator - parameter data.

A huge task in the project was figuring out a better way to structure the features - the aspiration was the be able to jump from anywhere to anywhere.

These key improvements, among others worked to make Eversense 2.0 a seamless, welcoming and forgiving interface. Telling the users that they are free to explore, play around and in case a mistake is made, it can be undone.

Process

DEVELOPING THE "FEEL"

  1. Research to understand the old interface and context
    To do this project well, it was important to understand the old interface in great detail. This involved reading Usability study reports, meetings with the creator, user interviews and field research.
  2. Artefacts from the research activities
    included user journey maps, insights, diagrams and finally, the target for what we wanted to achieve in the redesign.
  3. A new structure
    This involved many experiments, explorations and tests, condensing down to 3 concrete ideas:
    - Direction 1: not challenging the structure
    - Direction 2: small experience-enhancing additions
    - Direction 3: different levels of priority for the data
  4. Building blocks of the pages
    with the structure in place, the possibilities within the individual elements had to be explored and defined for each pages
  5. Consistency check
    can similar interactions be used across pages?
  6. Testing, testing, testing

DEVELOPING THE LOOK

  1. What are we aiming for?
    I wanted to get into the heads of key stakeholders to determine what kind of a feeling they envisioned for the user to get.
  2. Guiding words
    Word exercises such as marking keywords in word clouds help picture what kind of a look we could go for - since words imbibe certain visual characteristics. For example, dark blue is considered professional.
  3. Ideating the identity
    Explorations with the logo, typography, colours and icons.
  4. Laying out the pages with the building blocks
    Creating layout options with the smaller elements defined. Maintaining consistency and interactions from the wireframes.
  5. Testing, Options and Refinement.

Other Projects