Introduction

UI/UX elements in ERPAG. The logic behind the components.Data-crunching design principles.


In this text, we will try to explain the basic principles of the Erpag user interface and user experience.

As we can see, on the Erpag home page, we can differentiate three different areas:
software interface

The first area is the left-hand side of the screen, i.e. menu.

The second part is the middle of the screen, the ‘active’ area where all the user interactions and document reviews take place, as well as the selected view of different options (menus), thematically organized.

And the last but not the least, the Call To Action (CAT) buttons that make an integrated part of the call to action tab (together with the active area) and that also represent some of the actions that can be carried out in the action panel (‘panel’ because each is represented as a card, and by switching between them you are able to choose which one will be actively used at a particular time).

Erpag menu is organized according to the modules it contains and each of them represents a specialized part of the software that manages one totally within the enterprise. Within each of the features, all the options are organized as a menu as well, where by clicking on one of the offered options you are actually choosing to open it as an active document that will be shown in the active panel.
software interface


The black tiles within the module represent the documents and their intent is inputting data, while the grey colored ones represent the reports based on those documents and the system is generating them according to the data that it’s pulling from/ in the database.
software interface


Opening any of the documents within the features is done by a basic click, and that will lead us to the grid structure i.e. the spreadsheet for the opened document. It takes a lot of time and experience to develop a grid, that is as report oriented as this one and the true value and advantageousness of Erpag. You will be able to completely appreciate only upon entering a large number of data, then you will be able to experience the benefit of the options built in each grid. For example, the sort option in the header of each column, find, filter…
software interface


The entire idea behind the grid and through it’s development is the readiness for generating reports, in the sense that it provides the fast implementation of the business intelligence features that are providing a very simple way for the user to get very specific reports from a table chart, as well as the complete oversight to the data sets.

In the upper right corner of each of our lists there are additional option buttons:

Quick filter button, that acts up according to the content and by entering any character, you are able to filter each of the columns. It’s possible to use this option by combining and filtering different columns at once.

software interface


software interface

Delete is used for deleting the data from the list and the ‘more’ option offers you even more options to the ones that are already offered to you within the spreadsheet.
software interface

One of the non-visual principles that are important to explain is that, if there is a data form that is represented by a column in Erpag and it’s anticipated to appear on the spreadsheet, but the user of the software has no use for it and decides not to enter it at all, that column will not appear on the spreadsheet as well. Therefore, if the user doesn’t need and doesn’t use some of the offered options, those columns can be hidden from the spreadsheet. The goal is to unburden and clear the user forms, because every business model has certain premises on which it’s based (which he uses), so if one of them is not ‘product category’ or ‘product trademark’ Erpag has the ability not to show them on the lists.

software interface


CTA buttons


The bigger part of the CTA buttons offer the standard options.
software interface
 

For example, the close, the refresh and the Academy button you can find on almost every document and list in Erpag. But, from document to document, you will see different buttons appearing and disappearing and each of them will represent some of the actions that you can conduct on the given data (that will be further explained within those documents).


Document forms


The pointing arrow in each of the lists (for example, sales order list) is actually an active icon in all Erpag modes. This icon actually represents a link towards the entities that are shown on the spreadsheets and by clicking on at you are actually opening the document form of that entity.
software interface

The document form is following the same design principle as the rest of the software.

software interface

The white color is representing the paper and the document within it is divided to different parts, thematically organized by the following: the document header, customer information, addresses, items that will be entered in the document and, depending which document we are creating, we will have other additional panels. Some of the additional panels are standard, some of them appear only within certain documents; for example ‘Packing list’ appears only when generated, but Events, Attachments are standard for all of our documents. Every panel can be collapsed and expanded as needed.

Within the documents, we also have status symbols, so in the upper right corner we can see the status of the opened document, and the call to action buttons on the right side of the screen adjusted according to the intent of the document in which you are currently working in.
software interface

