About Project

Cost Tracker

About company:

CostTracker is a company born in Norway, which set up the goal to create an innovative cloud-based FinTech platform that helps companies save time and money through total control of costs in the organization. The software's main functionality is an extensive purchase management system, which enables you to order items from various suppliers and plan your expenses in advance. As we at Railwaymen are growing it continuously since September 2018 in our Krakow HeadQuarters, you can find inside a catalog of over 33 000 different suppliers, and as this case study is being published (July 2021) - more than 16 000 purchase orders have been successfully registered and proceeded through this platform.

our work

Project Management

Frontend

Backend

QA

UX & UI

Business Consulting

Future Strategy

1. Process

Workshops

The first design workshop was the result of the client's initiative, who, after doing research on software houses, selected several with whom they considered working together. Railwaymen was among the companies considered. We had a chance to meet our clients in person - they visited our office and, what’s more, we organized introducing workshops for them with the whole development team to discuss all the details and organize brainstorming sessions. It was a great experience for both sides and thanks to that we were sure that we clearly understand their business needs and expectations. Our meeting focused on the technical aspects of the project. The client came to us with specific assumptions and a vision for the project, while our task was to verify the idea and propose a possible implementation. As a result, we were able to conduct a feasibility analysis and lay out optimization processes.

Photography of Weronika, Project Manager

Weronika, Project Manager

“Developing a FinTech application is challenging and rewarding at the same time. Luckily, we had a chance to organize workshops in our office and kick off the project properly with the whole team. Our clients were involved in the development process on a daily basis, which was really supportive because we gained the feedback from them at each stage.“

Communication

At the beginning of the project, a complete understanding of the business needs was essential due to the specificity of the financial aspects in various companies. Our team had the possibility to familiarize with the product vision as well as analyze business requirements that were delivered by the client. The dedicated team consisted of several professionals specialized in different areas, therefore we were able to deliver the first version of the quite complex platform within 3 months and release it in September 2018. Since that date, the application is evolving very dynamically, fulfilling more and more needs coming from the FinTech market. We as Railwaymen have been responsible for 100 % of the development throughout the whole time.

The project's exact Team Structure looks as follows now (July 2021): 1 x Project Manager, 3 x Backend Developer (Ruby on Rails), 1 x Frontend Developer (React.js), 1 x Quality Assurance Engineer, and 1 x UX/UI Designer. So 7 people in general, with support from other of our team members when needed.

Photography of Tadeusz, QA
Tadeusz QA Engineer
Photography of Sylwia, UI/UX Designer
Sylwia UX/UI Designer
Photography of Konrad, Frontend Developer
Konrad Frontend Developer
Photography of Mateusz, Senior RoR Developer
Mateusz Senior RoR Developer
Photography of Tomek, Senior Ror Developer
Tomek Senior RoR Developer
Photography of Michał, Project Manager
Michał Project Manager
Photography of Kuba, RoR Developer
Kuba RoR Developer

During the development process, we have established a communication flow that was agreed upon by both sides and still remains effective. Thanks to our client’s engagement, from the very first day and weekly calls we were sure what is needed and what might be obsolete. They came to us with a defined scope and vision of the project - that also helped us in understanding the idea and make it possible to deliver a working software product that meets our client’s as well as end-users expectations.

Workflow

For ticketing purposes, we are using Jira and our clients feel comfortable tracking all the issues. Besides having the “QA” column and status for the dedicated QA specialist on our side, we also added the “Review” column in our workflow to make it visible and accessible for our clients. That was the place where they could verify completed and tested tasks on the staging environment. For daily communication, we also used another tool - Slack. Thanks to integrating Jira with Slack, all changes made on the platform and updates were transparent.

New client’s request

Verifying request by the team

Adding task to Jira

Taking care of workflow

Assigning client for task review

Completed task

Photography of Michał, Project Manager

Michał, Project Management

“Taking over a project that has been running for several months (during the process o further app development I’ve stepped into the Weronika role) is quite a challenge for any project manager, and I was no exception. Now, from the perspective of a year of working on the project, I can say with full confidence that the people working on the project - I mean the customers and developers - have created an amazing agile team that has overcome many problems and will conquer all that is yet to come.”

2. Web app

Creating purchase order

