CCC - Centercon Conveyor Controller
Embedded Files
Timeline
Nov 2024 - Jan 2025
(10 Weeks)
Role
UX/UI Designer
Deliverable
B2B Platform
(for PC and Tablet Device)
Platform
Figma
Overview
Center Containers Company Limited is a factory specializing in corrugated carton boxes. For this project, the client required conveyors to temporarily hold products (corrugated cardboard) from the production section before distribution, managed through a controller software.
The software allows for full automation of the conveyance process, or it can be manually controlled via a master computer or a scaled-down version on a tablet, enabling control from a transport vehicle
My Role as UX/UI Designer
In this project, the mechanical team installed all the conveyors and transport vehicles at the plant prior to the software team's development phase. I was involved during this stage to redesign the UI of the controller, focusing on making it more intuitive and user-friendly for the workers.
Design Process
I was involved in this project during the coding phase. At that time, the control software was still under development but already included the key features based on the client's requirements. My role as a UX/UI Designer was to redesign the user interface based on the existing features, improving its usability and making it more user-friendly before handing it off to the engineering team for continued development.
💡 Ideate
Conveyor Flow
Before redesigning the UI, I first need to understand the flow of the product through conveyors and their mechanics. The conveyance process involves two main components: the conveyor and the transport vehicles (Cart), which are represented as shapes on the conveyor plan, and the controller software that manages their operation.
The conveyor transports products in only one direction along its length and can carry up to three product jobs at a time. Additionally, the cart is equipped with its own conveyor to transfer products from one conveyor to another along the route. However, the cart can only carry one product job per trip.
The product conveyance process consists of the following steps:
1. Conveyor 58 A receives a product from the production section and transports it to Cart 2.
2. Cart 2 moves in front of the fan machine, where the product is blow-dried for one minute (workers can manually extend this to two minutes if needed, depending on the product).
3. Cart 2 moves to Conveyor 60 A, transferring the product to the product storage section.
4. Cart 1 receives a product from Conveyor 60 B and transports it to the storage conveyors. Cart 1 can automatically or manually move products to any conveyor (1-55) for storage.
5. Cart 1 picks up a product from any of the storage conveyors (1-55) and transports it to conveyors 39-41 for distribution.
Information Architecture
Created an information architecture to understand the controller software overview, focusing on the conveyor flow and additional features based on the client's requirements. The software supports both automatic and manual operation modes. The main feature is the conveyors' overall controller on the homepage, allowing users to manage each step of the conveyor flow and edit products within the product storage section. The key features include cart queue sorting, the product storage section controller (Import), conveyance history (Export), and controller mode.
🖥️ High-Fidelity Prototype for PC
Mockups and High-Fidelity Prototype
After gaining a clear understanding of the conveyor flow, I began designing the controller software for the master computer, following a structured information architecture. I redesigned each page using components from the previous version, refining them to create a seamless user experience. By connecting all the pages, I was able to build a High-Fidelity Prototype. This iterative process allowed me to continuously improve each page and its connections, ensuring that every feature was intuitive and user-friendly.
The controller software supports both automatic and manual operation modes and includes the following features:
MAIN FEATURE
A Seamless Conveyor Flow
The controller software allows users to manage every step of the conveyor flow from a single page, including fan controller, import product to Conveyor 60 B (Initial conveyor of the storage section), Cart 1 controller, edit a product on conveyors, and find a product.
◆ Fan Controller
First of all, Conveyor 58 A receives products from the production section and transports them to Cart 2, which then delivers the products to the dry-blow fan machine. A sensor beneath Conveyor 58 A detects the presence of the product and sends this data to the master computer, where it is displayed in real-time. While this process is fully automated, workers can extend the fan machine's operating time based on the specific needs of the product.
◆ Import Product
Once Cart 2 delivers a product to Conveyor 60 A, a sensor underneath the conveyor detects the product's presence and sends the data to the master computer. This triggers an alert to notify the workers. Upon noticing the alert, the worker will import the product into the system by either scanning the product’s barcode or manually entering the order number.
◆ Cart 1 Controller (Product Transportation)
When the product reaches Conveyor 60 B, the system will automatically control Cart 1 to receive the product and transport it to the nearest available storage conveyor (1-55). Alternatively, a worker can manually move the product to any of the storage conveyors (1-55). This manual process may occur in one of three situations:
Situation 2 : Transport the product from one conveyor to another.
Situation 3 : Transport the innermost product from one conveyor to another.
◆ Edit a Product on Conveyors
If the products in the system do not match the actual items on the conveyor, the worker can manually update the system using the "Add/Delete Product on Conveyor" option located in the right-side navigation bar.
◆ Find a Product
Normally, the worker can hover the mouse over a product to view its product number. If the product is difficult to locate, the worker can use the "Find Order Number" search bar located in the right-side navigation bar. This feature highlights the product’s location on the conveyor directly on the screen.
SUPPORTING FEATURE 1
Import the Product to the Product Storage Section
This feature enables users to manage conveyor flow within the product storage area. It focuses on products detected on Conveyor 60, allowing workers to manually set the transport route to ensure smooth and accurate product placement.
SUPPORTING FEATURE 2
Cart Queue
This feature displays the order queues for both Cart 1 and Cart 2, allowing workers to manually switch queues or delete any unwanted orders.
SUPPORTING FEATURE 3
Transport History
This feature displays a log of all product transport transactions for the day, including date, time, product number, and conveyor route. Workers can easily search for specific entries using the search bar.
📱High-Fidelity Prototype for Tablet
Mockups and High-Fidelity Prototype
After completing the high-fidelity prototype for the master computer, our team decided to develop a scaled-down version for tablets (800 × 1280 pixels). This version is designed for workers operating on Cart 1 in the Product Storage Section, providing quick access to essential features such as Cart 1 route management, editing products on conveyors, and managing the Cart 1 queue.
ESSENTIAL FEATURE 1
Cart 1 Route Management
In this version, the worker can manage the Cart 1 route in the Product Storage Section from a single page. By tapping on a conveyor, the product information appears in the bottom command bar, which also includes a Cart Return button and an Edit button for quick actions.
Due to the tablet’s smaller screen size, the worker can zoom in by using a pinch-to-zoom gesture, making it easier to tap on individual products on the conveyors.
ESSENTIAL FEATURE 2
Edit a Product on Conveyors
If the products in the system do not match the actual items on the conveyor, the worker on Cart 1 can manually update the system using the "Add/Delete Product" option located in the bottom command bar, following the same process as on the master computer. The worker can also zoom in using a pinch-to-zoom gesture, making it easier to tap on individual products on the conveyors.
ESSENTIAL FEATURE 3
Cart 1 Queue
After assigning a route for Cart 1, the worker can view the Cart 1 queue by pressing the "Cart 1 Queue" button located at the top right of the screen. A side queue bar will appear, allowing the worker to manually switch the queue order or delete any unwanted orders.
📱 Design System
Design System
In this project, I created a design system based on components from the previous version, adapting them to work seamlessly across both PC and tablet versions.
◆ Colors
The design system features two distinct color groups:
1. High-Fidelity Prototype Theme:
This dark mode theme uses Jasmine Yellow (#F6D57A) as the primary color, reflecting the company’s corporate identity (CI).
2. Conveyor Status Theme:
This set includes vibrant colors to differentiate between conveyor sizes, along with red and green indicators to clearly represent their operational status (e.g., active or unavailable).
◆ Typography : Inter
◆ UI Components
Key Takeaways
Centercon Conveyor Controller (CCC) was my first experience designing a user experience in the field of robotics. I joined the project during the coding phase, after the mechanical team had completed the installation of the conveyors and transport vehicles at the plant. As a result, I was not involved from the beginning and did not have full visibility into the entire project process, particularly regarding the client's initial requirements and how they were originally translated into design.
To begin, I surveyed the conveyor plant and worked closely with the development team to understand the existing system. I successfully translated the available functionalities into a clearer, more user-friendly design, preparing it for handoff to the engineering team for continued development.
Following the desktop version, our team decided to create a scaled-down tablet version for workers operating transport vehicles. I identified the essential features and adapted them for the tablet’s smaller interface, ensuring quick and efficient access for workers.
After the high-fidelity prototype process, there are the next steps for improvement:
1. Establish a proper design handoff process for the engineering team.
2. Explore and define better gesture controls for the tablet version.
3. Create a user manual to assist workers in using the software.
4. Conduct usability testing with workers on both the PC and tablet versions.
Page updated
Google Sites
Report abuse