“Paramount Apparel Prints All of Nike’s T-Shirts. Matchbox Design Group makes the software, VMS or Visual Management System, that runs their production floor.”
Paramount Apparel Inc screen prints an incredible volume of t-shirts in all shapes and sizes. They have over 22 presses kicking out 4 million shirts per week. With this kind of volume, keeping track of the job list and schedule is a critical task to their operation.
Discover – PAi Inc.
We started by digging deep into how PAi runs this very large and profitable sector of their company. As a digital marketing agency, we consider digital to be a natural way of life. However, there are many things that are still driven by physical and tactile interfaces. PAi used a series of whiteboards and magnets with details about each job on them to organize the schedule for the day.
From a “Work In Progress” spreadsheet, generated by an AS400, listed each job and specific details about the type of ink and the design to be printed on the shirt. Essentially each row of the spreadsheet is turned into a magnet (or card). These are used on the whiteboard and organized by priority and under which press it was assigned to. Press operators would come into this central
The system PAi developed to run their presses has been considered best-in-class. Visiting people from other countries have come to view, study and learn from the process.
Our challenge was to make this system digital in order to automate cumbersome parts of the process. Helping communication channels throughout the factory floor.
[one_half padding=”0 0 0 5px”]
[/one_half]
[one_half_last padding=”0 0 0 5px”]
[/one_half_last]
Visual Management System Design
When we approached design for the PAi management system, we knew it would be heavily driven by their process. We wanted to create something that was familiar but more easily managed. As well as something that could expand to other stations on the factory floor in stage two.
Matchbox wanted the transition to be logical and maintain some of the tactile feeling that their previous magnet and board system used. Keeping this in mind, we designed a grid with a column for each press on the factory floor. A staging board gave easy access to every job in the queue and jobs could be physically dragged to assign them to the appropriate press. Originally, this staging board was fixed to the side of the screen, but this limited the number of presses available on one screen. Our solution was to position the staging panel as a collapsible menu at the top of the screen.
The design for the individual job cards was heavily driven by conversations with PAi. Figuring out what was needed to assign a job appropriately to a press. The cards were assigned a color based on ink type (ex. blue for water-based) and the most important data was displayed in organized fields on the card. We also included an indicator for the number of jobs in each group, as well as icons that could be clicked on for further information. These icons allowed for the ability to view the full card as a pop-up, edit the card, and see all the cards in a group/complete them.
Screen Design
Additionally, we designed a screen for entering information into a job card that was accessed via a button on the main menu. This screen filled in the physical “card” as you added information to the list of form fields on the left. Easily accessible call-to-action buttons gave users the ability to save & exit, move onto another card, or delete, so job cards could be made quickly in batches. We also created a table with the ability to complete or GH jobs when they were completely finished. The table would only allow you to complete a job when all other jobs in the group were completed.
Visually, we worked to keep the entire system user-friendly and clean. We chose Work Sans, a clean sans serif typeface and friendly, but bright colors to keep the cards organized visually.
Development Of The VMS System For PAi
Since the system needed to be extremely flexible along with allowing for automatic updates without refreshing the page. Both Laravel (server side) and Vue.js (client side) we felt were great choices to accomplish these goals. They both allow for rapid development and lend themselves to be flexible enough to handle any future digital requirements.
We choose Vue.js since this allows for incrementally updating the page by updating the underlying data instead of the structure of the page. This allows for less chance of bugs associated with page structure manipulation. It uses a concept of components which allows each section to be controlled independently of the rest of the page. This allows for granular control of different sections of the page. Vue.js allows for taking a JSON response from the server and injecting it into different components of the page easily. This way we can easily request small chunks of data from Laravel to accommodate updating smaller sections of the page incrementally without requiring a full page refresh.
The Flexibility of Laravel
We choose Laravel for the server side framework primarily for the flexibility of the framework to conform to any requirements we could have. It also has an event system that allows for using websockets to broadcast changes from the server to the client. It does this without having to repetitively check for changes. This allows a change made on one computer to be reflected almost instantaneously on all open devices. Laravel also has great testing facilities to help stop regressions in the code when adding new features to the application. We used PHPUnit for testing smaller units of the code base and Behat for more overarching integration testing that allows for executing the whole application in a browser.
Laravel also has a suite of applications that help with maintaining local development environments using Laravel Homestead, deployments using Laravel Envoyer and hosting environments using Laravel Forge. This allows for easily maintaining the different steps in the overall lifecycle of building the application. It also allows for all environments to be as close to the same as possible which can help catch issues long before the application is in production. This way we know the tools will be closely aligned with any enhancements of the framework.
Deliver
The VMS integration is going smoothly as we work on new requirements to build. Each phase of the system will help improve communication and save lost time on the factory floor.
[cta-button background_url=”https://matchboxdesigngroup.com/wp-content/uploads/2017/01/PAi-VMS-10.jpg” title=”Contact Us For Your Next Project!” button_text=”Contact Us Today!” url=”https://matchboxdesigngroup.com/contact-us”]
