top of page

Chemical Manufacturer
Application Development

Summary

Our client currently relied on manual processes and Excel sheets to manage production in their chemical factory. We proposed automating the entire workflow, including production, quality, and back-office functions, to enable real-time monitoring, tracking, and timely corrective actions. Our solution presents information in detailed or summarized form according to management hierarchy, provide instant access to key performance indicators, and ensure that data is available anytime across multiple devices such as desktops, tablets, and mobile phones.

Business Objectives

  • Client is yet to digitize their production processes

  • Most of the tasks are done manually, using excel sheets

  • We propose to automate all the production, quality and back office functions

  • Helps to monitor and track the functions at each level and take corrective actions as required

  • Provide detailed / summarized information based on the hierachy of the management

  • Provide Key Performance Indicators (KPIs) at touch of a button

  • Make the information available any time on multiple devices – desktop, tab, mobile phone.

Pain Points

  • Non-technical users may struggle to adapt from Excel to a structured web application.

  • Complex workflows could overwhelm them if not presented simply.

  • Inconsistent layouts or unclear dashboards may frustrate adoption.

Role

UX-UI Designer​

Tools

  • Figma

  • Miro

  • Jira

  • Adobe Photoshop

  • Adobe Illustrator 

Duration

9 Months

Scope of Work

Mode of Supply

The system should record tanker details including tank number, customer info, quantity, grade, logistics, driver, dispatch time, out pass, and kilometer readings for tracking.

Mode of Supply

For carbouy/can deliveries, capture the number of cans, driver and customer details, grade, quantity, logistics, vehicle type, time/date, MSDS, out pass, and kilometer readings.

Data

Tanker details (Ptz) along with dispatch records and relevant forms need to be maintained in the system.

Discharge

Record information on tank number, grade, quantity, assigned worker and supervisor, plus the mode of supply, whether via tanker, carbouy, can, or customer’s container.

Quality Control

Date, time, shift, personnel responsible, and the tests carried out should be documented for quality tracking.

Mode of Supply

For deliveries using the customer’s vehicle or container, the system should note the tanker number, customer address/invoice, grade, quantity, MSDS, logistics, vehicle details, driver, time/date, and out pass.

Liquid A

​

Capture purchase order details including date, supplier, quantity, and rate, along with vessel arrival information such as origin, test results, storage port or terminal, and the designated facility.

Supply of Liquid A

​

Capture supply details from port to unit, including tanker, driver, supplier, payment, invoice, quantity, lot number, inward pass, ending kilometers, testing, tank discharge, and updated quantities.

Liquid B Purchase & Procurement

​

Record purchase and procurement details including date, source, quantity, and rate.

Supply of Liquid B

​

Record supply details from source to unit, covering tanker, driver, supplier, payment, invoice, quantity, inward pass, ending kilometers, testing, tank discharge, and updated quantities.

System Architecture

​Design Considerations

​​

  • Common Architecture Framework

  • Flexible and Scalable

  • Ability to Incrementally add new application with less effort

  • Fasttrack Process and Development

  • Serverless First Approach

  • Enhanced User Experience

  • Leverage Open-Source Tools

  • Reduced Maintenance Cost

Frontend (User Interface)

  • Web-based dashboard for cargo agents

  • Mobile app for customers to track shipments (Optional)

  • Responsive UI for booking, documentation, and invoicing

​

Backend (Business Logic)

  • API for managing bookings, payments, and tracking

  • Role-based authentication (Admin, Cargo Agent, Customer)

  • Notification system (email/SMS alerts for shipment status)

​

Database (Storage)

  • Shipping lines APIs for tracking

  • Payment gateways (if required)

  • Customs and port authority systems

Design Process

Empathise
Define
Ideate
Prototype
Test & Deliver
Component 4.png
Collaborated with the client and technical team to design a solution for users from young professionals to older, non-technical stakeholders, balancing diverse needs with aesthetics and functionality.
Identified the challenge: designing a simple yet efficient app to track chemical supply, manufacturing, release, and shift management, ensuring daily operations run smoothly. The solution needed to be intuitive, reflect the company’s identity, and meet the efficiency demands of a business-focused environment.
Visited the factory and spoke with staff to understand daily operations, while interviewing the client to capture their vision and brand identity. Used these insights to design a user-friendly app and create wireframes for testing and refinement.
Created mockups, UI layouts, and interactive prototypes using Figma, Miro, and Photoshop, working with the development team through to delivery to ensure consistent user flow, UI, and alignment with the client’s vision.
After extensive testing with the client, we delivered the product, enabling a smooth transition for the client and staff from manual production recording to a fully digital process. We continue to provide backend support and regularly expand the app with new features.

Final UI Screens

bottom of page