Optimizing the web and mobile experience for Systems Engineering

Rewriting a React mobile application for improved User Experience and developing its mobile version.

The company and product

Systems Engineering A/S delivers a framework for successfully designing and delivering complex systems — both in the technical and managerial sense.

Designing engineering systems is a demanding task in itself. Orchestrating a multitude of parts is never easy, and there are many standards and guidelines (ISO and IEC) to be followed if a system is to be effective.

Additionally, the process of system engineering entails communication challenges. Such complex systems require harmonious cooperation of disciplines and teams, as well as engineers reporting results to various stakeholders.

Systems Engineering’s solution is twofold. Firstly, they pool together all the necessary tools needed to successfully design a complex system, and they improve them in terms of their connectedness. That’s the offline part of their work. There’s also an online part: a web service that supports the use of these tools.

Client’s feedback

Harald Hersted

Systems Engineering Concept Specialist at Systems Engineering

Monterail understands business needs

This long-term relationship simply works because we can count on developers to understand business needs and translate them into technical requirements. We’ve achieved even more than expected — we moved from being a startup-like company to someone that provides mature software.

Scope and Highlights

ITERATIVE SOLUTION REFINEMENT

WEB DEVELOPMENT

VUE.JS, RUBY ON RAILS AND NEO4J

The Challenge

Our first task was to improve this existing solution.

It was developed by an external software development company. When Systems Engineering A/S was just starting, they used paper, then Excel, to help other companies design engineering systems. Both tools had similar drawbacks: they were too time-consuming and not scalable enough. The resulting application prototype, with Ruby on the backend, fulfilled the business requirements but turned out to be not scalable enough. It was possible to design an engineering system with it but it couldn’t handle the magnitude required by the clients (tens of thousands of elements possible while billions were needed).

The goal we started with was: to rewrite the existing prototype for efficiency and scalability. To handle such immense numbers of elements, the new app was supposed to use a more efficient Neo4J graph database, and Vue.js on the frontend.

Key challenges

Integrating the mobile app with the new API.

Reworking the web app’s interface for improved UX.

Future-proofing the solutions (technology-wise).

Integrating the mobile app with the new API.

Reworking the web app’s interface for improved UX.

Future-proofing the solutions (technology-wise).

We also worked on the mobile companion app for Systems Engineering main tool that enables conversations around the systems being designed.

The mobile app allows users to quickly pull up key information from the web app, including details about the elements that underpin a system’s design. The interface of the mobile app needed a redesign to improve User Experience. The technology that it was using also required changing for security and future extendibility reasons (from React Native JavaScript to React Native TypeScript).

Although the core functionality was to stay the same, some new features were needed (like the ability to switch between workspaces), as well as an integration with a new API that the main web service had.

The Process

The development process started by gathering requirements and user stories.

As a next step, we’ve collaborated with Systems Engineering to break the requirements and ideas into smaller, tangible tasks.

We’ve repeated this process iteratively throughout the web prototype development and the mobile app refactoring project. Working in this way, we’ve carried out a number of technical and functional improvements such as implementing end-to-end tests or figuring out the best way to add functionality where users can join workspaces.

To rewrite and scale the PoC, we started from scratch by creating an architecture for the Neo4J backend database, and building the frontend part. The PoC redevelopment lasted 2 months. Then we proceeded to build new features.

We built two core modules: one that deals with designing electrical systems, and another that allows combining this aspect with two other elements of an entire engineering system. We also created a module that enables comparison of two similar versions of an engineering component and accepts or rejects the differences. We also designed and developed a version of the app for individual, non-corporate engineers.

This is how we made it work:

Regularly discussing priorities and plans between Systems Engineering stakeholders and developers.
Translated the requirements into technical solutions and implemented an iterative approach to drafting solutions.
Set up a self-organizing team of developers who proactively seek to understand the business context.

Team’s voice

Wojciech Maciejak

Tech Lead, Monterail

The best project I worked on

Systems Engineering is one of the best projects in my entire career. I like the technical challenges that we tackle each day, but this project also stretched us from the perspective of understanding the business side. When I first joined workshops with the product owner, I learned how the ISO 81346 standard is designed and instead of being scared, I was impressed and so started reading a book about this methodology. I’ve never worked on such an interesting project and I believe that in the nearest future, the whole world will hear about it.

The Outcome

Thanks to our cooperation, Systems Engineering’s mobile and web apps are functional, secure, future-proof, and have improved User Experience.

Although the underlying web service has changed significantly, the mobile app stayed functional and continued to facilitate communication around the systems being designed.

The workspace functionality that we’ve implemented allows the users to have different viewpoints and discussion angles.

We were able to deliver software that handles billions of elements in engineering systems while staying scalable and performant. One of the updates we included improved the speed of the app by 10-20 times.

We've also created a mobile companion app for the main software.

The success of this project hinged on the following factors:

Finding creative technical solutions for efficiently displaying large numbers of elements.
Actively looking to understand the business context and proposing solutions to address the client's needs.
Iteratively working with Systems Engineering to find the best solutions possible for the mobile app.