Loading Case Study Experience...
Private Staging & Codebase
UI/UX Design & Product Development2025FinTechAccounting ERPGST CompliantDouble-Entry
PixelNest Accounting
Modern double-entry enterprise financial management & GST-compliant accounting ERP engineered for high-volume transactions and cash flow forecasting.
My Primary RoleLead UX Designer & Core Frontend Engineer
Domain & SectorUI/UX Design & Product Development
Timeline / Release2025 · Production
Evaluation Access
01 · Strategic Overview & Problem
The Challenge & Design Objective
The Core Friction
Finance teams and business owners spend hours wrestling with unintuitive legacy ERP interfaces, manual spreadsheet reconciliations, and complex GST tax filings that invite costly calculation errors.
The UX/UI Solution
Engineered a high-density financial command center featuring instant mathematical double-entry balance validation, automated GST invoice creation, and interactive cash flow projection curves.
My Design & Architectural Responsibilities
Lead Product Designer: Designed high-density financial tables with monospace alignment and keyboard shortcuts.
Frontend Engineer: Implemented client-side balance sheet engine calculating multi-currency transactions in under 16ms.
Data Visualizer: Built interactive runway projection charts with dynamic scenario toggles using Recharts.
02 · Target Audience & Empathy Mapping
User Persona & Behavioral Flow
Kavita Ranganathan
Head of Corporate Finance & Tax Controller, FinCorp Global
“In financial audits, an unbalanced ledger by even ₹1 halts compliance. We need an ERP that verifies double-entry integrity mathematically at the keystroke level, not at month-end.”
Critical Pain Points & Friction
- Unbalanced manual journal entries discovered weeks later during quarterly tax audits
- Slow, clunky legacy software (Tally, SAP) requiring dozens of mouse clicks for a simple invoice
- Lack of real-time cash flow forecasting during high-burn expansion cycles
Core Goals & Desired Experience
- Instant visual debit-credit delta indicators that prevent committing out-of-balance vouchers
- Sub-second GST invoice creation with automatic HSN/SAC tax slab rate calculations
- Real-time interactive cash runway modeling with dynamic OPEX and burn-rate toggles
End-to-End User Journey Mapping
Phase 1 · Daily Ledger Entry & VerificationEfficient & Reassured
Accountant enters multi-line journal voucher using keyboard shortcuts (Tab / Enter); real-time delta counter stays locked at ₹0.00.
Friction: Accidental imbalance when splitting multiple tax debit rows.
UX Solution: Live debit-credit balance delta chip that highlights green on balance and blocks submit button on discrepancy.
Phase 2 · GST Invoice Generation & DispatchConfident & Swift
Finance controller selects customer, items auto-populate with registered HSN code, and tax breakdown (CGST/SGST/IGST) renders instantly.
Friction: Manual calculation errors on interstate vs intrastate GST tax slabs.
UX Solution: Autonomous tax engine detecting buyer state code and enforcing 100% compliant rate breakdown.
Phase 3 · Executive Cash Runway ForecastingStrategic & In Control
CFO loads visual cash flow runway dashboard, toggles hiring scenario (+3 Headcount), and views projected runway variance.
Friction: Static monthly Excel sheets that fail to model dynamic payment delays.
UX Solution: Interactive Recharts projection curve with real-time parametric burn rate scenario simulation.
03 · Structural UX Architecture
Information Architecture & Wireframes
General Ledger & Core Accounting Studio
- Double-Entry Journal Voucher Registry
- Automated Trial Balance Verification
- Chart of Accounts Tree Navigator
- Bank Statement Reconciliation Engine
Invoicing & GST Tax Hub
- GST E-Invoice Generator with QR Support
- Automated HSN/SAC Code Tax Slab Lookup
- Credit Note & Debit Note Adjustments
- One-Click GSTR-1 & GSTR-3B Audit Export
Treasury & Runway Projection Engine
- Dynamic Cash Flow Runway Curve
- Parametric Burn Rate Scenario Simulator
- Accounts Receivable Aging Waterfall
- Vendor Payable Priority Matrix
Data Density UX
Low-Fidelity Architecture: Monospace Tabular Ledger Layout
Explored compact row spacing and monospace alignment to maximize visible rows per screen without eye fatigue.
Key Ergonomic Decisions:
Applied tabular figures (font-variant-numeric: tabular-nums) so decimal points align vertically across all rows
Embedded sticky footer showing live mathematical sum of Debits vs Credits and instant discrepancy delta
Visual Hierarchy
High-Fidelity Polish: Fiscal Status & Audit Trails
Refined color tokens using emerald for asset/credit balances and muted crimson for liabilities and debits.
Key Ergonomic Decisions:
Replaced overwhelming modal dialogs with smooth inline expansion rows for transaction audit history
Keyboard accessibility with full Alt+N (New Entry), Alt+S (Save), and Escape (Cancel) bindings
04 · Visual Language & Tokens
Design System, Typography & Palette
Typography Hierarchy
Scale Ratio 1.25+ERP Navigation, Modal Headers & Tax Slab LabelsPlus Jakarta Sans
PixelNest Financial Ledger & GST Studio
Sans-serif, SemiBold 600, Tight Tracking
Currency Values, Journal Amounts, & Tax InvoicesJetBrains Mono
₹1,482,900.00 • DR 48,200.00 • CR 48,200.00
Monospace, Medium 500, Tabular Figures (tabular-nums)
Color Architecture & Contrast Validation
WCAG AA CompliantEmerald Ledger
#059669
Balanced Journal State, Credits & Positive Cash Flow
Crimson Debit
#E11D48
Debits, Outflows, & Out-of-Balance Warning State
Cyan Accent
#06B6D4
Runway Projections & Trend Indicators
Navy Slate
#0B132B
High-Density Financial Canvas Background
System Tokens
--grid-row-compactHigh-density ledger grid row height for maximum data scan
36px--delta-zero-glowSubtle green visual confirmation when journal debits equal credits
0 0 12px rgba(5, 150, 105, 0.25)Key UI Components Built
Double-Entry Ledger Balancing EngineGST Invoice Generator with Tax Slab SplitterCash Runway Recharts Forecasting VisualizerVirtual High-Density Data Grid (10,000+ rows)Chart of Accounts Interactive Tree
05 · Key Screens & Multi-Device Ergonomics
High-Fidelity Screens & Responsive Layouts
Screen 01Desktop / Responsive
Financial Dashboard — Cash Flow Runway & Profit/Loss Overview
Screen 02Desktop / Responsive
General Ledger — High-Density Double-Entry Journal with Balance Verification
Screen 03Desktop / Responsive
Invoice Studio — GST-Compliant Billing Generator & Tax Breakdown
Screen 04Desktop / Responsive
Tax Compliance Hub — Automated GSTR-1 / GSTR-3B Tax Filing & Audit Reconciliation
Multi-Device UX Adaptation Strategy
Desktop (1440px - 2560px)1920 × 1080
Focus: Dual-pane financial command view: live general ledger on left, transaction audit inspector on right.
High-density 12-column grid with sticky balance bar and 60fps virtualized scrolling.
Tablet (768px - 1024px)810 × 1080
Focus: Invoice approval and runway review layout with responsive touch-friendly date pickers.
Collapsible sidebar with sticky balance verification banner at top.
Mobile (375px - 430px)390 × 844
Focus: Card-based transaction summaries, quick-approvals for expense vouchers, and instant P&L overview.
Single-column fiscal cards with thumb-friendly voucher authorization button.
06 · Engineering Rationale & Results
Key Technical Decisions & Business Impact
Client-Side Double-Entry Validation Engine
Rationale: Users must be prevented from committing out-of-balance journal entries immediately at input time.
Outcome: 100% elimination of unbalanced ledger commits via real-time debit-credit delta tracking.
Virtual Table Rendering
Rationale: Rendering thousands of financial line items caused DOM lag on traditional grids.
Outcome: Maintained 60fps scrolling performance across 10,000+ ledger entries.
Measurable Results & ROI
75% reduction in monthly invoice generation and reconciliation time
Zero accounting discrepancies due to strict real-time double-entry constraints
Sub-second export of GST-compliant tax audit summaries
Modular Content Architecture
Composable Case Study Deep-Dives
Decomposing enterprise case studies into composable, high-impact building blocks — combining technical architecture pillars, live telemetry metrics, executive stakeholder reviews, and comparative transformation benchmarks.
3 Composable Blocks
Modular Block • content
Design Architecture & Core Decisions
Strategic UX framework engineered for PixelNest Accounting
To address the primary operational friction in PixelNest Accounting, we designed a modular interaction architecture combining high-efficiency task flows, responsive design token scaling, and WCAG accessibility standards.
Design Token Scalability
Standardized typography, spacing scales, and color contrasts for cross-platform fidelity.
Cognitive Load Reduction
Streamlined primary user journeys to minimize click depth and decision friction.
Modular Block • keyMetrics
Measurable Outcomes & Business Impact
Quantitative delivery benchmarks and validation results
Post-launch analytics and user feedback confirmed measurable performance improvements across critical engagement metrics.
+35%
Workflow Efficiency
Task completion rate
4.8 / 5
User Satisfaction
Validated stakeholder score
92%
Design System Coverage
Component reuse index
Modular Block • quote
Client Stakeholder Perspective
Executive Review & Delivery Endorsement
The completed system established a new standard of design excellence and technical reliability.
“Pankaj brought extraordinary craft, deep architectural thinking, and relentless attention to detail to PixelNest Accounting. The results exceeded our expectations.”
EX
Executive Sponsor
Product & Delivery Leadership
Proprietary Project Library & Staging Vault
Interested in Evaluating PixelNest Accounting?
Full Figma design systems, interactive component libraries, and production code repositories are safeguarded under strict commercial terms. Tap below to submit an evaluation request for authenticated review.
Requests sent directly to pankaj.vw@gmail.com