Merchant Dashboard Design

Sasono needed a dashboard for merchants to track payments, manage payouts, and analyze performance — all powered by prepaid voucher transactions. But building a data-rich dashboard comes with layers of complexity:

Multiple user types: finance, support, and marketing — each with distinct needs.

Complex transaction flows involving voucher codes, partial payments, and API feedback loops.

A requirement for real-time data visualization and zero-friction UX.

A plugin-first system (WordPress + WooCommerce) with limited local data — pushing all reporting to an external dashboard.

The biggest challenge? Turning raw transactional complexity into a UI that feels elegant, instant, and self-explanatory.

🧠 The Approach

We started with role-mapping: understanding what customer service, finance, and marketing each needed from the dashboard.

Finance needed clear payouts, CSV exports, and clean summaries.

Support needed drill-down capabilities and transaction traceability.

Marketing wanted conversion insights, geo breakdowns, and time-based filters.

We designed a modular system of components: KPI cards, live charts, scrollable tables, and detail screens — all optimized for responsiveness, clarity, and hierarchy. Each graph and stat block serves a purpose — no fluff.

🎯 Precision & Pixel-Perfect Execution

Sasono’s brand style guided the entire aesthetic: confident, bright, yet minimal. We focused on:

Alignment grids and consistent paddings

Subtle shadows and color hierarchy to guide the eye

Crisp, readable data tables and tooltips that reveal deeper context

Motionless clarity — no excessive animations, just sharp interactions

Every chart — from conversion rates to transaction breakdowns — was treated with the same care you'd expect in a high-performance analytics tool. Even real-time deltas (e.g. +12.32%) use smart color coding and microcopy for fast scanning.

✅ The Result

The final product is a merchant dashboard that feels light, yet powerful. Highlights include:

A clean overview screen showing total transactions, AOV, success rate, and top countries at a glance.

A reports system where merchants can track conversion trends, average times, and error patterns.

A streamlined transactions view with search, filtering, and detail pages for full traceability.

A structured API & Integration section for developers, with live webhook status and key security tips.

The UI empowers non-technical merchants and support staff to act fast — and lets analysts go deep without friction.