Scaling Click and Collect for Retail and Campus Networks
Project impact
Improved order and package pickup speed by an average of ~40% and increased fulfillment capacity by an average of ~50%.
Improved order and package pickup speed
Metrics are rounded and shared at a high level to respect confidentiality.
Overview
Designed and implemented a versatile smart locker system for retail and campus environments. Through modular workflows and seamless platform integrations, we built scalable pickup solutions that improved fulfillment speed, reduced staff workload, and enhanced user experience across diverse operations.
Team
1 UX Designer, 2 Developers, 1 QA Engineer, 1 Business Development Representative, and Retail Partners
Duration
Summer 2023 – Spring 2026 (Multiple deployments across sectors)
Responding to the shift
Responding to the shift toward self-service access
As demand for self-service pickup and return increased across retail and campus environments, organizations began relying on smart locker systems to extend access beyond staffed hours.
This shift introduced system-level challenges, including varied operational models and the need to support multiple user roles across distributed locations.
design objective
Build a scalable self-service locker system that enables access at any time while supporting diverse operational needs across retail and campus networks.
Collaborative design across sectors
By working closely with both retail partners and educational institutions, we uncovered shared operational patterns beneath very different user contexts. This made it possible to design a unified locker workflow that could adapt across sectors without fragmenting the system.
Rather than relying on highly detailed journey maps, I created a simplified model focused on key stages, pain points, and decision moments. This kept discussions grounded in real operational constraints and directly informed design decisions.
Simplified User Journey Map
Balancing customization with scalability
Designing shared system logic across distinct operational models
To support both retail partners and educational institutions, we designed modular logic blocks for drop-off and pickup operations. These shared modules adapt to different organizational workflows while keeping the core system consistent and scalable across sectors.
Retail setting
Store employees deposit customer orders using an order number, while customers retrieve items with a pickup code.
campus setting
Staff deposit equipment or materials using an employee ID, and authorized users collect items with a pickup code.
The same locker flow supports different operational models through configurable identifiers and access rules.
System integration and collaboration
Platform integration
Designing UX around system integrations
Behind these experiences, the system connects seamlessly with partner platforms. We integrated with Shopify for retail operations and enabled API connections for educational institutions, allowing lockers to verify orders or employee IDs and send pickup codes directly to the associated phone number or email, ensuring real-time coordination and smooth data flow.
System Flow Diagram
Staff at Locker
enters Order # / employee ID
Locker Platform
validate ID
API call
Partner System (Shopify / Campus)
returns: validity + contact (phone/email)
Locker Platform
allow assign compartment → staff deposits item
generate pickup code
send notification
API call/messaging service
User (SMS / Email)
receives pickup code
unlocks locker
Two API touches power the flow: ID validation before deposit, and automatic notification after deposit with a pickup code linked to the user’s contact on file.
From a UX perspective, my focus was on aligning the interface feedback with these system interactions. Working closely with developers, I mapped how each API call works. First, validating the ID, then sending the pickup code, translated into clear, timely feedback for staff and users. This made the technical integration feel invisible while keeping the experience reliable and consistent across environments.
Flexible branding with a custom design system
SCALABILITY STRATEGY
Designing configurable branding without fragmenting the system
To give clients a consistent yet customizable branding experience, we developed a custom design system that allows them to easily tailor the locker interface to their brand identity. Each organization can adjust the interface’s color palette through five global color tokens, allowing visual differentiation without introducing structural variance.
Default BlueBox Smart Locker Color Palette
This approach ensures brand consistency while keeping the system flexible for diverse client needs. With a few configurable settings, organizations can maintain their visual identity without additional development work, making the lockers feel like a seamless extension of their brand.
Retail Partner Color Palette
School Partner Color Palette
developer Partner Color Palette
private club Partner Color Palette
The system has since been adopted by multiple clients, each applying their own color palette while keeping the interface clear and consistent. We limited the system to five core colors to balance creative freedom and consistency, keeping customization simple for clients while maintaining good readability and color contrast across all themes.
Some thoughts at the end
Throughout this project, I became increasingly involved in discussions with our marketing team and clients. Understanding their operational needs and shaping the product around real-world constraints became just as important as refining the UI. This expanded my role beyond interface design and into cross-team problem-solving.
This work reinforced that good design goes beyond screens. In practice, strong UX outcomes depend on how well systems, people, and operations align in real environments. Designing within those constraints was critical to making the product reliable and scalable.
Seeing the same design foundation support both retail customers and school staff highlighted the flexibility of the system. That foundation now supports new locker modes and custom integrations, including direct POS connections, as the platform continues to expand to meet diverse operational needs.
Leveling up with amenity sharing
sep 2025
We recently expanded the system with a new mode designed for Amenity Sharing. This update began when student residents reached out requesting a way to share community items through the lockers. In response, we collaborated with them to tailor a workflow that allows staff to place shared items inside a locker and students to borrow and return them on their own.
This new mode builds on the same design foundation and demonstrates how the system continues to adapt to different operational needs and real-world use cases.