To make it possible to create a purchase order (PO) in a seamless and user-friendly way, our development team implemented ReactJS components. Thanks to that, the user experience on the site is on a highly satisfying level and is also meeting strategic goals.

One of the most interesting and complex features is a Supplier catalog, which automates the process of adding items to PO from the same supplier in the company. Company employees that have assigned specific roles are able to search for items within the supplier’s items database. Such items are automatically added to a catalog if they were previously added to the Item List.

Photography of Tomek, Senior RoR Developer

Tomek, Team Leader & Senior RoR Developer

“It was very exciting from the very beginning of the project. Starting with workshops where we defined core features and the application’s main flow, and ending with its implementation. I enjoyed working on the Purchase Order form where we used ReactJS components because of the many user-friendly features. Also, the financial parts of the application were really interesting from a database perspective. Mentioning the best parts of the application, I could not miss the approval process with different user roles and privileges.

During the development of the first CostTracker version, we had to take care of the frontend cool features, privileges access and flow process, and substantial database queries. We also had to make sure that the MVP we’re building will be easy to expand in the future. And seeing how the CostTracker app has grown since the first release, I believe we did that part well!”

REAL-TIME BUDGET PLANNING & MANAGEMENT

Thanks to the CostTracker purchase management system, you can plan your budgets and divide them into specific categories. Every Purchase Order created through the app is assigned to a specific budget - thanks to that, as a cost approver, you can easily track and plan all of your expenses! Inside the application panel, you have a clear view of your budget’s state: if any of them has been exceeded, how much has been already spent, which part of them has been blocked for your future expenses and how much money you have left for your next orders.

If you already know that there is a set amount of money you want to dedicate to your purchases, and don’t want to exceed it at any means - you can turn on the “strict” budget functionality. In this case, only the app Administrator will be able to approve the costs that exceed that set level of expenses.

For example - if you are running a marketing department, you can create separate budgets for ordering Items for your events, recording equipment (cameras, microphones) or else. Thanks to that, you can easily track and see in a visually appealing way how much money you have spent on your department's procurement needs, look for the most cost-efficient suppliers and analyze the price-quality ratio of the Items that you receive from them. No more making financial decisions based on hunches or competitors' activities - thanks to CostTracker, you'll be able to make much more educated decisions based on hard data!

Planning Purchase Order (PPO)

You know that feeling when your company Christmas Eve's dinner is approaching, and you are starting to stress out whether you have enough funds to make it truly exceptional? With this CostTracker Planning Purchase Order functionality, you won't get so easily surprised by unforeseen costs! You can pick a budget (for example employer branding or HR) from which you want to "block" resources for your specific goal within seconds.

What’s also great about this functionality, that you can create a Planned Purchase Order inside the app, but you don’t have to execute it. Thanks to that, as a manager or department director, you can plan your Purchase Order for the future and then delegate the execution to your employees. This solution eliminates the risk of several people ordering the same Items independently - thanks to CostTracker, they can work on the same Planned Purchase Order and make sure they will avoid any frictions along the process.

The CostTracker purchase order management system will notify you that the time when you'll be needing the funds for your Planned Purchase Order is getting closer. It will also warn you that you may exceed your budget, because of the POs you've planned in the past, but will be executed very soon. In plain words: this functionality helps you to plan and overlook your business purchase orders long before they will reach out to your suppliers.

ADVANCED USERS & ROLE MANAGEMENT

One of the biggest challenges when building a FinTech app is to ensure your money flow stays entirely under your control. After all, you don't want one of your employees to accidentally order 1000 mouse pads that you don't really need. So to make the whole purchase order process maximally safe and intuitive, we've introduced several roles inside the CostTracker purchase order software. The approval flow looks like on the graphic below, and ensures that only company-designated decision-makers can approve or reject purchase orders created by other employees.

There is also an Administrator role, which of course has got total control over everything that's happening inside the purchasing software. This person can assign roles to specific users anytime it's needed.

Multi company module

Inside the CostTracker purchase order management system, it is possible to have users with multiple roles assigned. For example, Jack is "just" a Purchaser in the XYZ company. But in the ZYX one, he is an Approver. As an Administrator, you can assign Jack a specific role in the chosen company and have a clear view of which kind of roles are assigned to him at the moment.