The green color of the CTA button represents the next step, i.e. it advises you what is the next action that you need to take. Since Erpag has a built-in intelligence in the background of the system, based on the IT data we can conclude what is the next step, then for example, if the document is packed, Erpag will let you know that it’s ready to be Invoiced. By clicking on that ‘Invoice’ button you will activate a certain operation, in this case generating a bill, and you will also see these changes reflecting on the status symbol of the document, and the system will let you know that the document is Invoiced but not yet paid, so the next operation in order will be the payment.
software interface
software interface


The color of the field is also indicative of the status of those fields, so if they are colored grey, those are ‘read-only’ fields within the document. By clicking on ‘Edit’ we are enabling changes and we are now able to see on which of the field the changes can be made - they will be colored green. If we are creating a new document, most of the fields will allow changes and if it’s a document that is previously created and we are reopening it, then only some of them will be susceptible to changes.
software interface


 
free demo: https://www.erpag.com

Time-sheets and time tracking

Time-sheets and how to record timing in ERPAG. Track time for each operation in work order and get a complete overview from predefined or custom reports.



time sheets and time tracking
In order to have time sheets and be able to track the time of the work operations in ERPAG, first, you have to have a created work order under Manufacturing > Work Orders.
The work order can be created manually (manufacturing > work orders > create new) or generated automatically from the manufacturing project. Whenever you have work orders in your manufacturing projects, they will appear in the list of the work orders as well.

Work operations are defined under Manufacturing > Work operations. Their price is always set by an hour, but the system will recalculate it based on the realized time.


time sheets and time tracking

time sheets and time tracking



Work operations are added to the work order manually, unless you create a work order that is based on Bill of materials. In that case, the system will pull the work operations, input items and output items automatically.

Work operations have planned time and realized time. Planned time will give you an estimated cost, while the realized time will give you an actual cost.

And you can assign the work operations to your employees and machines.
time sheets and time tracking


Employees are defined under Manufacturing > Employees, while the machines are defined under Manufacturing > Machines. 
time sheets and time tracking

It’s not mandatory for the Employees to be users of ERPAG. That is defined within the created Employee.
Work operations don’t have to be assigned to employees or machines.

The assigned work operations will directly appear in the Time-sheets (Manufacturing > Time-sheets).
We can change the realized time of the work operation manually, by simply keying in hours/minutes.
time sheets and time tracking
By going to Manufacturing > Time sheets, we have all work operations distributed to our employees, and we have work operations which are not assigned. If we open the ones that are not assigned, we can assign them to our employees and machines via the bulk action button.
If we open a time sheet that is assigned to an employee, we have the possibility to manually enter the realized time for each work operation.
time sheets and time tracking

Or even assign a machine or set that the planned time equals to our realized time. Therefore the Current effect will be 100% and your actual cost will be equal to your estimated cost. Any change that we enter in the time sheet will reflect on the work operation within a work order.

The time-sheet management can be done by a worker (employee) or an individual person can input the data at the end of the working hours or after the work operations are completed. For example, we can have 20 workers who will work in the production, and one advisor who will manage the time-sheets for all 20 workers. If you want to manage the time-sheets on the user level, the best way to do it is through the Mobile application.

Mobile app


All the entered work orders and work operations (time sheets) in the system will automatically appear in the Mobile application.

Once you log in from the mobile app, you will see how many time sheets (work operations) you have assigned for yourself (as a user).
time sheets and time tracking

If you are an admin, the displayed time sheets will include all the work operations that are assigned to you and all the work operations that are not assigned.

time sheets and time tracking
You can expand the work order information by tapping on the gray area which contains the Work Order number.
When the work operation time is grey, that means that it’s the planned (estimated) time. If you activate the work operation by tapping on the stopwatch, you will see what’s the planned time and you will have the ability to start the work order
time sheets and time tracking

The time sheets with a blue stopwatch are work operations that are assigned to you as a user. While the time-sheets with a grey stopwatch are work operations that are not assigned to anyone. If you start the work operation that is not assigned to you, the system will ask you do you want to assign that work operation to yourself.

time sheets and time tracking

