Retail PoS System

A major UK hardware retailer needed a modern point of sale system for their trade counters. The existing system was slow, required extensive staff training, and couldn't keep up with peak-hour traffic.

The goal: a tablet-first PoS that staff could learn in minutes, not days — while handling complex workflows like click-and-collect, trade accounts, and inventory lookup.

As Design Engineer, I bridged design and development:

Component Architecture — Designed and built a modular component library in React + Tailwind CSS Design System — Established tokens, patterns, and documentation for consistent UI UI Development — Implemented production-ready interfaces from design specs Storybook — Built interactive component documentation for the team Design-Dev Process — Established workflows between designers and engineers

The component library was built around retail-specific patterns:

Speed-first — Large touch targets, minimal navigation depth, keyboard shortcuts for power users Error-resistant — Clear feedback, confirmation dialogs for destructive actions, easy undo Scannable — High contrast, consistent hierarchy, status colors that work in bright store lighting Composable — Small, focused components that combine into complex workflows

The system shipped to pilot stores and expanded across the retail network.

What I delivered: • 40+ production-ready React components • Complete design token system (colors, spacing, typography) • Storybook documentation with usage examples • Tablet-optimized layouts for browse, checkout, and account management • Component patterns adopted by the wider engineering team

What I learned: Retail UI has unique constraints — bright lighting, rushed interactions, gloved hands. Designing for these edge cases early saved significant rework later.