When you do this, Jack will be able to create POs as a Purchaser by typing XYZ.costtracker.com in one organization (yes, CostTracker will create a separate subdomain for your business) and then move to ZYX.costtracker.com and accept purchase orders created by other users as an Approver in another company. As an Administrator, you'll be able to see all of that and make sure that some roles don't interfere with each other.

THE AI ACCOUNTING MODULE

As the CostTracker aims to be so much more than "just" a purchasing system, we've introduced two different types of integrations with the most popular accounting systems on the financial market. So if you are using apps like QuickBooks (interesting fact - you can find CostTracker on the official list of apps that are integrated with this software), Tripletex, Sage Accounting, Xero, PowerOffice or 24SevenOffice - you can easily process the data you already store inside them when using CostTracker!

Photography of Mateusz, Senior RoR Developer

Mateusz, Senior RoR Developer

“The biggest challenge here for me was to understand the financial and business flow inside the apps that we wanted to integrate with. All of Accounting Systems mentioned above present their data differently - the goal was to display them all in a unified way inside the CostTracker.

For example, 24Seven Office uses Soap API, when all of other Accounting Systems work on Rest API. Their interfaces also differ greatly. Yet we’ve managed to accomplish this goal, to integrate them well, thanks to the solid basics we’ve built at the very beginning of the app development process. Thanks to that approach, we’re fully prepared for introducing new integrations in the future and develop the CostTracker further!”

We've called this functionality the Accounting Module, and it enables you to:

  • enlist invoices data from your chosen accounting system inside the CostTracker and match it together with the specific purchase orders. The system matches invoices with POs based on variables like the same supplier name, the transaction value, the order number, or else. It enables you to save tons of time you would waste, by doing this manually! It happens automatically each day, so you don't even have to think about it.
  • process invoices inside the CostTracker and then send them to your chosen Accounting System. To achieve this goal, we use the OCR system - more about it below! Yet what’s special about CostTracker, is that if somehow, the OCR matching system fails, we’ve developed a set of internal logical rules (built by our Senior Ruby on Rails Developer Tomek) to make sure that the invoices data was processed correctly nevertheless. The app tries to achieve that goal by automatically filling the required invoice pools based on historical data (gathered from previous documents processed from the same provider or other types of infos).

Photography of Tomek, Senior RoR Developer

Tomek, Team Leader & Senior RoR Developer

“Have you ever had a situation where the OCR system didn’t read your invoice data correctly? Even if this happens only occasionally, in the case of FinTech software - each of those situations can cost you lots of troubles! That’s why inside the CostTracker purchasing software, we’ve developed an original Artificial Intelligence script that double-checks the invoice data read by Lucidtech.

It works by identifying places in your invoice that OCR system could not proceed correctly and trying to fill up those gaps based on infos inside your CostTracker database - those can be variables like Supplier, Purchase Order, TAX code etc. In case it’s not able to do it - the software asks the user to do it manually, yet it saves that action in its memory, to fill it up automatically in the future when the same case occurs. In short words: this script makes your work of implementing the invoices much easier and free of errors!”

OCR Invoices Processing

Most of the Accounting Systems require typing the invoice informations inside manually. This takes time and becomes very tiring, as even the slightest mistake can cause issues in the future. That's why the CostTracker purchasing software works with OCR, which enables you to upload your invoices as PDFs straight inside the system! The artificial intelligence algorithms will scan the invoice file and fill up all of the necessary brackets for you. To make sure that the OCR system got everything right, the algorithms will show you the percentage of how certain the software is, that the data have proceeded correctly. Thanks to this double-check function, the whole process of scanning & proceeding with your invoices becomes much faster and safe, in comparison to doing it manually by a human! After the invoice has been scanned & proceeded, you can match it with a specific purchase order (or the system can do it automatically for you - you only have to approve that it’s correct), change it a little (for example - add a TAX code) and send it to designated Accounting Software. The CostTracker purchasing system can also create a specific email address for you, where you can send your invoices and the app will automatically start proceeding with them inside the system!

PURCHASE ORDER DELIVERY MODULE

When ordering lots of items from different suppliers, you need to retain full control over your deliveries. Thanks to the CostTracker purchasing software delivery module, you can control your orders in real-time. Inside the app panel, you can select the items that you've already received and those that you are still waiting for to come.

