We use cookies for statistical purposes. If you do not consent to use cookies, block them.

About Project

Costtracker logo

About company:

CostTracker is a cloud-based platform which helps companies save time and money through total control of costs in the organization.

our work

Front end

Frontend

Back end

Backend

Qa

QA

Grap des

UX & UI

1. Process

Workshops

We had a chance to meet our clients in person - they visited our office before they made a decision to work with our company 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.

Communication

At the beginning of the project, a complete understanding of the business need was essential due to the specificity of the financial aspects in various companies. Our team had a possibility to familiarize with the product vision as well as analyze business requirements which 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 in 3 months.

During the development process, we have established a communication flow that was agreed 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 clients as well as end-users expectations.

Workflow

For ticketing purposes, we are using Jira and our clients feel comfortable with 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 request

New client’s request

Verification

Verifying request by the team

Jira

Adding task to Jira

Workflow

Taking care of workflow

Review

Assigning client for task review

Completed task

Completed task

Weronika nowak

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 in a proper way with the whole team. Our clients were involved in the development process on daily basis, which was really supportive because we gained the feedback from them at each stage.“

2. Web app

Cost tracker imac

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 role 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 in the Item List.

In the system, there are different user roles defined as well as the general transmission of documents in the company. As a result of having that implemented, the digital process of creating, approving, invoicing and archiving purchase orders helps in saving a lot of time and is relatively easy to use just after the first login.

Creating purchase order

Real-time cost tracking

Thanks to the provided comprehensive solution for the company employees, there are different views that are based on financial data records and advanced calculations on the backend side. Users that have an access to such views are able to effortlessly draw conclusions based on already processed data. Our developers implemented the budget, budget category, and accounting views based on our clients' expectations. As a result, CostTracker allows real-time tracking of budget and costs for companies that are using the system.

Real time cost tracking

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 a full access to manage the company employees, system users, and assign to them 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.

Users
Tomek

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 application’s main flow, and ending with its implementation. I enjoyed working on the Purchase Order form where we used ReactJS components because of many user-friendly features. Also, the financial parts of the application were really interesting from a database perspective. Mentioning best parts of 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.”

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.

Responsive table
Mobile view

Quick access for the approver

Quick access to data on mobile devices was necessary for users with 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 main actions. One of the special features, in this case, was to swipe columns in mobile tables view. It helps users to follow the data on their devices without missing any of the important information. In the same view, we locked column with main actions and made it anchored to the view, so users can use them any time.

For purchase order view we came with a different approach and prepared 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 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 view other sections without scrolling.

Sylwia

Sylwia, UX/UI Designer

“The key takeaway in this project was the communication process established with the client at the stage of interface and interactions design. Apart from classic methods, we were using an online prototyping tool that allowed us to effectively present ideas to customers, test them and get immediate feedback.“

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 of changing that once using the software. In a nutshell, UI of the web application is always fully adjusted to the workspace of the current device.

Fluid design

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.

Formir grid
Konrad

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 has been done without the need for JavaScript support in each case.”

4. QA

Quality assurance process was quite demanding due to the PO flow complexity. We had to verify if each aspect of the application is working properly and what is the experience of using the system in various cases and while having different roles assigned to users.

Tadek

Tadek, Quality Assurance

“CostTracker is a very interesting project with many challenging aspects in the QA field. In projects such as this one, the very important, if not the most important is a secure testing. I had the opportunity to use the Test Arena tool to create test cases and track the whole testing process. Creating a database of test cases helps to be more confident that providing quality process is flawless. I approached this project with a passion for testing so exploring every aspect and every case wasn't tedious.“

5. Technologies & integrations

Html HTML
Css CSS
Js JavaScript
Rails RoR
React React
Es6 ES6
Webpack Webpack
Formir formir
Analitic Analitic
Jira JIRA
Slack Slack
Uxpin UXPin

Final Product

Railwaymen final product

Results

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.

Testimonial:

Copy

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

Do you have a creative idea for an app?

Estimate Your Project
Arrow Previous All projects All Arrow right Next

Sitemap