UX Design

Click & Collect

The pandemic caused, that a lot of local merchants had to close down their stores and switch their business online. One possibility to connect both online and offline business and continue serving your local customers offline is the click & collect service where customers can order online and pick up the products directly at the store.

The approach

E-commerce software has to tackle this service from two different sides.

Merchants have to be able to setup their click & collect service including their different locations and opening times and customers have to be able to place their order and actively decide how they want to receive it.

Tackling the two different parts of an online shop, the merchant backoffice and the storefront and checkout, also the user groups are two different ones which meant doing two different research phases and afterwards combining both insights and requirements to create an overall feature which serves the different needs and perfectly integrates itself into the existing software and websites.

Activities and Touchpoints

Before starting with the detailed research, the general customer journey of click & collect was created in order to identify the different activities and touchpoints. This journey was created based on existing research and software architecture related to the normal shipping service which was already integrated in the software.


  • Defining of locations
  • Setup of requirements


  • Choosing of products
  • Buying decission
  • Decission on order receiving method
  • Payment

Order fulfillment

  • Order preparation
  • Customer notification
  • Handover of the package
User Research

As there is a lot of e-commerce research it was decided to focus on a indirect research approach for the end customer user group by collecting research reports related to the topic on what customer base their buying decision on regarding additional costs and method of order receiving.

For the merchant user group a lot of user feedback was already existing inside the company which was used to identify the most common needs and requirements from the merchant perspective.

Furthermore an in-depth competitor analysis was done for both parts on how click & collect is integrated in the merchant back  office as well as in checkouts throughout different online shops. The results of the competitor analysis where then compared to the identified user requirements in order to identify best practices and get inspiration for the actual design.

Main user insights


  • Want to define where an order can be picked up
  • Want to offer either: shipping & click & collect, only shipping, only click & collect
  • Want to define the amount of time the need to prepare and order for pickup
  • Want to define the timeslots in which an order can be collected
  • May want to charge a fee for the click & collect service (depending on order volume)


  • Base their buying decision on:
    • Time until they have the order in their hands
    • Scheduling when they have the order in their hands
    • Price of receiving the order
    • Reliability of receiving the order (on time)
  • Don’t want to leave more data than necessary
  • Perceive click & collect as a direct alternative to shipping
  • Wants to be able to plan on how and when they get the order
Market research

For this project two different market research were done.

One was tackling other e-commerce software providers to identify how a click & collect feature is integrated inside merchant back offices and the order handling.

Furthermore another in-depth research was done to identify the different approaches on how a click & collect feature is integrated into the checkout processes of different shops.


Different approaches inside the checkout processes of online shops:

Split Basket

The customer decides already on the product page if the order should be delivered or picked up.

Depending on the choice the checkout process defers based on the necessities of the chosen option.

Often used by franchise businesses where online and offline shopping are seperate.

Local address

After entering the address the customer gets different possibilities such as delivery and pick up which are available in the area where the customer is living.

Used by big brands with a high distribution of shops and fulfillment centers in all regions.

Delivery alternative

Click & collect is presented as an alternative to shipping and therefore part of every checkout process.

Mostly used by smaller online shops which often are not completely customized but instead build by the business owner themselves with a diy software.

Interaction Design

Based on all insights which were gathered during the research phase, an interaction concept was created. It covered both the merchant backoffice side incl. setup and order handling as well as the restructuring of the checkout process in the storefront.

Not all viusals can be shown here but the following shows the basic checkout process which was designed mostly based on the user insights which were stated above and integrated in the already existing 4 step checkout process of the software..

I’ve Worked With



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante magna, suscipit venenatis lobortis at, consequat quis dolor.



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante magna, suscipit venenatis lobortis at, consequat quis dolor.

Get In Touch

Ready to Chat?

(462) 423-2323