Reworking the OCS Inventory user interface: a key part of the user experience

The reworking of OCS Inventory to version 3.0 begins with the frontend component.

As part of the global rework of our application, we are focusing on a key element: the frontend. It is the first point of interaction between the user and the software. By rethinking it, our goal is to deliver a smoother, more intuitive, and scalable interface. This first step is fundamental to establishing a solid foundation for the rest of the project. Let’s take a closer look at the challenges, design choices, and expected benefits of this transformation.

Following the first interview, we now dive into one specific aspect of the rework : the frontend. Can you explain what this component is used for?

The frontend is the component responsible for managing the display of the application’s data. It is the visual interface displayed in the user’s web browser.As this interface is the “entry point” of the application, it made sense for us to present it first. This web interface is used daily by technicians and supervisors for standard operations. In a way, it’s the showcase of the application.

What are the challenges involved in reworking a frontend?

Some of the challenges were mentioned in the previous article and apply to the global rework of the application (all components included). It’s important to distinguish between global challenges (see first article) and those specific to the web interface.

To recall a few:

• Choosing the right technology is crucial to ensure the product can evolve without being limited by an outdated or insufficiently modular framework.

• The structure and quality of the code (for instance, by enforcing coding standards) are essential to ensure maintainable, high-quality development over time.

• Taking into account current limitations and improvements to avoid repeating past mistakes.

Beyond these global aspects, there are also concrete challenges specific to the frontend component:

• Ease of navigation within the interface, providing a lightweight interface that is easy for users to navigate, regardless of their level of technical expertise. This can be summarised by the term ‘user experience’ (UX).

• Modularity and ease of integration for new features. The frontend is mainly used to create reports and generate asset groups and lists. It is important that the design enables easy aggregation and representation of data.

Screenshot of OCS Inventory version 3.0 displaying an asset listing

What issues are currently being faced?

The current challenges are mainly related to the monolithic nature of the solution, which prevents us from improving the user experience on the legacy branch.

It is essential for us to build a solid, modular foundation that allows continuous development of new features.

Currently, three main issues are also being considered for the frontend:

• The obsolescence and technical limitations of the module handling inventory processing. This prevents us from introducing advanced features or strong integrations, for example with IoT.

• Outdated coding standards make development cumbersome and community contributions more complicated.

• More specifically, the accessibility of the web interface, especially for advanced features, can be confusing for users.

Which technologies are being used to develop this frontend?

The frontend was developed using Vue.js. This is a JavaScript framework developed specifically to enable the construction of web interfaces.

The choice of this technology was based on three factors:

• The community and its widespread use in the open source world (and web development) in general.

• The ease of access to and modification of the code. It will be easier to guide contributors.

• The component logic that allows you to create reusable features and elements in just a few lines anywhere within the application.

Which elements will be improved?

The web interface will be improved in its entirety, but certain areas will receive particular attention:

• The product administration experience will be improved, with clearer parameter organization and presentation for the user.

• The overall navigation will be refined to make the interface easier to use.

• Addon integration will be simplified, enabling seamless reuse of components already developed by the OCS Inventory team.

What features are planned in the mid and long term for this frontend?

In the medium and long term, we will mainly focus on reporting. We want to enable users to create graphical reports, exports, and alerts with minimal need for code interaction.Our goal is to allow report creation directly from the web interface using a no-code approach, instead of developing a dedicated module or writing scripts.

Will this change the way the open-source community contributes?

We will ensure that contributing is as simple as possible and, above all, that developer-oriented documentation is available to facilitate contribution. Otherwise, everything will be as before: contributors are welcome on the application and we welcome them!

What is the next step, and when can we expect it?

For the next step, we will discuss the impact of the rework on the solution's backend. This will allow us to explore in more detail the technical architecture chosen for our API, which enables the frontend and agents to function.

We will also discuss the data model and our philosophy in designing this essential part of the product redesign. Another section will be dedicated to the policy for integrating third-party tools, as improving these interconnections is one of the main objectives of the backend rework.

Do you have any screenshots to share?

GitHub OCS Inventory 👉 https://github.com/OCSInventory-NG