See more case studies

CPOT

Sweden / cpot.se

An innovative app digitizing road maintenance in the Nordics. Developed for NCC – one of the leading construction companies in Europe.

2

apps and one codebase thanks to Flutter

15

times faster damage reporting process

3

countries where CPOT revolutionizes road maintenance

How NCC started a road maintenance revolution in the Nordics

Challenge: 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.

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.

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: 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.

The scope of the project

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.

Key features

App walkthrough video

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.

Framework

Flutter

Language

Dart

Architecture

BLoC

Networking

Dio

Maps

Google Maps

Continuous Integration

Bitrise

Testing

Alice

Localization

Easy Localization

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.

Framework

React

Language

TypeScript

Architecture

Modular

Networking

Fetch

Maps

Google Maps, Google Map React

Continuous Integration

Azure DevOps

Unite tests

Jest

Localization

i18next

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.

So we had to make sure that the size of the photo would be appropriate for the ERP but still kept legible to app users. We have created a custom algorithm to solve this case.

Most uniquely, we have built our own solutions for automated end-to-end tests, running locally.

API type

REST

Language

TypeScript

Framework

Azure Functions

Database

MySQL

ORM

Sequelize

File storage

Azure Storage

Continuous Integration

Azure DevOps

End-to-end tests

Mocha + Chai

How CPOT app works

What our client says

Team

We were adjusting the team’s size according to our client’s needs

Product Owner

Marek Stark

Scrum Master

Katarzyna Owcarz

Account Manager

Justyna Solarska

UX/ UI Designer

Kamila Figura

Flutter Developer

Marcin Chojnacki

Web & Backend Developer

Bartosz Krajka

QA Engineers

Maciej Jaskulski
Maja Sobierajska

Other case studies

Nice To Fit You – mCommerce Diet Catering App

Mobile commerce diet catering app

Portfolio

Optimize your business process with a mobile app

Let us take the whole app development process off your shoulders

Not ready for an estimate? Write to us and book a Product Design Workshop to clarify your vision and prepare the crucial documentation.