UX/UI web case: realtime drag & drop web scheduler interface for food production and packaging
For an Italian company leading in the food sector, I did an UX analysis and the UI design (graphic interface) for a weekly and multi-plant production scheduler, completely web, realtime, and drag and drop.
User needs and requirements
The customer's request was to create an intranet web application let their users to plan and schedule the whole industrial production and packaging, divided into two different plants, each of those including 11 production lines and and packaging as well.
The main problem was the production rate requested by the management are to produce tons of quintals of different products: these products had to be packaged differently, depending on the target market (the company produces in Italy but exports its products all around the world): production managers must organize production considering the availability of production lines based on downtime and a series of other assessments, but always having the entire production area under control and production efficiency.
The Customer needed an adequate, functional and usable solution: he had turned to several other companies, without obtaining a satisfactory result.
My role in this project
Within the Taiprora web development team, I first dealt with the design of the User Experience (UX), and then moved on to the design of the User Interface (UI), creating a series of sketches for internal brainstorming, then mockups to show our idea to the customer, up to the prototype in html and css which was then completed by the rest of the team with dynamic data and code.
Project Detail
The application has two access modes:
- users of the Management area, which send to the production users their request for products to be packed (and then delivered to satisfy the orders received worldwide). These requests are imported to this web application from the company management software through a script;
- Production Users: this is the core of the application to plan and schedule both production and scheduling.
Production and packaging scheduler / planner
When a Production user opens a Weekly Requirement, the Application show the Planning area, divided in two main areas:
- a sidebar on the left: it includes the list of products of a selected week. Each product has shown as a tag with its name and the quantity in quintals, but also the type of packaging (since the same type of product can have different packaging depending on the country of destination). Moreover the color of the elements varies according to the type of main "ingredient" used in its production (light gray is the Customer's "standard ingredient");
- on the right, for each plant, a weekly calendar includes as many columns as there are in production and packaging lines: each line includes one for production and one for packaging; then, there is a row for each hour, for a rows (24 hours a day for 7 days).
By dragging a product from the left sidebar to the grid, the user can schedule (even partially) the production/packaging inside the Planner: by clicking on the planner element user can enter the production hours, or the quintals to be produced -> the application via a conversion table resize the length of the schedule (required production duration). It is also possible to click on the lower border of the schedule and move it up or down to increase / decrease the length of the element.
The application database includes a conversion table for all products, to calculate the time needed to produce a quintal of product: the Customer can add new products or modify existing ones by entering their name and the production time needed to make a quintal of product.
A similar table is available also for packaging: packagings can vary in different markets for sizes, boxes etc.
Inside the Planning interface, when a requirement element is completely used, it is positioned in the lower part of the sidebar.
To let scheduling operations easier, a "Ghost Line" is also available, a support line on which operators can temporarily place the intervals already planned but which must be permanently placed.
Line stops are also managed: when a line is not available (for example due to scheduled maintenance): in this case cells involved by a stop not available for selection and scheduling, they will appear in grey.
The Administration Area allows the user (administrator) to manage all information used by the application: production plants, number and description of production lines, name and product codes (to be packaged) and their quantities in stock, name and code of packaged product, name and color of the main component on the UI, etc.
The application also includes a reporting and planning progress area: in this way both the production operator and the management will know how much production has been planned (as global statistics), and exactly which products have already planned in each week (detailed statistics by a single product).
Critical features
Complex challenge on UX: the Client reported this project was requested from numerous suppliers and no one has ever managed to produce a truly valid, usable and effective tool). Our solution has achieved the complete appreciation by our Customer.
Conclusions
At the moment this web application has been released into production, used by the customer with satisfaction. We therefore obtained the result requested by the customer by creating a completely web-based industrial production and packaging scheduler within its intranet.
If you want more information about this project, contact me or follow me on mysocials media! :)