ZeroDark

ZeroDark is a web-based HR and task management application at the Ophardt Maritim shipyard. This app allows managers to control the teams and processes of motorboat production. There are 3 main user roles: manager, employee and system administrator.

We completed development, fully tested the app and released it within 3 months.

Customer

Ophardt Maritim is part of the international OPHARDT group of companies. The company creates reliable and affordable aluminum boats for mass production, develops new hulls and boat designs.

Technical solutions

Kanban board

We have developed a Trello-like kanban board specifically for this app. The kanban board is made using several technologies. Drag’n’drop function allows to smoothly move items between columns. With the help of WebSocket, the board members can monitor its changes in real-time.

Responsive images

Responsive images is used to support modern image formats such as WebP. Images are loaded in different sizes depending on the screen resolution. At high resolution - it’s small, and at low resolution - it’s large. This helps to save traffic by choosing the quality of each image based on the screen resolution.

Cropper

Cropper helps us implement a user photo editor before uploading pics on the server. This solution can scale it, crop and select the displayed area before uploading.

Phased loading

We used phased loading, React methods and webpack configuration to load only necessary resources on the page, which allows us to save traffic and upload only needed details on the page.

Our task

The Ophardt Team contacted us and we discussed their app design idea, the initial task was to replace the paper jobs management system with a web-based CRM. This CRM should be hosted on internal Ophardt servers, available to all employees and production managers.

Managers will be able to see production tasks for each employee, how much time is left for the task, leave comments and change statuses of tasks with employees

All internal processes and their interconnection should be displayed - management process should be intuitive, based on the Kanban principles.

Screen list

My tasks

Here managers can see all their tasks. The time required to complete the task is highlighted in color:

Green means that 0-33% of the time has passed, the task has just started
Orange, 33-66% - there is still time to complete the task
Red, 66-100% - the deadline is so close

A manager and a user can have several common tasks and only one special task (STC). Clicking on a task opens a modal window with information about it. The manager can change the status of the task and leave comments on it.

Workers

This section contains a list of employees and information about them: department, first and last name, team, task status, etc.

The manager can create new employees, edit their data, sort records in the table by all columns, search for an employee by name. He has the right to change the status of an employee through the context menu.

He also has the right to change the status of an employee or give him an inactivity status through the context menu, switch the view and see only inactive employees by pressing a special button on the top.

Boards

The boards section allows the manager sees a list of teams and Kanban boards within them. It also shows how many active tasks are performed on a specific board, and you can create a new board for the team.

Tasks are grouped according to their status. There are draft tasks, tasks in progress, pending review, and completion.

Teams

In this tab, the administrator can create teams according to their occupation. One team is responsible for a particular project. It is presented in the form of a board on which all tasks related to this project are located.

Results

The screens show only a small part of the work done by the CimpleO team. We have created a responsive CRM system for tracking employee tasks and the status of their work. We solved the problem of a large number of bureaucratic operations, getting rid of the paper system of document circulation. Now all internal processes at the shipyard are displayed in a single system.