SERVICE

UX/UI Design

INDUSTRY

Petroleum and Gas, Bank

LOCATION

Viet Nam

Design a comprehensive, interconnected digital ecosystem for a nationwide cashless initiative born from the strategic partnership between HDBank and Petrolimex. This project required designing an entire multi-platform network from scratch to ensure seamless communication between consumer apps, merchant hardware, distributor portals, and internal management systems.

HDBank POS for Petrolimex

How did I start

What I do

The 6 Interconnected Platforms:

- Merchant Hardware: A specialized POS terminal for gas station attendants to process the new 2-in-1 card.

- Driver Mobile App: A consumer app for corporate drivers to locate stations and pay via company QR codes.

- Staff & Customer Landing Page: A dual-purpose portal for Petrolimex ID registration and customer profile updates.

- Corporate Distributor Portal: A B2B dashboard for companies to manage fleets and generate driver payment QRs.

- Dual Internal Admin Portals: Secure backends for HDBank (transaction auditing) and Petrolimex (employee management).

My Role: As the Lead Product Designer, I owned the end-to-end UX/UI design, ecosystem architecture, wireframing, prototyping, and animation across all six distinct platforms.

My Process: I started with stakeholder mapping to align the business rules of both entities. I mapped complex cross-platform user journeys, built iterative prototypes, and ran targeted usability testing directly with station employees and drivers.

The Problem

- Hardware & Environment: The physical POS terminals had low-resolution, small screens that had to be operated outdoors under harsh, direct sunlight.

- User Constraints: Station attendants and corporate drivers often had low tech-literacy, leading to high error rates and slow moving fuel lines.

- System Complexity: Data had to sync instantly and securely across multiple platforms—from corporate QR generation to immediate pump payment.

1

The Solution

- We engineered a unified, high-contrast design system built to survive harsh retail environments and simplify complex corporate workflows.

- "Big Touch Point" UI: Stripped out interface clutter and implemented oversized touch targets on the POS and App to combat outdoor glare and ensure fast operation.

- Streamlined Dashboards: Designed clean, modular web portals that made generating corporate QRs, verifying customer info, and auditing transactions effortless.

2

What I found

The design process

We began by mapping a comprehensive Cross-Platform Customer Experience (CX) Map to seamlessly handle complex edge cases like offline states and dynamic QR verification.

To unify all six distinct platforms, I established a dual-layout strategy:

The Operational Flow (POS & App) focused on extreme operational speed. Every user flow was shortened to the absolute minimum number of taps to dramatically reduce on-site wait times at the pump.

The Portal Flow (Web & Dashboards) focused on absolute data clarity. We built a clean, modular dashboard structure allowing users to manage profiles, verify info, and generate corporate QRs with zero learning curve.

The final design

The final product is a resilient, fully integrated fintech ecosystem that bridges digital banking with retail logistics. By unifying the POS, mobile apps, and administrative portals under a single framework, we eliminated data silos between HDBank and Petrolimex. The new design successfully minimized employee training time, eliminated payment bottlenecks, and created a swift, secure cashless experience across Vietnam.