↑ Speed
Faster Checkout
↓ Clicks
Fewer Steps
Touch
First Design
3 Devices
Desktop · Tablet · Mobile
01 — Overview
Project Overview
Propello POS is Epicor's retail Point of Sale system — used by cashiers at store counters to process customer transactions, manage billing, and handle payments in real time. It sits at the most critical moment of the retail experience: the checkout.
The original system was built around a desktop ERP workflow — dense, mouse-driven, and optimized for precision over speed. When migrated to the web, the usability gaps became impossible to ignore. Touch interactions failed, cashiers slowed down during peak hours, and the UI density created friction exactly where the business needed speed.
My role was to lead the full UX redesign — moving from an ERP-style form interface to a speed-first, touch-optimized POS experience that works across desktop terminals, tablets, and mobile devices.
Web POS — Desktop
Split layout · Quick Find · Sticky total
Web POS — Tablet
Touch targets · FAB actions · Large CTA
Mobile POS
Thumb-friendly · Barcode scan · Single-col
Fig 1 — Propello POS redesigned across all three device contexts: desktop terminal, tablet counter, and mobile handheld.
02 — Problem Statement
A Desktop ERP Forced onto a Touch World
The legacy POS was originally designed for desktop monitors and mouse-based interaction — dense ERP workflows that made sense on a large screen with a precise pointing device. When moved to the web and used on touch devices, the cracks appeared immediately.
Legacy Desktop POS Problems
Touch interactions failed — buttons too small for finger use
Cashiers slowed dramatically during rush hour billing
UI density overloaded users with irrelevant ERP controls
Poor visual hierarchy buried critical actions like payment
Accessibility issues — small text, weak contrast, tiny controls
Not usable on tablets or mobile — desktop-only layout
High training time — new cashiers took weeks to get productive
Business Requirements
Faster checkout experience for high-volume retail counters
Modern responsive POS — usable on all devices
Reduced training time — new cashiers productive quickly
Improved cashier satisfaction and lower frustration
Better adoption of the web version over legacy desktop
Touch-first design for tablet and kiosk deployments
Maintain full ERP capabilities behind a simplified UX layer
"During peak hours I'm ringing up customers every 90 seconds. Every extra tap or wrong press costs us a queue. The old system was built for a desk job, not a cash counter."
03 — UX Problems
Six Existing UX Problems We Had to Solve
User research — including observation sessions at live retail counters, interviews with cashiers, and usability testing — surfaced six distinct UX problems driving the redesign.
Small Touch Targets
Buttons and clickable areas were sized for mouse precision — far too small for reliable finger interaction on touch screens.
Mis-clicks during billing
Slower checkout at busy counters
Cashier frustration and billing interruptions
Too Many Steps for Product Search
Finding and adding a product required: open search → select category → confirm product → add quantity — four separate steps for every single item.
Billing time increased significantly during peak hours
Customer queues grew longer
Desktop-Centric Layout
The entire layout was optimized for mouse precision on large screens — completely breaking touch ergonomics on tablets and causing pain on smaller displays.
Difficult to use on tablets
Poor thumb reach for key actions
Poor Visual Hierarchy
Critical actions — payment, search, scan, quick find — were visually buried among dozens of secondary controls and ERP navigation elements.
Cashiers lost time scanning for key buttons
Payment CTA not prominent enough at checkout
Accessibility Issues
Small text, weak contrast ratios, tiny controls, and insufficient spacing between interactive elements created fatigue during long cashier shifts.
Eye strain during extended shifts
Higher error rate toward end of shift
High Cognitive Load
The interface exposed too many ERP functions simultaneously. Cashiers only needed: scan, add, edit quantity, and complete payment — but saw advanced workflows constantly.
Mental fatigue from irrelevant UI elements
Longer onboarding for new cashiers
04 — UX Goals
What the Redesign Had to Achieve
Before designing anything, I aligned with the product team, business analysts, and retail operations managers on clear, measurable goals. These became the filter for every design decision.
G1
Faster Billing
Reduce time-per-transaction for standard checkout flows
G2
Fewer Clicks
Streamline every core action — search, add, pay
G3
Touch Usability
Redesign for finger-first interaction on all device types
G4
Accessibility
Better contrast, larger text, adequate spacing throughout
G5
Cross-Device
Seamless POS experience on desktop, tablet, and mobile
G6
Reduce Training
Simplified UI for faster onboarding of new cashiers
05 — UX Strategy
Seven Strategies That Drove the Redesign
Each strategy directly targeted one or more of the six UX problems identified in research. Every design decision was traceable back to a cashier need, not a feature request.
Strategy 01
Large Touch-Optimized Interface
Rebuilt all interactive elements with touch-first sizing — larger buttons, increased tap target spacing, and thumb-zone-aware layout positioning. Critical actions placed in the natural thumb reach zone for one-handed use.
Reduced touch errors dramatically across all devices
Strategy 02
Floating Quick Action Menu
Replaced buried navigation with a Floating Action Button (FAB) that expands to reveal the four most-used cashier actions: Quick Find, Catalog Search, Product Search, and Barcode Scan — always accessible, never in the way.
Reduced navigation friction — actions reachable in 1 tap
Strategy 03
Simplified Billing Workflow
Collapsed the old 4-step search flow into 2 steps:
Old: Search → Open modal → Select → Confirm → Add
New: Search → Tap → Auto-added to order
Old: Search → Open modal → Select → Confirm → Add
New: Search → Tap → Auto-added to order
Interaction steps cut significantly per product added
Strategy 04
Sticky Payment Summary
Redesigned the payment section as a persistent sticky footer — always visible, never scrolled away. Large total amount display, clear subtotal / discount / tax breakdown, and a high-contrast "Make Payment" CTA dominating the bottom of the screen.
Faster checkout decisions, clearer financial visibility
Strategy 05
Touch-Friendly Product Rows
Increased row height, spacing, and tap area for every line item. Inline quantity controls (+ / −) are large enough for one-tap interaction without needing a keyboard. Item details are readable at arm's length at a store counter.
Better readability and control at busy counters
Strategy 06
Improved Accessibility
Upgraded contrast ratios to WCAG AA across all states. Increased base typography size. Improved icon clarity — replaced ambiguous icons with labeled alternatives. Added adequate spacing between all interactive elements to prevent accidental taps.
Reduced visual fatigue during long cashier shifts
Strategy 07
Mobile + Tablet Responsive POS
Designed three distinct layout breakpoints — desktop terminal (split panel), tablet (single column with FAB), and mobile handheld (full-screen order with bottom sheet actions). Each optimized for its specific usage context and ergonomics.
Full POS functionality across all device types
Bonus — Visual Design
Clean Split-Panel Layout
Desktop layout uses a two-panel design: left panel for customer search, order items, and billing controls — right panel for Quick Find product categories with visual image tiles. Clear visual separation reduces cognitive load and speeds product discovery.
At-a-glance product browsing alongside active order
Propello POS — Desktop Web Interface
Left panel: Customer search bar · Order header · Line items grid with inline +/− controls · Sticky total footer with Make Payment CTA.
Right panel: Quick Find with visual product category tiles · Tab navigation for catalog, customer, notes, settings.
Right panel: Quick Find with visual product category tiles · Tab navigation for catalog, customer, notes, settings.
Fig 2 — Final Propello POS web interface: split-panel layout optimized for desktop counter use.
Propello POS — Mobile Interface
Single-column order list · Customer header with order number · FAB expands to Quick Find / Catalog Search / Scan ·
Sticky bottom bar with Total Savings + large payment CTA button.
Fig 3 — Mobile POS layout: thumb-friendly FAB, barcode scan shortcut, and persistent large payment button.
06 — Before / After
Key UX Improvements — Area by Area
Every dimension of the POS experience was audited and improved. The table below shows the direct before/after for each major UX area.
| UX Area | Before | After |
|---|---|---|
| Touch Targets | Small — designed for mouse clicks | Large & accessible — min 44px tap area |
| Billing Flow | Multi-step — 4 actions per product | Streamlined — Search → Tap → Done |
| Search UX | Hidden in menus — hard to access | Floating Quick Access — always 1 tap away |
| Payment Visibility | Low — buried below content | High emphasis sticky footer with large CTA |
| Mobile Support | Weak — layout broke on small screens | Fully responsive — 3 distinct breakpoints |
| Cashier Speed | Slow — high friction per transaction | Significantly faster billing cycle |
| ERP Complexity | High — all ERP features visible at once | Simplified — only cashier tasks visible |
| Accessibility | Poor — small text, low contrast, tiny controls | Improved — WCAG AA, larger type, clear icons |
| UI Density | Overloaded — too much visible at once | Clean & focused — progressive disclosure |
07 — Design Thinking
The "Speed-First POS UX" Philosophy
The redesign wasn't just a visual refresh. It required a fundamental shift in design philosophy — from "show all ERP functionality" to "complete checkout with minimum friction." Five UX principles guided every decision.
Principle 01
Reduce Cognitive Load
Only essential cashier actions remain visible at all times. Advanced ERP workflows are accessible but not exposed. The interface respects that a cashier at a busy counter has zero mental bandwidth to spare.
Principle 02
Optimize for Repetition
POS users repeat the same actions thousands of times daily — scan, add, pay, repeat. Micro-optimizations that save 2 seconds per transaction save hours across a shift. Every unnecessary step is a productivity tax multiplied at scale.
Principle 03
Thumb-Friendly Design
On touch-based retail terminals, the thumb is the primary input device. All critical actions are positioned within the natural thumb reach zone. Destructive or rare actions are placed outside the thumb zone intentionally — preventing accidental activation.
Principle 04
Prioritize Speed Over Feature Completeness
A fast, focused POS that handles 90% of transactions effortlessly is more valuable than a feature-complete POS that handles 100% of scenarios slowly. The 10% edge cases are accessible — just not front and center.
Principle 05
Accessibility Improves Productivity
Better readability isn't just a compliance checkbox — it directly improves billing speed. A cashier who can read product names and prices at a glance makes fewer errors and works faster. Accessibility and performance are the same goal in POS UX.
08 — Impact
Final Result — What Changed
The redesigned Propello POS successfully transformed a dense desktop ERP workflow into a fast, modern, touch-friendly web POS — while keeping full enterprise ERP capabilities accessible underneath a simplified UX layer.
↑ Speed
Faster Billing
↓ Steps
Per Transaction
↑ Adopt
Web POS Migration
↑ Sat
Cashier Satisfaction
Before — Legacy Desktop POS
High friction — multiple taps per product add
Touch interactions failed on tablets
Long queue times during peak hours
High training time for new cashiers
Cashier frustration, low satisfaction
Poor web adoption — users preferred legacy desktop
After — Modern Web POS
Cashiers completed transactions significantly faster
Full touch support — tablet, kiosk, and mobile
Improved queue management and customer throughput
New users adapted quickly — simplified workflows
Lower frustration, smoother checkout, easier navigation
Users happily migrated from desktop to web POS
"The new POS just gets out of the way. I can scan, add, and take payment without thinking about the software. That's exactly how it should be."
Next Case Study
Sales Order Modernization — Legacy Desktop ERP to Modern Web
View Case Study