UI-UX designer, Front-End wed developer,
Web Marketing certified, 3D designer
©1996-2021 Gianluca Panebianco

UI/UX design for WMS Software (Automated Warehouse Supervision)

By Gianluca Panebianco, Published: 23 Jan 2021

Home > Portfolio > UI/UX design for WMS Software (Automated Warehouse Supervision)

UI/UX design for WMS Software (Automated Warehouse Supervision)

Within the Taiprora development team, for an independent factory (Italian leader in intra-logistics automation technologies), I worked on the design of the User Interface for a series of industrial WMS software developed for their end-users, for supervision and control of Automated Warehouses.

The graphic concept creation was quite important as the Customer's request was to create a series and parallelized similar projects: until today we have developed about 15 different projects between 2019 and 2020.
The end-uses are companies located all over the world (Italy, Russia, USA, India, Romania, Spain, Portugal, etc.): some of these are corporates, such as key players in the beverage sector.

In the galleries below you can see some screenshots of the various WMS software developed.

My role as UX / UI Designer

As UI and UX designer within the Taiprora team I have been involved in:

  • Template layout definition, creating the graphics for an application prototype, including the Main Synoptic screen, and some sub-area details such as Warehouse area, Inbound area (entrance), Outbound area (exit), Stacker Crane area and management masks (PLC connection , alarm mask, station detail, etc.).
    The goal was to make the template flexible for immediate start-up (easy setup) and future changes, but at the same time provide a graphically pleasing interface and illustrative of the actual controlled area: therefore NOT using diagrams and components of libraries with a diagram-style interface, but graphically creating the real operational warehouse area within the end-user factory.
  • Graphic design of the application, creating software mockups for each project to be viewed and approved by the customer and his end-user.
  • Starting from the basic template, in each project I have collaborated with the developers providing them all analysis and solutions related to UI / UX, following the requests and customizations due to particular needs or particularly complex warehouse structures.
  • Then, I provided all the graphics parts the developers needed to make everything work in the software, such as:
    • Splash, About and Application icon of the WMS application
    • Synoptics in bitmap format of all areas to be displayed
    • Toolbar icons
  • For each project, I also manage the conversion of CAD layouts provided by the customer (usually AutoCAD projects in DWG format), lightening their details and converting them into one or more bitmaps (PNG).
  • Finally, I also edited the User Guide, which was also almost totally standardized to take less than half an hour to write it.

WMS software design details

Given the numerous customer requests, as an internal team we have conceived and created a basic application in C# (project shared on TFS) as a template, in order to start from a software with a series of basic functions, and customizing it based on the specific project requests.
My role in this phase was to define, within the team, a graphic interface that was nice but at the same time required as little time as possible to be adapted and modified according to the specific needs of the client: this required an internal brainstorming to define the best approach to follow and to optimize our internal processes.

The most complex part to define - since Taiprora wants to stand out for the quality of its products - how to approach the visualization of the warehouse layout.
The final decision was to create one or more synoptics (depending on the complexity and size of the warehouse to be managed) to view the plant to be controlled.
This is necessary since for each controlled element (each roller conveyors, movers, stacker cranes, shuttles, agv / lgv, etc.) had to display a series of LEDs to define all the operating states.
Additionally, another goal was also to show every single element in motion, displaying it in real-time.

Project details

The software allows the user to manage in real time the warehouse , of each its sub-area and of the most important elements included: user can control the entry and exit of products, semi-finished products and pallets from the warehouse.
This is not a simple supervision software: there are functions for the creation of missions, the possibility of excluding elements or sub-areas from automated operations ( switching some items from automatic to manual mode).

The entry and exit of each LU (logical units, whether they are pallets, boxes, reels, etc.) from the warehouse is managed by a series of roller conveyors, movers, shuttles, and shuttles, also totally controlled by the software that maintains the traceability of each element: to make this possible, missions and sub-missions are defined in realtime to enable the movement of materials through the sections.
The Taiprora team has developed an ad-hoc algorithm that manages all these movements, optimizing them to minimize execution times.

In this way, each product in the warehouse is perfectly tracked, allowing the company to assess the need for procurement of materials, modification of production, etc.
Depending on the cases and the needs of the end-user, eligibility criteria for the entry / exit of products from the warehouse can also be defined by the software.

Furthermore, the software interfaces with the MES and the company management system , making the information collected also available to the Management for the creation of statistics and reports in real time.

The advantages are that each product is tracked, allowing the end-user company to achieve the following objectives:

  • complete production and product traceability
  • cost reduction
  • error reduction (zeroing in some cases)
  • optimization of the production process
  • local-remote and real-time control
  • production statistics and reports

Possible (future) improvements

Of course during the development phases we have identified some possible improvements, such as:

  • Adoption of vector graphics for libraries and synoptics to make possible a series of operations via code-only such as cut, zoom, resize, rotation animations, change the colors of the elements, etc.
  • Alternatively, reduction of conversion times for DWG> PNG
  • synoptics using faster procedures and adopting licenses for better softwares

Results and conclusions

The approach we used for the realization of these WMS software has allowed us to satisfy not only the customer's requests, but also respecting a very short delivery dates, and at the same time satisfy our internal needs, managing to gradually reduce the development times necessary to complete each project.
This, thanks to the following global characteristics that we have adopted:

  • Reduced development time (graphics + developers);
  • Process automation (UI, UX, User Manual);
  • Reuse of materials where possible (eg menu icons);
  • Standardized UX and UI;

If you have any questions about this project and would you like more information, leave a comment or contact me...