For example, you can create one order called "Austin SXSW Trade Shows" and create separate deliveries inside, like banners, leaflets, gadgets, etc. from various suppliers. When the banners come - you tick the box that this specific delivery has finished. But you are still waiting for gadgets - so you don't close the order in general, as long as you will have the "full package". Thanks to this module, purchase order management becomes much more under your control, as it helps you to maintain your business operations smoother and more immune to human error. It also helps you to react faster in case of stock shortages or run your inventory management better (similarly to Unleashed Software solutions).

NLP ITEM MODULE

When choosing the right procurement software for your business, you want to make sure, that it will be working best in YOUR case. All business needs are different, and the goal is, to build a purchasing software flexible enough, to adapt to those needs. In the previous CostTracker MVP version, the adding Item functionality stayed pretty basic. You could once again order Items, that you've ordered before (the system found it inside the previous purchase orders) or add them manually. But in the new version, the Item Module enables you to send the items you want to order inside the software as an Excel file. The CostTracker artificial intelligence algorithms scan your file and ask you, which column of your file means what. And then - they automatically assign those Items to a specific Purchase Order, and then add it to your database, to make your procurement processes much faster and easier!

Photography of Tomek, Senior RoR Developer

Tomek, Team Leader & Senior RoR Developer

“Our inspiration for developing this functionality was the solution used by Mailchimp, a very popular e-mail marketing software. We’ve made it using React.js, and it works like this: you can open your Excel file, mark the data you want to import inside the CostTracker, paste it inside the app and we’re matching that data automatically with the right columns. And what’s great here, that the columns names don’t have to be named exactly the same: thanks to Artificial Intelligence scripts, the software can figure out by itself, that the column labelled “cost” in your Excel file, should be assigned to the one labelled “price” in our CostTracker system. In the future, we want to make it even smarter, as financial applications are a great example of software that can benefit a lot from implementing AI solutions!”

VARIOUS LOGIN OPTIONS

One of the most important things when building FinTech software is to ensure the maximum level of security. CostTracker purchasing software enables you to get inside the app using login options a follow:

Two Factor Authentication

According to statistics from a CompTIA study, “Human error accounts for 52 percent of the root causes of security breaches.” Sometimes we don't pay enough attention to make our passwords maximally safe - and this is where two-factor authentication comes in handy. You can log in to the CostTracker purchase order management system by downloading the Google App Authenticator app, scanning the QR code at the first login attempt, and then - by simply typing up the password and the code, the Google App will send straight to your phone! Thanks to this solution, the login process becomes easier yet maximally secure.

Single Sign-On (SSO) Login

Are you using the option to "log in through your Google account" sometimes? Most of us do - this type of solution is called Single Sign-On. You can configure the CostTracker app of your choice, supporting SSO software (for example - Azure) and then, log in within an easy and secure way with your previously created account. This solution is especially important for bigger organizations, where creating a separate account for each user would be a highly complicated and time-consuming process. The benefits of this solution go as follows:

  • logging with one set of data (in this case with the main system account e.g. Azure) to many used systems (fast and easy, no need to remember separate access data),
  • lower risk of unauthorized logins,
  • easier maintenance of security and access management inside the company.

Photography of Tomek, Senior RoR Developer

Tomek, Team Leader & Senior RoR Developer

“In the case of Single Sign-ON Authentication Standard the biggest challenge for me was to understand how it works - what you have to do, to sign in through it and how to implement it in the CostTracker purchasing software well. Yet the benefits of that solution are definitely worth the effort! Thanks to SSO, if your company is using systems like Salesforce or AWS, you don’t have to create separate accounts inside the CostTracker for you and your employees. They can simply log in inside the app using the credentials they already created in the mentioned above solutions. When I was implementing this solution, I needed to be extra careful in terms of security: analyze the whole SSO flow carefully and make sure that no one unwanted will have access to the system's insides. We constantly track any security breaches inside libraries we use and act fast to make sure that every data put inside the CostTracker is 100 % safe!”

The possibility to use the CostTracker app API

