We built UB Klem a web application called Klem Connect to track warehouse workflows from the calendar, order, and product level.
UB Klem builds custom-ordered furniture for restaurants and other organizations. Each day, UB Klem ships 5-12+ orders with up to 30 unique products that require custom piece assembly. Lucky for UB Klem, they have a strong supervisor team with deep-seated knowledge of warehouse workflows and an ingrained awareness of daily departmental needs. Historically, order tracking happens solely in these supervisors’ heads and via pen and paper, with different documenting methods. Unfortunately, this has made expanding warehouse production, training new supervisors, and covering shifts difficult, not to mention the room it leaves for human error.
Recognizing this problem, UB Klem tested a custom kanban board to track projects. This created standardized outputs where supervisors could see the same lists of order due dates and product whereabouts. The downside was that feedback couldn’t be given in real-time and had to be entered manually at the end of the day by a front-office employee instead of the supervisor operating the manufacturing equipment.
To resolve the issues UB Klem was encountering, Echobind built a custom web application to track warehouse workflows from the calendar, order, and product level. The idea behind this software is that each supervisor can have an iPad in their department and can easily check off when a product enters and leaves their station.
The Echobind team built a custom web app solution that allows supervisors to see real-time order data on a calendar view that highlights:
• shipment due date and customer details.
• order priority levels.
• new and in-progress order statuses.
UB Klem supervisors can search and filter their calendar view to only see orders important to them.
For UB Klem, filters work in an OR rather than AND fashion in order to pull as many relevant orders as possible. Many filters will work to exclude as much as possible to narrow down on a specific set of information, but UB Klem found it more valuable to pull more information rather than less.
Customer names are also pretty standard across the board, so instead of just having customer names within the search function, we placed in a filter so that the CEO of UB Klem could get better overviews of progress for specific clients.
Users can access detailed order information from the calendar, set order priority, and see where each product in an order is in the UB Klem warehouse. Supervisors can now track when an order’s individual products are in their department and when they leave their department.
UB Klem’s goal was to standardize warehouse workflows and better understand the status of an order at any given time. Klem Connect offered a way for UB Klem supervisors to document what products were in their department in a central and transparent place. This presented three interesting technical challenges for the Echobind design and engineering teams.
Challenge #1: Development - Syncing data between Microsoft Dynamics and the app
UB Klem tracks client details, order data, and shipping information in Microsoft Dynamics. Before implementing this software, UB Klem would copy information from Microsoft Dynamics, type it into a calendar program, and print copies for the supervisors.
In order for Klem Connect to have up-to-date information on each order, we would need to sync with Microsoft Dynamics. Rather than allow changes from Klem Connect to transfer into Dynamics, and potentially break something on that end, we opted to only allow information to flow one way, from Dynamics into Klem Connect, and not the other way around. This greatly simplified our data flow, eliminated the risks around pushing data into Dynamics, and saved some project time, not having to create the UI elements needed to manage Dynamics data in Klem Connect.
Challenge #2: Design - Products do not move linearly through departments
One assumption before building Klem Connect was that products would move linearly through the factory. This was not always the case; not only do products take different paths through the warehouse, but the individual parts of a product can be in multiple departments at the same times. This led to a complicated discussion about the granularity needed while avoiding swamping the users in too much complexity. Instead of tracking every piece of a product, we opted for allowing users to indicate that a product is in multiple places simultaneously. We also built the system in such a way that future iterations will allow us to track products and their parts more granularly.
We implemented a system to track the department status of each product in an order by attaching a list of departments to it and providing radio buttons for users to indicate the current status. This allowed for granular tracking of each product's movement through the warehouse without overwhelming users with complexity.
We ensured that status updates to one product would not affect the tracking of other products. This was achieved by associating a list of departments with each product in an order so that the status of each product could be updated individually without changing the status of other products in the order.
Challenge #3: Dev - Filters need to maintain until users log out
Since many supervisors only need to look at their department, we implemented a filter system that allows users to filter by customer name, department, and order priority, and save those filter selections until the user logs out. This enabled users to easily filter and find the specific orders they need, improving warehouse operations' efficiency and organization. Maintaining filters until the user logs out was critical to avoid having supervisors set filters every time they navigate to another page.
Now supervisors in the rough mill department can set a filter to only see the orders they still need to complete and, at the same time, the office staff can easily search for all the orders of a single client.
Challenge #4: Development/Design - Drawer statuses
Depending on the progress that a given department made with a product or what needed to happen with a given product, it was likely that a supervisor no longer needed to see something before other people. Once they no longer needed to see a product within an order, they might never need to see it again. We made it so that supervisors could close the ‘drawer’ of a product if they no longer needed to see it. In the below image, the user has closed the status drawer of the top product but they still have the bottom status drawer open.
The challenge came when we needed to save the opening and closing of a given drawer for each supervisor and make it so that a supervisor opening or closing a drawer did not open or close the drawer for someone else. Saving these individual actions became necessary since many orders might have 10+ products, but a given supervisor might only need to interact with 1 or 2 of them. Leaving the drawers open or or not saving their status would make scrolling through the list of products more burdensome and time consuming than if they could easily navigate to the product with which they needed to interact. We also chose to default products to being open since every supervisor would need to interact with a given product at least once, even if that interaction was to indicate that it was not applicable to their department. Ultimately Open → interact → Close is longer more demanding than Interact → Close, especially for orders with 20+ products.
When UB Klem first came to Echobind, they needed a way to track orders and products without a complex paper system or requiring a few individuals to have all of those order status details in their heads. They wanted their supervisors to be able to take time off without blocking the flow of products through the warehouse. And they wanted to make it easy to train new team members without them needing to learn the complex flow of products outside the departments they work in. Klem Connect provides a solution for these needs with centralized, transparent, and easy-to-use tracking of products and orders through UB Klem’s custom production warehouse.