Our long term client  - Virtual Post Mail - a boutique virtual mailbox and address service - needed to migrate the UI of their internal mail processing app called Alice, used by their service team to process thousands of mail items daily, from an outdated implementation in Angular to a modern React framework. In brief, Alice is the app used by the Virtual Post Mail staff ‘behind the scenes’ to process all the requests from the many thousands of the end users of the public app that we also worked on - to scan, OCR, trash or route the mail items. An additional challenge was presented by the fact that this app is only ‘formally’ a web app, but in fact it is more of a desktop workflow automation app, integrated with external hardware, and have extensive requirements for its stability and performance. Alice app connects with a barcode scanner to associate barcode numbers with the actual PDF files and with heavy duty industrial printers. Through the process, various metadata is entered, and the quality of the scanned images is checked. If quality is not satisfying, documents are sent for reprocessing. Once documents are ready for publishing, the application automatically sends the documents to their owner’s public app mailbox as well as to their email addresses.

We started to work on this project in February 2019. We worked daily with the management team and staff to ensure that we are building and optimizing the application to make their day to day work pleasant and efficient — the application consists of the backend and the client part. The existing backend application was written in NodeJS, and it uses a Mongo database. It needed to support new functionalities, like Google authentication, and to improve existing features, such as the whole scanning process. The client application is built in JavaScript using the React framework and then wrapped to a native desktop application using the Electron framework. The client app has two layers. One is presentational, where the user interface is implemented using the React framework for smooth user experience, and the other is the background services where NodeJS code is executed. Those services use native operating system features, like reading and writing files from the disk, but also image processing, etc.

Our project management team split the work into phases so that we could focus on every step of the project, but still keep the whole picture in mind. After the successful migration of the app, both the back-end and front-end, we focused on the new features that needed to be added - like Google authentication and to fine-tune existing features while making the most out of the information collected through the user testing. Alice became a tailor-made application for the company staff that makes their daily routine much more comfortable.

After finalizing the migration, we set out to continuously improve the user experience by redoing the existing and adding new features. The ultimate goal is to cover the entire mail processing process in a single place, adding UX enhancements in parallel.

The initial idea was to develop the new client application as a web application, running on a separate web server. And for it to be able to coexist with the old AngularJS application. Once a new module was ready in the new client application, we would replace it in the old one - so both applications had to work in parallel, appearing as the same app to the end user. The AngularJS application depended on the API and had to be modified to be able to be hosted separately on Netlify - this step required a lot of work and a lot of thorough testing to ensure that everything is processed without any errors. Existing React application was integrated with the new Electron app, which resulted in the desired product.

Welcome to the backstage! Got any questions? Drop us a line - we are there for you.