Lots of the solutions described above wouldn't be possible if we haven't created the CostTracker API. Thanks to this, various types of software can integrate with this purchase order software, download stored inside purchase orders, and proceed with the Cost Tracker data inside their systems. Having their own API developed and open to use for other software is like the quality stamp that only truly advanced and professional applications can pride themselves on.

SYSTEM MANAGEMENT FLEXIBILITY

Due to developing the application from scratch, our client wanted to keep the system fully flexible and manageable by the company administrators. They can have their own database of suppliers and their contacts as well as provide more information about their company to create POs in PDF format and be able to send it through the email directly from the system with an appropriate note. Moreover, they have full access to manage the company employees, system users, and assign them to specific roles, based on the company structure. In the PO approval process, the most important factor is to have the determined budget limit for each user with an accessible role. You can also decide to hide specific Accounts, adjust the order view, create your projects list, and much more!

3. UX / UI

Mobile views and tables

Displaying big data on a small screen is a challenge. On small screens, users can only see a small portion of a large data table. Using specific signposts orient users when they scroll through the data, and tools that narrow down content according to user-specified criteria allow them to view the data in a meaningful way. To achieve that, we used specific tools and features, such as locked headers or columns, expandable rows, sorting, and filtering.

QUICK ACCESS FOR THE APPROVER

Quick access to data on mobile devices was necessary for users with the approver role. In this case, we needed to let them view and edit purchase orders on their phones or tablets easily and fast. We decided to serve data that is split into small portions and bring out the main actions. One of the special features, in this case, was to swipe columns in the mobile table view. It helps users to follow the data on their devices without missing any important information. In the same view, we locked the column with main actions and made it anchored to the view, so users can use them at any time. For the purchase order view, we came up with a different approach and prepared a completely separated view for mobile devices. In this case, we decided to display tables’ rows as classic form fields, which helps the user to see the whole information about purchasing an item at once and edit it quickly if needed. To avoid a lot of scrolling, we also added expandable rows that make it easier for mobile users to focus on the selected section of data and jump between different views of other sections without scrolling.

FURTHER APP DEVELOPMENT NEW CHALLENGES RESPONDING: STREAMLINING THE GENERAL APP WORKFLOW

Another step in the product development process was to analyze the specific types of users and tasks that are assigned to them in the system. While analyzing each module we combine UX knowledge and the industry (financial) knowledge provided by the client in the form of materials and general feedback. We focus on the analysis of financial rules, the current process that we want to include in our software and the priorities of the user who will use this module. We choose the data which are already in the system and are important for the users and combine them with the new functions which are necessary for them.

While the first stage of our Railwaymen teamwork on the project (MVP) was focused mostly on fast and accessible communication (fast preview, mobile display of tabular data, notifications, automatic data flow between users), the next stage was to provide complete financial data and document flow between Cost Tracker and external accounting programs. In this case we focused on precise data presentation and process automation. From the interface point of view, our goal was to optimize the work of the accountant and people supervising the processes in the company. A very important challenge at this point was to enable implementing a large amount of data at once and approving the tasks that have been automated through the software fast. To make it possible as a Cost Tracker you couldn’t have any issue with navigating through the software itself.

To achieve that goal, we improved the visual presentation of data, e.g. in the budget’s module, where we present current budget allocation and burning. We also show simplified charts in tables to present the user with the best possible knowledge about the task in a minimal form.

Photography of Sylwia, UI/UX Designer

Sylwia, UX/UI Designer

“Efficient communication and design process conducted from the beginning of the application's development allowed us to smoothly move on to designing more complex modules and taking into account feedback from customers. Thanks to the fact that we work together from the start of the project it is easier for us to analyze new processes, incorporate them into the existing structure of the program and find places where inconsistencies may appear already at the stage of idea analysis. From the design point of view, it's extremely valuable to learn how the process we're going to automate is currently implemented for potential customers. This allows us to take a closer look at the needs and, as a result, create an optimal and user-friendly interface.”

4. Frontend

Fluid design (RWD)

In a view of today’s usage of mobile devices and its high development pace, we decided to apply the most flexible solution while building CostTracker platform. The widely used Responsive Web Design approach requires additional effort and sometimes might be not enough when it comes to viewing processed data on devices with different screen sizes such as desktop, tablet, and smartphone. In our projects, we stick to using techniques based on Fluid Design, so applications created by our team support the actual screen’s width and height, despite changing that once using the software. In a nutshell, the UI of the web application is always fully adjusted to the workspace of the current device.

