Led UX design for PETRONAS’s eCHEMS platform, a digital system managing 12,000+ chemicals across operations. Designed intuitive workflows for SDS verification, chemical requests, and labeling -contributing to a 40% improvement in turnaround time. Collaborated with cross-functional teams to enhance user experience, compliance, and operational efficiency.
Given the tight timeline and project conditions, we focused on essential design activities instead of completing the full UX design process.
Personas
Our primary users were chemical user and management level, making it challenging to secure their availability due to formal protocols. To overcome this, we interviewed their representatives, who had a deep understanding of the needs and preferences of the actual users. The personas we developed were based on insights gathered from these representatives and the information provided in the solution proposals.
User Journey (As-Is)
“User Journey As-Is” means the current process and experience that users go through when they use the E-Chemicals Management System, before any improvements are made.
It shows how users actually interact with the system today — from logging in, registering chemicals, submitting for approval, updating inventory, to generating reports — including all the real challenges, delays, and pain points they face. This are some of the example for User Journey (As-Is)
User Journey (To-Be)
“User Journey To-Be” describes the future or ideal process and experience that users should go through after improvements are made to the E-Chemicals Management System.
It shows how the system is envisioned to work — with smoother steps, automation, clear workflows, and better user experience — compared to the current (As-Is) journey. This are some of the example for User Journey (To-Be)
Information Architecture
Information Architecture is the structure and organization of content, data, and navigation within the E-Chemicals Management System.
It’s like the blueprint of the system — how all menus, pages, and information are arranged so users can navigate smoothly and perform tasks efficiently.
User Access Map
A User Access Map shows who can access what inside the system.
It defines the different user roles (like Admin, Officer, Staff, or Auditor) and the permissions or actions each role can do — such as view, add, edit, approve, or delete chemical data.
Wireframes
Wireframes are basic visual layouts that show how a system or webpage will look and function — before the final design is made.
They outline the structure, placement of elements, and navigation flow, without focusing on colors, graphics, or style.
High Fidelity Design (Hi-Fi Design)
After developing the wireframes, high-fidelity designs were created to visualize the final look and feel of the E-Chemicals Management System. These designs included detailed layouts, colors, icons, and interactive components that closely represent the actual user interface.
