FRT

Project Overview

The Challenge

Managing financial data across multiple departments in PETRONAS was a complex process. The Accounts Payable (AP) and Accounts Receivable (AR) teams relied on manual reporting, scattered data sources, and time-consuming validation steps, which often led to inefficiencies and limited visibility into real-time financial health.

The challenge was to design a unified finance dashboard that could consolidate critical data, simplify complex workflows, and present insights in a clear, actionable, and user-friendly manner — all while aligning with PETRONAS’ enterprise design standards and strict data governance policies

Business Goal

The primary goal of FRT was to enhance financial transparency and operational efficiency across PETRONAS’ finance ecosystem. The dashboard aimed to provide stakeholders with real-time visibility into cash flow, outstanding payments, and receivables performance, enabling faster, data-informed decision-making.

Additionally, the initiative sought to reduce manual reporting efforts, improve data accuracy, and standardize financial tracking across business units, ultimately supporting PETRONAS’ broader digital transformation agenda within its finance operations.

Design Objective

1. Develop an intuitive and data-centric finance dashboard for AP and AR teams.

2. Simplify complex financial data into clear, actionable visual insights.

3. Enhance usability and accessibility for both finance and management users.

4. Ensure consistency and scalability through PETRONAS’ enterprise design system.

5. Support data-driven decision-making with real-time visibility and accurate reporting.

6. Align the dashboard’s design with PETRONAS’ digital transformation goals.

Design Strategy

UX Goals

1. Enhance data visibility through clear, real-time financial insights for AP and AR teams.

2. Simplify complex workflows to minimize manual effort and reduce reporting time.

3. Design for clarity and hierarchy, ensuring critical information stands out at a glance.

4. Enable role-based accessibility, offering tailored dashboards for executives, managers, and analysts.

5. Promote consistency and scalability by adhering to PETRONAS’ enterprise design system.

6. Support confident decision-making with accurate, reliable, and actionable data visualizations.

7. Ensure usability and performance across desktop and large-screen environments used by finance teams.

Design Thinking

1. Adopted the Design Thinking framework to guide the project from discovery to delivery.

2. Engaged with finance users and stakeholders to understand pain points, workflows, and reporting challenges.

3. Synthesized research findings into clear problem statements focusing on visibility, efficiency, and accuracy.

4. Explored multiple dashboard concepts, interaction flows, and data visualization approaches through collaborative workshops.

5. Developed interactive prototypes to test usability, information hierarchy, and data interpretation.

6. Conducted usability sessions with AP and AR teams, refining layouts, navigation, and visual cues based on user feedback.

7. Partnered closely with developers to ensure design consistency, performance, and alignment with PETRONAS’ design system.

Scalability Focus

1. Designed with a modular dashboard structure, allowing new financial components and KPIs to be added without redesigning the entire interface.

2. Implemented reusable UI components aligned with the PETRONAS design system for consistency and ease of maintenance.

3. Established a flexible information architecture to support future data integrations across multiple finance domains.

4. Focused on adaptive layouts to accommodate various screen sizes and display environments within enterprise settings.

5. Created a scalable data visualization framework, enabling the system to handle increasing data volume without compromising clarity or performance.

6. Documented design standards and interaction patterns to ensure smooth handover and continuity across future development cycles.

Research & Insight

User Research

1. Conducted interviews and workflow observations with the AP and AR teams to understand daily challenges and reporting pain points.

2. Identified a strong need for real-time visibility into payment status, outstanding invoices, and financial summaries.

3. Discovered that users often relied on manual Excel tracking, leading to data duplication and inconsistent updates.

4. Gained insights into user priorities, including quick access to payment summaries, overdue alerts, and trend analysis.

Stakeholder Interview

1. Conducted one-on-one interviews with key stakeholders from Finance Operations, Treasury, and Digital Solutions teams.

2. Gathered insights on business reporting needs, KPI tracking, and system integration requirements.

3. Identified pain points in the existing financial reporting workflow, including delayed updates and fragmented data sources.

4. Collaborated closely with finance SMEs and project sponsors to ensure the design met compliance and organizational standards.

Key Finding

1. Users struggled with limited visibility into real-time financial data, leading to delayed decision-making.

2. Manual reporting processes caused frequent data inconsistencies and inefficiencies.

3. Finance teams needed centralized access to AP and AR data to reduce cross-departmental dependencies.

4. Visualization and clarity were top priorities — users wanted a quick way to interpret financial performance at a glance.

5. There was a strong demand for customizable filters and drill-down capabilities to support deeper financial analysis.

User Persona

• Farah is a finance executive who juggles AP and AR operations daily. With FRT, she gets a clearer view of payment progress, less manual work, and smarter insights to make faster decisions.

Want to view it larger? Just right-click the image and choose “Open image in new tab.”

User Journey

Access Dashboard and View Chart (As-Is)

Access Dashboard and View Chart (To-Be)

Find data in the Chart (As-Is)

Find data in the Chart (To-Be)

Want to view it larger? Just right-click the image and choose “Open image in new tab.”

Design Showcase

Accounts Receivable (AR) landing page.

TAR Summary (Tab) landing page.

Transaction Details in Value including Tooltips.

Want to view it larger? Just right-click the image and choose “Open image in new tab.”