UX/UI Case Study
Tops Online
Designing delivery coverage, fulfilment options, and checkout messaging for a more flexible online grocery experience.
About
Tops Online enhanced its platform by introducing distinct coverage areas and more flexible delivery options. Customers can choose from three convenient fulfilment methods: Express Delivery for urgent orders, Standard Delivery for planned grocery runs, and Click & Collect for shoppers who prefer to pick up their items nearby. The upgrade creates a more personalized and efficient shopping experience that can adapt to different schedules, locations, and shopping needs.
Opportunity
We had the opportunity to design the full end-to-end flow while accounting for a wide range of scenarios. These included logged-in and guest users, preorder items and readily available items, as well as different location-based delivery conditions. Two areas required especially careful consideration: delivery type and coverage area. Some locations, for example, may support Standard Delivery but not Express Delivery, so the experience needed to communicate availability clearly without interrupting the user journey.
Design Strategy
We worked closely with the business team to identify potential user scenarios, then used those insights to shape the optimal journey. From there, we developed wireframes that made delivery options prominent and supported them with clear messaging. To prioritize convenience, Express Delivery was set as the default based on the assumption that grocery items are often essential and time-sensitive. When Express Delivery is unavailable in a customer's area, the system displays a notification and automatically switches to Standard Delivery, keeping the flow smooth and predictable.
Findings
Customers were able to navigate the design with ease, but feedback showed that most preferred Standard Delivery as the default option. This preference may be linked to the delivery fee structure: Express Delivery is only free when customers spend above a certain threshold, while Standard Delivery is always free. The finding suggested that cost clarity and default selection have a strong influence on perceived convenience.