DK

UX/UI Design and WPF Frontend for GSB-PUM On-Device Client

The Windows .NET / WPF touchscreen application installed on every GSB Passbook Update Machine. I lead UX/UI design across all customer and admin flows, and contribute to the WPF frontend implementation.

The on-device touchscreen client (internally called the Launcher) is installed on every GSB Passbook Update Machine in the field. It's a Windows .NET Framework / WPF (XAML) application — ~866 C# files and ~150+ XAML views — organised into customer-facing passbook flows and an administrator panel for branch staff and field engineers. The client is built and maintained by PromptNow's automation team; I lead the UX/UI design operation across the product, and contribute to the frontend WPF implementation.

My Role — UX/UI Design Lead

I lead end-to-end UX/UI design for the on-device client: customer-facing passbook flows, administrator panels for cash management and device diagnostics, and error states and recovery flows. Figma is the primary Hi-Fi prototyping tool; finalised screen flows and state diagrams are version-controlled in draw.io alongside the codebase, and an in-house Components Generator tool produces ready-to-implement specs so hand-off to engineering is fully resolved before any XAML is written.

WPF Frontend Development

The codebase ships a small in-house design system — reusable WPF components (CustomButton, FadeIn, FLCashBox, LogicButtonGrid, MAMessageBox, PulseGrid, Topbar, Trigger, and others) that every panel composes from. I contribute to the XAML / C# implementation of these components and to the panel views that consume them, particularly where design and behaviour are tightly coupled — animations, state transitions, and error-overlay choreography.

Voice-Over and Accessibility

Every customer-facing screen is paired with Thai voice-over audio, wired into the screen-flow state machine so the right line plays at the right step. This matters more on a passbook machine than most kiosks — many of GSB's customers are older retail savers who navigate the machine partially or fully by ear. Audio is treated as a first-class design dimension, not a retrofit.

Hardware Integration Surface

The UI is the human face of complex hardware: passbook printer, card reader (including Thai ID Card), magnetic stripe reader, cash dispenser, camera, and a managed device-state watcher. Each device has its own status / failure modes the UI must reflect honestly to the customer in plain Thai — clear error states and recovery flows here meaningfully reduce branch-staff intervention.