Click n Collect – A White-Label Interface for Smart Locker Experiences

We were tasked with designing a scalable locker interface adaptable to both commercial and residential environments, without relying on a branded visual identity. This white-label solution needed to support four locker types - Temperature-Controlled, Parcel, Mail & Document, and Laundry & Dry Cleaning - and be legible across varied lighting conditions. Screen size was fixed (1024×768px), so layouts had to be highly efficient. The interface needed to support multilingual use, outdoor installation, and three distinct user types: customers, couriers, and admin staff. The design also had to avoid licensing risks, requiring an open-source, developer-friendly UI system that could scale globally without rework.

We developed a modular, logic-driven interface grounded in user research and refined through iterative prototypes. The UI system supports full locker workflows (from customer pickups to courier deliveries to admin summaries) with adaptable screen flows, error states, and visual indicators. The design framework includes white-label theming, multilingual UI, and locker type/status visualisation (e.g., ‘blocked’, ‘overdue’, ‘dirty’). The fixed screen layout was optimised for clarity under varied lighting, with strong contrast, clear CTAs, and intuitive icon-text pairings. The final package included a complete Figma prototype, documentation, animations, and developer-ready assets, allowing seamless implementation without proprietary design dependencies.

The design system for Click n Collect has already delivered internal value. It clarified product direction, improved team alignment, and enabled seamless collaboration with developers. Built on open-source assets and free from licensing constraints, the system supports scalable, cost-effective growth. Its modular structure allows flexible branding and localisation without added complexity. Internally, teams now work from a unified UI framework that supports consistent implementation across locker types and user roles. The design positions Click n Collect as a forward-thinking, partner-ready platform with the visual clarity and usability needed to scale confidently.

- Fixed-screen optimisation: UI purpose-built for 1024×768px touchscreen environments - Multi-role UX: Distinct flows for customers, couriers, and admin staff - Modular structure: Designed for brand neutrality with flexible theming - Visual status indicators: Locker states include: available, in use, overdue, dirty, blocked, disabled - Locker type visualisation: Temperature-Controlled, Parcel, Mail & Document, Laundry & Dry Cleaning - Multilingual interface: Built to accommodate multiple languages and RTL formats - Open-source approach: No proprietary fonts or assets ensures broad compatibility and avoids licensing constraints - Developer-focused handoff: Includes high-fidelity Figma prototype, motion, asset library, and UI documentation - Accessibility-aware design: Optimised for readability, contrast, tap targets, and low-tech literacy - Flexible error & support flows: Built-in FAQs, help messaging, and recoverable error states - Trusted by global retailers: Including Tesco, Woolworths, Instacart, and others - Scalable system: Enables rollout across different screen environments and market contexts with minimal UI changes