time sheets and time tracking
You can manually alter the realized time by retyping the time, and exiting the form on the back arrow on the top left corner.
time sheets and time tracking

It’s important to mention that for now the system doesn’t track seconds. So if your work operation lasts for 17 minutes and 11 seconds, the system will input just 17 minutes.
Once you open the work operation that is assigned to you, you have the ability to start, pause and complete the work operation.
  
time sheets and time tracking

time sheets and time tracking

time sheets and time tracking
If you click on the complete, the work operation will disappear from the application because the work operation is completed and it’s no longer available to reset or start over.
time sheets and time tracking
The realized time is automatically inputted in the work order, and actual cost is calculated.
You can filter the time sheet list by a work order number or the machine (if it’s assigned) by simply typing the wanted criteria in the filter section.
time sheets and time tracking

If we just open the work operation and click on the complete button, the application will ask you do you want to complete your work operation as planned. In that case, you don’t have to start and complete the assigned work operation. The time will be input automatically in the work order once you confirm it, and it will disappear from the list in the mobile application.

time sheets and time tracking

Inventory Barcode Mobile application

free demo: https://www.erpag.com

Mobile app for tracking inventory and record material usage.Barcode or QR code tracking with serial numbers and lot numbers.


Many developers of the Inventory and ERP solutions are offering as an addition to their software a mobile app. In trying to combine the functionality of the desktop solution, many options are literally rewritten without having any functional appliance. What’s on the desktop version, that is just transferred to the Mobile App. The only change is the ‘responsive design’ e.g. adjusting the form so it can be shown on smaller resolutions of the mobile devices. Those applications are, in most cases, partially or completely unusable for the practical appliance. The only purpose of that kind of application is of a commercial character, e.g. if a potential client asks if they have a Mobile Application. And the maximum range is a review of the documents and perhaps an ‘item look-up’.

Our approach is different.

Starting from these facts:

