Usama ZahidBrand to URL
Usama ZahidBrand to URL
Work / Petrozen ERPUI / UX case studyusamazahid.design

Petrozen ERP.One ledger.

UI / UX for Petrozen. Web app (desktop-first ERP UI).

See the UI
Petrozen ERP final dashboard mockup
RoleLead Product Designer (UI/UX)
ClientPetrozen
PlatformWeb app (desktop-first ERP UI)
Timeline16 weeks · 2025

Overview

Context & the problem

Petrozen ERP was built for fuel-trading companies leaving Excel and manual books.

Role
Lead Product Designer (UI/UX)
Platform
Web app (desktop-first ERP UI)
Team
1 product designer, 1 PM, 2 engineers, 1 accounting SME
Tools
Figma, Notion, Airtable, Chart.js
Year
2025
The problem

Teams were losing money to

Teams were losing money to manual posting errors, unclear customer balances, and reports that took days to trust.

The goal

Auto-post double-entry from familiar business documents

Auto-post double-entry from familiar business documents · Surface real outstanding balances without month-end wait · Make every number traceable to a source transaction

In scope

UX Research

UX Research · Information Architecture · Interaction Design · UI Design

Research

Methods before pixels

Users trusted a system only when every number traced back to a source transaction.

03methods before pixels
  • 9 contextual interviews with accountants and sales staff
  • 2 shadowing sessions during month-end close
  • Audit of 6 Excel-based bookkeeping setups
01

Users trusted a system only when

Users trusted a system only when every number traced back to a source transaction.

02

Friction was not data entry —

Friction was not data entry — it was fear of an unrecoverable posting mistake.

03

Sales and accounting needed the same

Sales and accounting needed the same data with different vocabulary and views.

Key Research Findings
Key research findingsPatterns from interviews across sales and accounting roles.
Spreadsheet screenshot showing reconciliation mismatches
Reconciliation gapManual ledger entries produced recurring mismatches against bank records.

Flows

Information architecture

I rebuilt the IA around one primary

I rebuilt the IA around one primary path: create invoice → auto tax & ledger post → update balances → report — so a single save does an accountant’s work without hiding the system.

Invoice-to-ledger mental model map
Invoice-to-ledger expectation mapWhat users assumed happened behind a single invoice save.
Admin flow sketch
Admin flowAuthority and company setup around the multi-tenant system.

Wireframes

Low to mid-fidelity

Structure before skin.

Low and mid-fidelity structure for invoicing, payment allocation, and balance placement before visual UI.

Fig. 1. Sales & purchase invoice wireframe

Sales & purchase invoice

Mid-fidelity invoice structure before hi-fi polish.

Mid fidelity invoice wireframe
Fig. 2. Invoice-to-ledger sketch

Invoice-to-ledger sketch

How one invoice fans out into ledger entries.

Low fidelity invoice-to-ledger sketch
Fig. 3. Balance placement studies

Balance placement studies

Where customer balance should surface across screens.

Low fidelity balance placement studies
Fig. 4. Payment allocation

Payment allocation

Density and allocation patterns explored before hi-fi.

Payment allocation exploration

Visual UI

The interface system

A dense but legible desktop system:

invoice.status

Draft, Paid, Pending, Overdue —

Draft, Paid, Pending, Overdue — four states, one language.

ledger.entry

Debit/credit chips with source-document traceability

Debit/credit chips with source-document traceability.

balance.indicator

Color-coded outstanding balance by risk

Color-coded outstanding balance by risk level.

High fidelity invoice creation screen

Invoice creationMulti-item invoicing with live tax, discount, and status handling.

High fidelity customer ledger view

Customer ledgerFull financial history with linked invoices, payments, and running balance.

Company creation screen

Company creationAdmin flow to stand up an isolated company tenant.

High fidelity reports dashboard

Reports dashboardTrial Balance, P&L, and Cash Flow from live ledger data.

ERP UX pattern component closeups

ERP UX patternsDraft, posted, overdue, and reconciled state language in the UI.

Petrozen ERP shipped product in context

Shipped product in contextThe sales and ledger cockpit in daily use.

Outcome

What shipped

One ledger.

Fig. 5. Shipped product in context

Shipped product in context

The sales and ledger cockpit in daily use.

Petrozen ERP shipped product in context
Live product

Browse the full archive of product and brand work.

All work

Reflection

Honest takeaways
Trust is the product in finance UI.
Next 01

Run longitudinal trust tracking over

Run longitudinal trust tracking over 90 days.

Next 02

Tighten payment allocation density for

Tighten payment allocation density for power users.

Next project

UI / UX
Begum luxury bridal hero - emerald silk and gold zardozi embroidery
UI / UX

Begum

A luxury Pakistani bridal couture website blending editorial storytelling, artisan transparency, and bespoke customization from Lahore ateliers to brides worldwide.

Open case →
Start a projectFig. 06. Direct with the founder

Four weeks from brand to live URL.

Brand identity and a production-ready website, delivered together as one system. Direct communication with the founder who designs the system and writes the code. No account managers, no handoff gap.

Book Strategy Call Send a brief

Or write directly: hello.usamazahid@gmail.com