Case Study

A Payment Ecosystem for Modern Businesses

QUIK provides a comprehensive digital payment ecosystem that helps businesses across industries manage transactions, integrate payment services, and deliver seamless customer experiences. Built with secure and scalable technology, the platform connects businesses with modern payment solutions designed to support efficient operations, business growth, and evolving digital needs.

Role

Senior UX/UI Designer

Company

Vinatti

Platforms

iOS · Android · Web · WebView

Partners

VPBank · BIDV · MB · Napas / VietQR

Quik Agent Banking

A bank-agent network that lets everyday merchants act as VPBank's cash counter — without a bank branch in sight.

The Challenge

VPBank wanted to extend basic banking — deposits and withdrawals — into areas without a nearby branch, using local shops as agents instead of building physical infrastructure. The hard part wasn't the banking logic; it was making a compliance-heavy, cash-handling flow feel safe and fast for a teller who isn't a bank employee, while giving VPBank's own admins a way to see and manage the whole agent network.

Users & Context

The product serves two distinct user groups: bank tellers handling deposits and withdrawals on mobile devices while assisting customers in real time, and admins overseeing operations across multiple merchant locations from a centralized web dashboard.

Hand-sketched wireframes and user-goals notes on paper

Approach

01

Mapped the four-party flow before drawing a single screen — Bank ↔ Web Agent ↔ Merchant (App + Teller) ↔ Customer — so every UI decision traced back to who needed to see what, and when.

02

Iterated the withdrawal flow around trust, not just speed: early drafts had a teller hand over cash on a typed confirmation; we replaced it with a one-time QR code the customer scans themselves, closing the biggest dispute risk without adding a step to the happy path.

03

Built app and web as one system, not two separate builds: deposit/withdraw tabs, transaction states and staff records share the same information architecture, so switching between a teller's phone and a manager's dashboard never feels like switching products.

Illustration of a person managing card payments and spending on a phone

Quik Agent Banking ecosystem diagram: bank, web agent, merchant app, teller and customer — The ecosystem map that shaped every later screen — bank, web agent, merchant and customer, each with their own view of the same transaction.

Here's the product in your hands — the mobile app version.

Login

Phone verification code entry — Phone verification before a teller can touch a single transaction.

Transactions

Teller home dashboard — Today's numbers, deposit/withdraw shortcuts and the daily limit — all above the fold.

Bank selection list — Ten partner banks, one consistent beneficiary-bank picker.

Deposit amount entry screen — Entering a customer's deposit — beneficiary, amount and a plain-language transaction note.

Daily limit exceeded warning modal — VPBank's daily cap surfaces as a blocking modal, not a silent failure.

Deposit success confirmation — Deposit confirmation, with a one-tap receipt capture for the teller's own records.

Transaction detail screen — Every withdrawal keeps a paper trail: transaction ID, customer ID, VAT and total.

Transaction history with filters — Filterable history by status, month and transaction type.

And the same experience on the big screen — the web version.

Web Dashboard

Quik Agent Banking web login — Split-screen login for the web dashboard, branded for VPBank's agent program.

Withdrawal QR code modal — A withdrawal generates a one-time QR the customer scans themselves — no cash changes hands on a verbal "trust me."

Staff management table on web — Admins manage every teller's role and access from one table.

Quik Ting Ting

A payment-notification speaker for small retailers — plus the store it's sold through.

The Challenge

Street vendors and small shop owners in Vietnam mostly accept QR payments now, but confirming one still means unlocking a phone, opening a banking app, and squinting at a screen while a customer waits and the next one queues up. Quik Ting Ting is a small hardware speaker that announces a payment out loud the moment a VietQR/Napas transfer lands, so a vendor never has to look at their phone to know they got paid.

Approach

01

Sold the device like a subscription, not a gadget: the storefront leads with a free speaker, but the real commitment is a 6- or 12-month service plan, with a lifetime one-for-one warranty spelled out on the same screen as the price.

02

Made the merchant app do double duty — the same app that manages the speaker's linked bank account also has a plain cash-payment calculator, because not every sale goes through QR, and a payments app that only handles QR isn't actually useful for a full shift.

03

Kept the pairing flow physical-first: linking a speaker to a bank account starts by scanning the serial QR printed on the device, not typing a code, because it's set up once by hand, often by someone who isn't especially tech-comfortable.

04

Gave the storefront the same rigor as the app — package comparisons, delivery-vs-pickup, and order confirmation, because quiktingting.vn is a real, live store, not a placeholder page.

Quik Ting Ting product screen shown on a phone

