Merchant Payment Platform
Transforming a legacy POS app — where core actions were buried in menus and flow breaks meant restarting the device mid-sale — into a high-speed, intuitive mobile payment ecosystem.
Challenge
Core actions buried in a hidden menu, forcing extra taps for daily tasks. Flow breaks recoverable only by restarting the device mid-sale. Non-ergonomic layout designed for desktop, not one-handed mobile use.
Solution
70/30 rule for home screen real estate, thumb-friendly navigation, persistent device status, and a speed-first information hierarchy.
Impact
Reduced the full transaction flow from 7 steps to 5. Fewest possible taps to complete a sale. App became a competitive differentiator instead of a liability.
The Friction Audit
UX Research · Heuristic Evaluation · User Persona EmpathyI developed the profile of “Andrea”— a boutique owner whose primary pain point was “Transaction Anxiety”: fear of losing a sale due to a technical glitch or confusing app flow.
User Persona — Andrea, 28
An entrepreneurial woman running a small boutique, looking for practicality when serving her customers. She constantly uses her phone to manage her finances and knows she needs to stay on top of trends to keep generating ideas for her business. She opened a few months ago and is currently expanding her product offering.
Pain Points
- — Could only accept cash payments
- — Lost sales from not offering the payment methods her customers needed
- — Alternative payment methods were prohibitively expensive to set up
Goals
- — Increase sales
- — Open a second location
- — Get better visibility into her income
Real user reviews echoed this fear directly — recurring complaints about app failures and abandoned purchases, with some merchants mentioning they'd switch to a competitor entirely.
Heuristic audit revealed:
- —Redundant branding occupying 30% of screen on a task-oriented app
- —Non-ergonomic menu placements designed for desktop, not one-handed mobile use
- —Icons failing to communicate their purpose to first-time users
Design Decision
Users were forced to restart devices to fix flow breaks — identifying a critical need for a persistent System Status indicator during hardware pairing.
The Architecture of Speed
Information Architecture · Ergonomic Design · Hierarchy OptimizationGoal: make a sale happen in as few taps as possible.
- —The 70/30 Rule: Redesigned the home screen to give 70% of real estate to the "Sale Value" input — the single most frequent action.
- —Ergonomic Navigation: Relocated primary nav from top corner to thumb-friendly zone for one-handed merchant use.
- —Hierarchy of Data: Simplified Sales Summary (Monto Base, IVA, INC, Total) for at-a-glance verification by both merchant and customer.
// Key Feature
A persistent Device Status indicator eliminated the restart cycle entirely — merchants see connection status before starting a sale.
The Design System
Visual Language · Design System · Brand IdentityBeyond redesigning individual screens, the app needed a foundation that could scale — a Design System that gave the product a consistent, ownable identity for the first time, rather than components styled ad hoc per screen.
I defined:
- — A 3-tier button hierarchy (Primary, Secondary, Tertiary) for consistent action weight across every screen
- — A 4-color palette anchored to a primary brand blue, with defined roles for each shade
- — A type scale pairing a bold display font for headings with a regular/bold pairing for body content
- — Active and inactive icon states for the four core navigation actions, so users always know what's currently selected
// Key Feature — Component Library
Instead of one-off screens, the system gave engineering a reusable library — every button, color, and icon state documented once and referenced everywhere, not redesigned per screen.
// Results
7 → 5
Steps to Complete a Sale
Consolidated the full transaction flow — from opening the menu to confirming payment — down to 5 steps.
— Chapter 02
Restart Cycle Eliminated
Device Status Indicator
A persistent connection indicator ended the "reboot to fix a flow break" problem entirely.
— Chapter 01 / Chapter 02
New Design System
Buttons, Colors, Type, Icons
Replaced ad-hoc, per-screen styling with a single reusable component library.
— Chapter 03
“In Fintech, UX is a balance between User Empathy — reducing merchant anxiety — and System Logic — managing hardware constraints. I turned a review-plagued, restart-prone product into a high-performance payment tool.”
Solving something like this for your team?
Book an intro call →