How NCC started a road maintenance revolution in the Nordics
Challenge
An innovative app digitizing road maintenance in the Nordics. Developed for NCC – one of the leading construction companies in Europe. Time-consuming, inefficient and expensive road maintenance management process based on an ERP system Our client – NCC – is one of the leading construction companies in the Nordics, specializing in the management of complex construction processes. For years, NCC has struggled with the ineffective process of reporting road damages and ordering materials for their repair. Our client wanted to streamline and automate this process. Why the process was so ineffective so far? Each road inspector, when finding damage on the road, first took notes and then returned to the office, where he/she described the damage and added an order on the computer via the ERP system. The problem was that inspectors couldn’t immediately report the damage and describe it on-site. They also couldn’t precisely determine its location, which was then problematic for the contractors who provided materials for repairing the damage. To sum up – the road maintenance process was tiring, time-consuming, and burdensome for both the inspectors who reported the damage and the contractors who repaired it. What’s more: -NCC needed an admin panel where they could monitor the budget, as well as the volume and status of all orders. -The application should work wherever NCC offers products and services for construction and infrastructure projects, i.e. in Sweden, Norway, and Denmark. We knew that it should be available in several language versions.
Solution
Their vision was: The process of ordering repairs for a damaged road surface or curb should be as simple and friendly as ordering a pizza or buying clothes online. CPOT – a mobile and web app that makes the road maintenance process 15 times faster! On our client’s order, we’ve developed CPOT – a web and mobile app that simplifies the lives of people responsible for road maintenance in the Nordics. It benefits both road inspectors and suppliers of building materials. The application has completely changed the previous process of reporting and repairing road damages. CPOT guarantees: simplicity – users can take a picture of road damage, choose its position on a map, use their own labels, and order the needed materials directly from their mobile phone; speed – users go through the entire ordering process in just a few clicks on their smartphones; control – they get an overview of their orders (status, quantities, costs), and keep track of their budget; precision – users accurately choose the position of the damage on a map (they can allow the app to use their location), and material suppliers know exactly where to find it. Short time-to-market thanks to Flutter According to our client’s needs, the priority was to quickly deliver a working MVP app. We had about 3.5 months. In the second step, the goal was to improve the product and adapt to user feedback. That is why we decided to develop the mobile app for both iOS and Android using Flutter. This framework allowed us to shorten the time-to-market and deliver a product with as many features as possible in the given time. User flow tailored to the daily work of inspectors responsible for road maintenance We made sure that the application is as comfortable as possible for inspectors who work in the field. The process of adding an order is adapted to the realities of road maintenance specialists. Therefore, the first step of submitting a new order is adding a photo of the damage, because it’s the first thing the inspector does at the scene. What’s more, some of the data completed by the user is saved in the application to speed up adding the next new order. Product Owner on site Marek – the Product Owner from NCC – worked with us directly at our office in Wroclaw for 50% of the app development process. We were able to work hand in hand from one desk and it made our development process especially effective. We got together as one team and it was a pleasure to have such an engaged PO! Road maintenance revolution NCC has started a road maintenance revolution in Nordics. We’re happy that we can participate in this process by delivering digital products that bring our client’s ideas to life. Product Design Workshop Thanks to a 3-day workshop with Marek – the Product Owner from NCC – we clarified the vision for CPOT, created clickable wireframes, defined the core features for the MVP, and prioritized the tasks for the first Sprint. It was a fruitful kick-off for our cooperation. Product Design Our designer has created completely custom designs for the app. We focused primarily on making the application simple, clear, intuitive, and easy to use for field inspectors. The app’s color range is consistent with the CPOT logo provided by the client. Mobile App We have created a mobile app for iOS and Android platforms using the Flutter framework. This choice of technology was dictated by the short deadline. The CPOT app allows users to report and describe new road damages in the field, and order materials needed to repair them. The whole process only takes a few simple clicks! Web App We have built a web app that gives inspectors the same possibilities as a mobile app. Additionally, users can view statistics on their orders and monitor their budget. We have also created an admin panel where the administrator adds new users, monitors order list, or controls key order parameters. Backend We’ve built a REST API as a layer over the ERP – the system used by the client so far. Thanks to this, frontend apps communicate with the ERP through the REST API in a much more simple and transparent way. This enabled us to speed up the ordering process in the app. Maintenance After CPOT’s release, we make sure the app stays up-to-date, attractive to users, and bug-free. We pick any errors right away, thanks to monitoring tools, and quickly repair them. Furthermore, we also introduce changes to the CPOT mobile app in case of Flutter updates, system updates, or when getting feedback from users. How we did it We have built an app for Android and iOS with one codebase, using the Flutter framework and Dart language. We’ve also chosen to use the BLoC architecture pattern. As a map provider, we used Google Maps. It was a challenge to integrate it into the app, as there was no stable Google Maps support for Flutter at that time. We came to a solution thanks to consultations with the Google team on Github. In the end, we managed to adjust the versions of the Google Maps libraries to work well on both platforms. Another challenge was the poor performance of loading photos in the app. We used experimental technology to solve this problem, then in the beta phase – FFI. Thanks to this library, we were able to scale photos natively, rather than in Flutter. This solution sped up the process of scaling and uploading photos tenfold in comparison to Dart code. Alice – a Flutter tool for monitoring communication with the server from the application level – helped us to optimize manual tests. What’s more, we used Dart DevTools to monitor the network and to verify queries sent to the server. The designs we implemented were completely custom. We built a web application in the React framework using the Create React App library. It is a proven tool that enables a quick start to development with a working application skeleton. According to our client’s requirements, we chose Azure DevOps as a Continuous Integration platform for the project. What’s more, we decided on Material UI – a popular React UI framework – to implement app designs. That way, we didn’t have to create the necessary components from scratch. We used Material UI components and adapted them to our needs, which allowed us to save time and speed up the work on the application. As in the case of the mobile app, implementing maps was a challenge. After testing various options, we chose the Google Map React library, which allowed us to work with Google Maps “dressed” in React components. Another challenge was the internationalization of the app, which should work in several language versions. For this function, we used the i18next library, which turned out to be the perfect solution. The app is based on a modular architecture – we have grouped components into modules according to the application’s features. Last, but not least, “Jest” – a JavaScript testing framework used for automated tests – ensured the highest code quality. When it comes to the backend, we build a REST API as a layer over the ERP – the system used by the client so far. Thanks to this, the frontend apps communicate with the ERP through the REST API, which is much simpler and transparent to them. We wrote the backend application in Azure Functions – it is the Microsoft equivalent of Serverless. Using this tool has a positive impact on our client’s budget because he pays only for the resources when they are actually executed. What’s more, image conversion was a challenge. ERP accepts small images, while our API permits large ones.
Want fresh marketing stories in your inbox?
Get the weekly email that makes you a marketing genius.
Stay informed and inspired, for free.