Live on the web

quiktingting.vn

The live storefront where this checkout flow ships today.

Merchant Operations App

Login

Merchant registration form — Merchants sign up with just a business name and phone — no paperwork before the first speaker ships.

Management

Merchant home dashboard across stores — One dashboard, every store's transaction count and revenue, filterable by day, week or month.

Linking a speaker to a bank account — Pairing a physical speaker to a bank account: scan the device's serial QR, confirm the receiving account.

Linked bank accounts list — Multiple linked accounts per store, each tied back to its own speaker.

Displaying the store's payment QR — The merchant's own payment QR, ready to show a customer — with a cash-payment fallback one tab away.

Cash payment calculator — A quick calculator for cash sales, so the app stays useful off the QR rail too.

Adding a new staff member — Staff get their own login and choose which stores' balance changes they're notified about.

Webview for buying speakers

Buy A Speaker

Quik Ting Ting landing page — The landing page at quiktingting.vn — the hook is simple: get a payment speaker for free.

Choosing between Wifi and 4G speaker — Wifi or 4G, with per-unit quantity — most stores need more than one till.

Choosing a rental service package — Anchored pricing: strike through the retail price, show the plan, stack in bonus months.

Choosing delivery or pickup — Ship it, or pick it up — a small choice that removes a lot of "where's my speaker" tickets.

Order information form — One form for recipient, store address and the bank account the QR should be wired to.

Order success confirmation — Confirmation, with an immediate path to order details if anything looks off.

Ting Ting also had to work as a piece of e-commerce, not just a product screen — the storefront is the first thing a prospective merchant ever sees of the brand, so it had to carry the same trust signals as the app that comes after it.

Quik SIM

A destination-first marketplace for travel SIMs and eSIMs, bought before you ever land.

The Challenge

Vietnamese travelers buying a local SIM abroad usually do it the hard way: at the airport, in a language they don't speak, from whichever kiosk has the shortest queue. Quik SIM turns that into a browse-before-you-fly experience — physical SIM or eSIM, organized by destination, with pricing and policy visible before departure.

Users & Context

Two shopping habits had to coexist in one app: a traveler who already knows their destination and just wants the fastest checkout, and someone still comparing countries, data caps and validity windows before committing. The home screen's search-first layout serves the first group; filters and sortable results serve the second.

Approach

01

Treated policy as a feature, not fine print: an eSIM is invisible until it's installed, so the plan-detail screen states network speed after the data cap, how a "day" is metered (GMT+8, midnight cutoff) and the 30-day activation window before the user has committed to anything.

02

Designed the cart for itineraries, not single purchases — letting a Singapore, Thailand and China SIM sit in one checkout was a deliberate call for multi-stop trips, not a default we fell into.

03

Used a visible countdown as a fairness mechanic at checkout: it isn't there to pressure a purchase, it protects a reserved price from being held indefinitely while someone browses away.

04

Gave physical SIM orders the same rigor as any e-commerce delivery — status tabs, a timestamped tracking timeline and a structured complaint flow, because a SIM that doesn't arrive before a flight is a bigger problem than a normal late parcel.

Here's the product in your hands — the mobile app version.

Browse & Search

Quik SIM home screen with destination search — Destination-first: search where you're going, not which carrier you want.

Destination autocomplete — Autocomplete on city, landmark or hotel — travelers rarely think in country codes.

Search results with discount badges — Sortable, filterable results with real discount badges, not decorative ones.

Filter drawer for price, cycle and data — Price, validity window and fixed data caps — the three things that actually decide a SIM purchase.

Plan detail with data, cycle and policy — Every plan states its policy in plain language — the details that build trust in an intangible product.

Checkout

Shopping cart with multiple countries — Multi-country carts for multi-stop trips — one checkout for a Singapore/Thailand/China itinerary.

Order confirmation before payment — Order summary before payment — plan, quantity, data and expiry, all restated.

Voucher and promo code list — Stacked discounts, applied inline instead of a separate promo-code detour.

Purchase success with shipment status — Confirmation ties straight into live shipment tracking for physical SIMs.

Orders & Support

Order management tabs — Three simple states — waiting, shipping, delivered — nothing a traveler has to decode.

Order tracking timeline — A granular, timestamped timeline from "ordered" to "out for delivery."

eSIM install QR in order detail — For eSIMs, the order-detail screen surfaces the install QR directly — no separate email hunt.

Full plan policy reference — Full policy reference, always one tap away from the purchase confirmation.

Order complaint flow — A structured complaint flow for the handful of things that can go wrong with physical delivery.