Formir

Customized CSS3/HTML5 framework which is using a pure CSS approach to be completely integrated with the application. This framework is based on the comprehensive Grid module system, which allows to easily adjust Responsive Web Design technique to complex layouts.

Photography of Konrad, Frontend Developer

Konrad, Front-end Developer

“Based on many years of experience, I decided to approach this project with an innovative concept. I was inspired by the idea of creating a clean, minimalistic code that fully exploits the capabilities of modern browsers. As a result of using the original framework (which uses all the benefits of CSS3 language), I have developed a highly scalable template for mobile devices. This is a completely comprehensive fluid & responsive design, optimized for speed and fully modular in the context of long-term maintenance and further development. I have also introduced a lot of innovative solutions designed by our UX designer, i.e. fully responsive tables and forms. All of these have been done without the need for JavaScript support in each case.”

4. QA

CostTracker purchasing software is a perfect example of an application that is most efficient to test using automation. As the application is growing through time, with more and more active users and data stored inside, it became clear that regression testing is not sufficient anymore, taking 30-40% of our Quality Engineer time. This method of software testing also requires a lot of focus and precision, which when the amount of data constantly grows becomes harder to maintain. Thanks to automatic testing as a client, you pay the same amount of money, simultaneously receiving higher Quality Assurance coverage and higher certainty that your app will work in numerous scenarios!

Yet bear in mind that we recommend automatic testing mainly in cases of highly developed, processing large amounts of data software. When it comes to application MVP - it’s not the most efficient solution, as manual testing usually works fine in case of simple apps. Anyway we’re proud to say that we can do both: start with your app MVP, test it manually and then, as it will grow - switch to automatic tests. Not every software development company can do that! The most important challenge in the case of the CostTracker project was to define the application scope, i.e. to analyze which tools should be used to test it and which areas should be automated. Because there is no golden mean and everything depends on the context, i.e. project characteristics. After creating the automation framework, the next challenge was a large number of integrations that need to be handled quickly and without failure. The challenge is that these are separate systems, so creating e2e tests on systems that we don't have control over can be risky. That's why we decided to use the API so that frontend changes won't affect the tests themselves.

Photography of Tadeusz, QA

Tadeusz, Quality Assurance Engineer

“As the effect of the CostTracker software continuous growth, the number of user roles and various accesses made manual testing time-consuming and checking each part of the system difficult.

Creating tests and scenarios using Cucumber and Gherkin syntax is a very clear and simple solution also for non-technical people. Gherkin is a language which gives the possibility to describe technical aspects in a "poetic" way. We’ve started the whole test automation process from the most critical functionalities, and those that are most important from a business point of view.

Thanks to Quality Assurance process automation I can test the application on many browsers and environments using the same tests. As a result, reliability of created applications is increased and costs of manual tests which are spent on regression tests are reduced in case of stable functionalities.

Final Product

Final product image

RESULTS & FURTHER DEVELOPMENT PLANS

The first version of the platform was successfully released at the beginning of September 2018 and is constantly gathering positive feedback from the very first users. As we're writing these words in July 2021, over 700 company accounts have been created inside the software, almost 3000 budgets have been currently managed through CostTracker and over 100 accounts are actively using integrations mentioned above. That's a really great score in such a narrow business sector as purchase order management is! In the near future, we plan to introduce the Custom Reports, Invoice Module 2.0 (a complete redesign and expanding functionalities), and Cashflow - an entirely new functionality that enables the user to monitor how the funds flow through the entire organization. As the demand for custom FinTech apps is constantly growing, and more and more tasks you can automate through the right software - we're sure that the development possibilities are constantly growing!

Testimonial:

“The team’s ability to align with our goals is outstanding. We needed a full-stack development partner and Railwaymen has delivered up to our expectations. They understand the product and what we want to achieve for our clients.”

Tore Andreas Hansen & Torstein Floden, CostTracker Founders

We are real!

Let's get it started!

Do you have project details?

estimate project
Joanna Brzezińska-Wajda - Head of Sales

Joanna Brzezińska-Wajda

Head of Sales

Previous All Next