Click & Collect redesign
The Challenge
Imagine being a customer who finds the perfect pair of shoes online, only to discover the collection process could take days longer than anticipated. This was the challenge facing Dune London customers.
The legacy Order Management System (OMS) was not able to provide real-time stock updates and this created delays in transferring items between stores to fulfill Click & Collect and delivery orders. Customers often had to wait up to 10 days for delivery, even for items sourced locally leading to frustration, missed opportunities, and a subpar shopping experience.
Additionally, usability and accessibility issues throughout the Click & Collect flows compounded the problem.
The Vision đź’ˇ
The goal was clear, redesign the user journey to offer:
- Real -Time stock availability, providing accurate data for stock and collection times.
- Same day Click & Collect option, allowing customers to collect their orders from Dune London store from one hour when ordered.
- A seamless and inclusive user experience, from the Product Details Page (PDP) to the Basket page, and Checkout.
My Role
As lead UX designer and accessibility specialist, I led and provided an end to end design process including:
- Facilitating discovery sessions to understand user needs
- Collaborating with stakeholders to ensure business gaols are addressed
- Designing journey map, user flows, and high-fidelity prototypes
- Conducting manaul usability audit to identify issues
- Ensuring compliance with accessibility standards
Phased Execution and Design process
To ensure a structured and systematic implementation, the project was divided into two phases.
- Phase 1 - Infrastructure and Platform Integration: Led by the IT team, this phase focused on integrating the OneStock platform with existing systems, ensuring smooth communication with related applications.
- Phase 2 - UX and UI Design and Implementation: This phase involved analysing user needs, identifying issues in existing flows, and redesigning the customer journey to enhance the end-to-end Click and Collect experience.
My Design approch
Below is my approch to all phases of the design lifecycle, refinement and building the experince to cater for all various audiences aligning buiness goals and user needs.
-
1.
Uncovering the Pain Points
Understanding business objectives and identify problems that users face.
- 2.
Crafting the Solution
A cricle of activities from transforming ideas to sloution to bring the concepts to life.
-
3.
Delivery and Implementation
Collaborate with the stackholders and the development team to impelemnte the UX.
Uncovering the Pain Points
The project began with a series of discovery sessions and requirements walk through with the stockholders to identify, core issues, user pain points and needs as well as business objectives and project expectations.
It was also critical to understand the scope of the project, the new system and opportunities. This discovery process involved key stakeholders and relied on data-driven insights.
Key Findings and challanges
During these discovery sessions, we uncovered important business goals and challenges.
- The legacy OMS could not sync real-time stock data across online and in-store channels and this caused operational challenges
- Improving Click & Collect was a top priority to remain competitive in the retail market
- Delivery inefficiencies created a bottleneck, particularly for inter-store transfers
- The experience cuased customer dissatisfaction and placed unnecessary strain on customer service teams
- Complex user flows, designing for multiple scenarios (e.g., collection eligibility, mixed items and delivery options, checkout real-time stock availability checks...etc)
Collaboration and Data Analysis
To better understand the issues and opportunities, we analysed the requirements, key challenges, and data from our integrated applications, as well as the new Order Management System (OMS) and its capabilities. Based on this analysis and a detailed review of the existing user flows, we identified over 90 unique permutations that needed to be considered and addressed during the design process.
Usability and Accessibility Issues
As part of our redesigning process, we thoroughly evaluated the Click & Collect flows for usability and accessibility, and found several areas needing improvement.
- Check stock availability feature on the PDP displayed mismatched information
- Poor UI interaction frustrated users to interact with the featuers
- Lack of user instructions and notifications to guide user through the flows when needed
- Incorrect page structure and content heirachy such headings, forms and relavent information on pages and pop ups
- Unclear steps and navigation made the experience difficult for all users
- Inaccessible sections such as Keybord traps stopped users to navigate through the Click and Collect flows
All these insights helped shape a clear and purposeful design strategy.
Crafting the Solution
The design phase was initiated with the goal of addressing all identified challenges while introducing new new features to enhance the overall user experience.
User-Centered Design Approach
During the discovery phase we mapped over 90 permitations , accounting for:
- Various scenarios such as, single-item vs. multi-item orders, ineligible products, and store-specific stock differences.
- Registered users vs. gust users, registered users order before or first time ordering.
- Complex paths from the PDP to Checkout.
These formed the foundation for an intuitive and streamlined user journey, shaping the user flows from the Product Details Page through to the Basket and Checkout pages.
To create a smoother and more inclusive experience to tackle usability and accessibility issues, the existing key features were revamped with a focus on simplicity and clarity, making sure they worked well across all possible user flows, from the Product Details Page all the way through to the Basket and Checkout.
- Check Stock Availability
- Display real-time stock availability and updates for each store and collection point
- Show accurate collection times upfront for each store
- Notify users of the ineligible products for collection during the journey
- Provide clear structure, steps, and intuitive instructions throughout the user flow to reduce Checkout abandonment
- Improve interaction design, making features easier to access and use
- Separate chargeable collection points from Dune London stores to clearly present multiple collection options
- Deliver essential information through clear notifications and messages that guide users and prompt necessary actions
- Automatically refresh stock availability in edge cases, such as when users return to the page after a period of inactivity, to ensure information remains accurate and up to date.
- Optimising and Getting the Flows Right
- Notification alerts for products ineligible for Click & Collect, ensuring users are informed early in the journey
- Clear pathways covering all user flows and scenarios, guiding users smoothly through the process
- Easy-to-understand options, allowing users to confidently choose between different collection methods
- Accurate real-time stock availability and collection times displayed for each store and collection point
- Clear collection options, separating Dune London stores (free collection) from third-party collection points (paid collection)
- Error prevention and validation, flagging unavailable items before users progress further
- Transparent third-party delivery charges, shown upfront
- Smooth interactive elements, enabling users to select and change stores with ease
- Session timeout handling, including clear messaging and automatic stock refresh when users return and trigger key actions
- Comprehensive store information, including opening hours, contact details, and integrated Google Map views for convenience
- Accessbiloity complaince
The stock availability check on both the Product Details Page (PDP) and the Checkout were redesigned to:
The enhanced stock availability feature now gives customers a reliable view of which items are available and when, empowering them to make more informed decisions.
Based on our journey map, user flows were carefully designed to cover all possible scenarios, ensuring users could navigate through clear and intuitive steps. To enhance the overall experience, the Click & Collect pages and interactive elements were redesigned for improved structure, clarity, and usability, with key information consistently presented throughout.
Designing for accessibility has always been central to our approach. Throughout the design and development process, we applied the four core accessibility principles wherever applicable. We also documented clear accessibility requirements for the development team, including all relevant WCAG (Web Content Accessibility Guidelines) standards. In addition, we provided industry best practices to support the team in implementing accessibility consistently across the product.
Prototyping and feedback
Wireframes and, subsequently, high-fidelity prototypes were created to bring the designs to life. These were tested with internal users and presented to stakeholders for review. Feedback highlighted opportunities to improve clarity and ease of use, leading to minor refinements such as rephrasing messages and adjusting modal layouts to enhance the overall user experience.
Delivery and Implementation
Upon completion of the design phase, I worked closely with the development team to ensure smooth and accurate implementation of the designs. We also collaborated with the IT team to integrate the solution with the OneStock platform, enabling seamless communication between the Order Management System (OMS) and Dune London’s internal systems.
Following the completion of development, the following key activities took place:
- Real-time data syncing, stock availability was updated instantly across all customer touchpoints, with automatic inventory refresh triggered when users returned to a page after a period of inactivity
- UAT and usability testing, the new Click & Collect experience was thoroughly tested to ensure it could handle high traffic and complex orders without errors. All new features were validated for correct UI behavior and interaction design
- Accessibility Compliance testing, the system was tested to confirm full adherence to WCAG standards, meeting AA conformance requirements
- Staged rollout, a phased deployment approach ensured the new system remained stable and functional before full-scale launch
Achievements
One of Dune’s key indicators of customer engagement, satisfaction, and loyalty is the order cancellation rate. Since go-live, Dune has seen a52% reduction in cancelled units, with the overall cancellation rate dropping from 2.5% to 1%.
This improvement has resulted in a £70,000 saving on the “20% off your next order” incentive previously issued to customers with cancelled orders. Additionally, “Where is my order?” queries have dropped by 77% , demonstrating a major boost in customer satisfaction and service reliability.
Notably, this project also contributed to Dune winning the Drapers Award for Best Online Operation in 2025, recognising the team's exceptional work in enhancing the end-to-end customer experience.
Conclusion
Dune London’s transformation was more than just a system upgrade, it marked a strategic shift toward customer-centric retailing. By addressing real pain points and harnessing the power of technology, the company delivered a smoother, faster, and more reliable shopping experience.
The success of this project highlights the impact of combining data-driven insights, inclusive design, and innovative technology to solve complex business challenges. Customers no longer had to wait days to collect their purchases, they could shop with confidence, knowing their perfect pair of shoes could be ready within the hour.