·         *Everyone has a SmartPhone
·        * PDA devices are too expensive and they require special programming, set up etc. (link: https://www.barcodesinc.com/cats/barcode-scanners/pda.htm?page=1&search=Windows&&sort_by=Price&sort_dir=r )
·        * Their dimensions are small
·        * You can literally find only Ios/Apple and Android mobile operating systems on the market
·        * Every SmartPhone has a camera and it can be used as a barcode scanner 
·        * Soft keyboard enables complete alphanumeric data entering
·        * SmartPhone also has a PS Location and some other sensors
·         * Because ERPAG is a cloud-based software, you can approach the database at any time, from any location because every SmartPhone has wi-fi or mobile data (3G/4G)
·         * It’s easy to install the application to the SmartPhone through the App Store or Google Play (link: https://play.google.com/store/apps/details?id=com.erpag.barcodescanner )
·         * By applying the Progressive Web App (link: https://developers.google.com/web/progressive-web-apps/) programming solution, you can significantly decrease the development time and, in regards, the price of that kind of application
·        * In the market, you can find powerful protection for  SmartPhones (link: https://www.forbes.com/sites/jaymcgregor/2014/09/30/the-top-5-super-robust-cases-for-your-iphone-6/#298180ca6b76 ) with whom you can reduce the sensitivity of those devices in the industrial appliance
·         * The way of entering data and consuming the content on the Mobile App is different than on the classic Desktop computer. Mobile devices cannot entirely replace Desktop computers, especially considering the productivity of data entering. That means that the options and functions have to especially generated for a productive entering and reweaving of the data.

We’ve managed to build an Inventory app for SmartPhone that has a practical use.

The functionality of the app you can also verify on the desktop version, by going to the Mobile App feature from the Menu.
Inventory Barcode Mobile application

The application is divided into two parts: Inventory and Point of Sale.

 

Inventory


While designing, we were guided by the question ‘What does an Operator need while working with the Inventory? What is the best way to satisfy those needs with the help of a mobile device?’. The answers to those questions we have allocated in the main menu. 
Inventory Barcode Mobile application

Item Look-up


The main requirements for an Operator working in the warehouse are to be able to check which items he has in stock, where they are located, what is the detailed description for an item, which are the available serial and lot numbers, to be able to check the expiration date and, if needed, adjust the quantity.

Inventory Barcode Mobile application

By activating the Item Look-Up option on the menu, we will open our stock list. The list is assorted according to the SKU numbers under the item name, while the quantity and barcode number are shown on the right side of the screen.

Further details of the items we can see by clicking on the arrow or on the facet of the item.
By pressing the button with the camera image, we are activating the option of scanning barcodes. This option supports most types of barcodes (including EAN, EAN13, UPC, QR Code). The camera is optically decoding the barcode.
  
Inventory Barcode Mobile application

Inventory Barcode Mobile application


In the warehouses, the lighting is usually weak, so you have the option to turn on the ‘Flashlight’ for the purpose of better scanning.

The speed of scanning with the SmartPhone camera depends on the device itself. Laser scanners are much faster, and in the market, you can easily find ‘Bluetooth’ laser scanners that can be connected to the SmartPhone.

The search is possible through the soft keyboard as well. When you click on the search field, the soft keyboard will appear and you will be able to enter data. By clicking on the ‘Enter’ or ‘Go’ option, the search will commence. If the data is not found, the field for entering will become red. This regime is used for the fast search, and if we have a ‘Bluetooth’ scanner device connected, the scanned data will be written here.

Inventory Barcode Mobile application

If we want to manage the search based on the beginning of the item name/description or a part of that description, we have to guide the search by using the filer option. We can do that by clicking on the barcode image in the upper right corner.
Inventory Barcode Mobile application


By entering the text using the soft keyboard the list is being filtered.  All the parts of the search will be marked with the yellow color. By clicking on the item facet, we can open the details of that item.
The details of the item are showing us the basic information, the quantity in stock, the committed quantity, the available serial and lot numbers, as well as the images of the item. This application is designed for the stock manipulation, so it doesn’t show any prices.


Inventory Barcode Mobile application

If the restrictions (set up by the Admin) allow it, the ‘set quantity’ option will be enabled and it will be possible to adjust the quantity of the item in ERPAG according to the real physical count.
In our upcoming versions, we are planning to enable printing labels directly from the mobile application.

Receive


Receiving the items in stock is never easy, and we have encountered these types of cases more and more often:
·         During the day, the couriers are delivering different packages at different times
·         One courier service is delivering for multiple suppliers
·         The items from one Purchase Order are delivered in multiple packages and from different cities
·         Because of the DropShipping, the Supplier often remains unknown to us
·         The labels on the packages are enabled to categorically mark the adequate Purchase Order, because the document labeled on the package is the Sales Order from the supplier and it is not entered in the system
·         We can also find the items that we haven’t ordered in the delivered package
·         The suppliers can deliver only a part of the items we ordered at the moment, and the rest of the items will be delivered later on
Considering this, we have designed the ‘RECEIVE’ option
Inventory Barcode Mobile application


When we activate this option from the main menu, we will open a list of items that we are expecting to arrive. The ’Open Purchase Order’ list is the equivalent of this list. The items on this list are grouped according to the Purchase Orders. And we can see the details for each Purchase Order by clicking on the ’collapse panel’ icon.


Inventory Barcode Mobile application


For each item that is being received, we have to confirm the quantity. That way, we will prevent the Operator from placing the items in stock without checking the quantities first. On the right corner of each facet on the screen, you will see the information of the received and of the required quantity (marked with the red rectangle in the screenshot above).

Packing – Sales Order


Usually, workers in the warehouses have only their phones on hand. Therefore we created the Packing option of input sales orders. The sales order must be entered into the system from the desktop computer, laptop or tablet, and it will automatically appear on the mobile app as well.
Inventory Barcode Mobile application

Inventory Barcode Mobile application

Inventory Barcode Mobile application

When you activate the option from the menu, you will see a list of all the items that are available for packing. The items are grouped by Sales Orders, and they are sorted according to the date when the Sales Orders were generated. Also, the first on the list are the Sales Orders that have ’Available quantity status, i.e. that are marked with the green color. The Sales Orders marked with the color yellow have a ’Partial Quantity’ status.

The ’Available Quantity’ status means that all the quantities on the Sales Orders are Reserved, so it is possible to pack them entirely. While the ’Partial Quantity’ status means that only a part of the items is reserved and ready for packing.

By scanning the barcode by camera or by using the manual search, you can will the quantity that you want to pack regardless to which Sales Order it belongs to. If the same item belongs to more than one Sales Order, the application will ask you to which Sales Order you want to assign it to. The search only affects the items that are reserved in the Sales Orders (i.e. the ‘Reserved Items’ report)
You can search the data through the ‘Filter’ option that is activated by clicking on the ‘Barcode’ icon in the upper left angle. That’s how you will change the way of searching through the data.
Inventory Barcode Mobile application

By clicking on the item, it is possible to manually add the quantity. In case that it is necessary to enter the serial and/or lot numbers for the item, then the entering process will adjust to that. The serial number we can scan with the camera, add it manually or choose it by clicking on the ‘Lupe’ icon.



Load-material-Work-Order

In the 5.0 version of Erpag there was no direct possibility to partially load and partially deliver items in the work orders.


With the ‘Load material’ option you could handle those types of business situations. This is very common during the production of big batches, because in some cases, you will want to partially load material and produce as much as you can and partially deliver the finished products to your end customer, before you complete the whole work order.

The packing process in the 5.1 version is done in two steps. The activation of the process starts by clicking on the ’Load material’ button.

Load material in work order


After the activation, in the same document the ‘Material loading’ will be generated and it will suggest the items and their quantity for loading.
Load material in work order


The quantity that you want to load you will enter in the list by simply retyping the suggested quantities. For the items that are completely unloaded, you will either type in zero as a quantity or delete it from the list.
Load material in work order


With the ‘Post Document option’ we are loading the items and their quantities that we adjusted, and those items will be removed from our stock.

If we haven’t loaded the complete quantity, the ‘Load material’ option will be visible again and we will have the possibility to generate a new Material loading document, where the system will offer us the rest of the quantity.

The existing Work Order changes: for each Material loading document that we generate, the system will create a ‘Material loading’ panel within the Work Order, that we will be able to expand in order to see the loaded content.
Load material in work order


Load material in work order


In case there has been a mistake during the packing process, it’s possible to separately Void any of the Material loading lists or the entire Work Order.
Load material in work order


After the entire quantity is loaded, it’s possible to ‘Deliver finished goods’.

The status of the Work Order will be ‘Material loading % - 100’ if all the items and their quantities were loaded, and with a corresponding percentage if they are loaded partially.

Load material in work order


Serial / lot numbers


In the 5.1 version, if you track your materials by a Serial and/or Lot Numbers, those columns will automatically open when you click on ‘Post document’, and you will be able to add them in case that information exists.

Load material in work order


Mobile App (iOS / Apple / Android)

The change is visible in the Mobile App as well.
Load material in work order

Load material in work order

Load material in work order

       
The quantity can be entered by scanning the item Barcode with the mobile camera or by using the Manual Search, regardless of that to which Work Order it is being loaded to. If the same item is located on more than one Work Order, the application will ask you to which one the item is being loaded. The search will include only the items that haven’t been loaded yet (a.k.a. that can be found in the ‘Open Input Items’ report).
Load material in work order

Load material in work order

Load material in work order
     

In case that for some of the items the serial or lot number must be entered, the entering process will be adjusted accordingly.

Loading the items (and generating the Material loading list) can be activated by clicking on the icon in the upper right corner and by confirming that by clicking on the ‘Load material’ button.
Load material in work order

The intention of this application is the fast and easy handling of the work orders. For more advanced options (for example, document changes), you will need to use the ERPAG desktop or notebook version.

free demo: https://www.erpag.com