Flower cursor
DFS Mobile App Mockup

Click and Collect



Project Period

Sep - Oct 2021

my responsibilities

User Research
Usability Testing


DFS Click and Collect Shopping Bag


DFS Group, a subsidiary of LVMH, is a renowned travel retailer offering luxury products worldwide. As part of its services, DFS provides a "Click & Collect" option, allowing customers to purchase items online and pickup at its T Galleria stores.


Upon investigation, it became apparent that the staff at DFS stores struggled with low efficiency in managing online order fulfilment. This inefficiency stemmed from a combination of a cumbersome system and complicated workflows.


Motivated by the identified challenges, I embarked on a conceptual project to address this issue. Following the completion of UX & UI courses in 2021, I aimed to devise a mobile app solution to streamline the Online-to-Offline (O2O) fulfillment experience for DFS Group.

Discovering User Needs


Field Study

I conducted field studies in 3 T-Galleria stores to observe order preparation by staff.

Prepare pick list

Prepare Pick List

Product images were removed from pick list due to excessive length for printing.

Pick orders

Pick Orders

Lack of specific picking routes; staff walked extensively within store.

Pack orders

Pack Orders

All products placed on ground for packing, leading to time consumption.

Pick up orders for customers

Pick up Orders for Customers

Lengthy pickup process (10-15 mins) leading to customer impatience.


User Interview

I interviewed 9 staff from Product Support Team and Client Service Team to gather insights on concerns.

Challenges the store staff face every day...

Quote Icon

The order fulfilment system is difficult to use and in English only. I wish there is a Chinese version because my English is not good.

– Mary W. (Senior Product Support Executive)

Quote Icon

I hate the paper pick lists. The words are too small and no item image. Sometimes I may pick the wrong items.

– Dora T. (Product Support Executive)

Quote Icon

It's time-consuming to look for the order in the storage room, which made some customers angry for waiting too long for pickup.

– Ivy C. (Client Service Manager)

Creating Wireframes

After reviewing the pain points, I generated ideas using the “How might we” statements, and developed some wireframes.

How might we...

  • simplify the pick and pack process so that users can follow easily?

  • help users identify whether the items are correctly picked and packed?

  • let users reach the orders without using a key?

  • increase the efficiency of communication between staff?

DFS Wireframe Login Page

Login Page

Both Traditional Chinese and English are available

DFS Wireframe Pick List Page

Pick List Page

Displays picking route and status

DFS Wireframe Scan Page

Scan Page

Allows scanning and product placement

DFS Wireframe Stock Transfer Page

Stock Transfer Page

Provides delivery status tracking

Testing First Prototype

After finishing the first prototype, I conducted 2 rounds of usability tests to validate my design, involving 8 users aged 28 - 60. Here are the key changes I made on the prototype after the tests.

Changes I made to my prototype:

Simplified picking process

Some users hesitated to press "Start scanning’ button on the pick list page and the pick and pack flow were confusing.

Changes: Started with scan page, and separated the pick and pack flow which saved 80% of processing time.

DFS Usability Test 1 Before

Before (Start with pick list page → scan product → scan cart)

DFS Usability Test 1 After

After (Start with scan product page, while pick list and map are accessible via buttons at bottom)

DFS Usability Test 2 Before


DFS Usability Test 1 After


Replaced ambiguous icon button with text button

Most users couldn’t find the out of stock button in the first test.

Changes: Revised the button from icon to text “Report out of stock”, leading to 100% task success rate.

Introduced intuitive solution for allocating orders

Most users were clueless about where they should place the orders on the allocated shelves in the storage room. Some of them also scanned the wrong barcode.

Change icon

Changes: Introduced "Put-to-light” system to direct users using light devices, resulting in 50% quicker order allocation.

What is "Put-to-light” system?

“Put-to-light” system a sorting method using light devices to direct users in placing items into individual orders.

How it works:

Lights on shelf guide users where to place scanned items.


It increased order efficiency and accuracy, scalability, real-time visibility.

DFS Put-to-light System

The user at the front side of the shelf is placing items into individual orders, while the user at the back side is packing them.

Final Prototype

DFS Prototype


This project has been a significant learning experience, highlighting the importance of iterative design and user feedback. Despite initial challenges, the final prototype reflects a comprehensive understanding of user needs and addresses pain points effectively. Moving forward, I remain committed to refining my skills and delivering seamless user experiences.