Optimising the Delivery Time Slots

Project

Improve the user experience by optimising the delivery slot component

My Role

UX: Research, prototype & user testing
Design: UI Components (Desktop & mobile)

Tools

Figma
Hotjar

Overview

Tasked with addressing a critical pain point in the customer journey during checkout, I undertook a project to enhance the delivery page for Pick n Pay Online Retailer. The transition to a new fulfillment vendor introduced morning and afternoon time slots at a standard rate of R60 per delivery, replacing the previous hourly delivery slots. However, the updated slot grid lacked clarity, leading to increased user drop-offs and frustration. With a focus on front-end changes and a tight timeline due to impending Black Friday requirements, the goal was to streamline the time slot selection process.

Challenges

Two major challenges presented themselves: limited time and resources. Despite the broader focus on a complete website redesign, the urgent need for improvements in the delivery page demanded a concentrated effort on front-end changes within a single “2-week dev sprint.”

Research and Analysis

Utilizing Hotjar, I conducted a heatmap analysis and reviewed activity videos of both new and existing shoppers on desktop and mobile. Findings indicated significant user struggle and frustration, particularly among new customers accessing the platform via mobile devices. To gain deeper insights, I interviewed 5 online customers, observing their experiences during the checkout process. Common frustrations included difficulty selecting a time slot and confusion about the inability to progress to the payment page.

User Testing & Feedback:

Pre-Screening Questions:

Are you an online grocery shopper?
If yes – Which services do you use and why?
If no – Do you use any other online services which require you to make a booking.

Tasks to perform:

Add a product to your cart and continue to checkout.
Choose a Click & Collect or Delivery time slot of your choice and progress to the next step.

Observation: I noticed similar frustrations where participants struggled to select a slot from the slot grid and were confused why they weren’t able to progress to the payment page.

Participants expressed concerns such as:

“Why can’t I select a time slot?”
“Why don’t I see any available slots?”
“Why can’t I checkout?”

Solution

The primary focus was on redesigning the slot grid component to enhance navigation and provide clear call-to-actions. The overall simplification of the slot grid involved displaying only available delivery slots and consolidating time and delivery slot columns. Front-end styling underwent cleanup, and clear rollover behaviors were implemented on desktop.

Implementation

The grid update displayed available slots and simplified the component by consolidating time and delivery slots. The condensed and rearranged components within the slot grid resulted in a significant increase in usability. The design updates led to improved user satisfaction, limited to no user errors, and a remarkable 275% improvement in time on task.

Results

Booking delivery time slots on both desktop and mobile, either prior to shopping or during checkout, became clear and easy to use. The design changes successfully addressed the identified issues, reducing customer frustration and, consequently, minimizing drop-offs during the critical checkout phase. The project’s success not only contributed to a more seamless customer experience but also aligned with the business’s objectives, especially in preparation for the high-demand Black Friday period.

Conclusion

By focusing on front-end changes and leveraging user feedback, the optimization of the delivery page for Pick n Pay Online Retailer proved to be a strategic and impactful solution. The project showcased the value of user-centric design and demonstrated that even with limited time and resources, targeted improvements can significantly enhance the overall customer journey, contributing to increased satisfaction and revenue retention.