GIF BY D

Driving Efficiency and Empathy Through UX Transformation with BYOD

Global Integrated Fulfillment (GIF)

Walmart's store fulfillment platform called GIF is a pioneering associate facing application designed to digitize and optimize online fulfillment operations. This ambitious initiative streamlined picking, packing, staging, and distribution across over 5,000 stores in the USA, UK, Mexico, and Canada.

Impact

In the US stores, in the last 2 weeks, 17.6 million orders out of 24.1 million orders were dispensed.

The Challenge

A Burden on Our Associates and Operations

This project was a critical step in modernizing the customer order fulfillment experience for Walmart Store Associates, specifically migrating the core application from proprietary TC70 devices to Samsung XCover Pro mobile devices.

On average, a single associate scans approximately 18+ orders per day. The company operates 4000+ stores in the U.S alone., along with stores in Canada, the U.K., Mexico, Massmart, and Adobe.

As the lead designer, objective was to leverage advanced mobile camera scanning capabilities to not only enhance operational efficiency but also significantly improve the daily lives of our associates, transforming an often-exhausting task into a simple and quick one.

Order fulfillment journey

On an average, an Associate scans around 21.6 orders in a day.

For every barcode scan – whether it was for items, totes, boxes, or hazmat labels – associates had to press a hard physical button repeatedly on the TC70 device. A single-item order could require 6-8 scans, translating into an average of hundreds, if not thousands, of repetitive button presses daily.

Our store associates relied on TC70 devices for order fulfillment tasks like Picking, Staging, Packing, and Dispense.

TC70 devices

Physical Strain & Repetitive Motion leading to "trigger finger"

A single-item order could require 6-8 scans, translating into an average of hundreds, if not thousands, of repetitive button presses daily. This was not only exhausting but also posed a significant risk of repetitive strain injuries, such as "trigger finger".

Proprietary Device Dependency and Cost

Our reliance on expensive, proprietary TC70 devices limited our operational flexibility and scalability. It also meant higher maintenance costs and restricted the ability for external partners or even associates in some markets (like ASDA in the UK) to use their own devices.

Existing BYOD 1.0

Fundamental design flaws

Motor-skills efforts (Fitt’s Law): The primary Call-to-Action (CTA) "Scan Item" was poorly placed, situated far from the natural reach of an associate's thumb. This increased motor-skill efforts.

Fat-finger issue: D ue to the close proximity of buttons, the associates accidentally tapped "Item not found" instead of "Scan Item"

Same button style = no intuitiveness

There is not difference between Scan CTA and other CTAs. It’s not a proper-immediate signifier that this button will start the scanning process

Groundwork

Auditing all GIF modules

to find common patterns among all modules in order to bring consistency in design and experience
find loopholes in task-flows which may have been impacting work efficiency
decide what information should be shown on screen at what time

Scanning patterns

The official scanning partner Scandit['s scanning patterns were explored.

After that the taskflows of all GIF modules were rethought from the lens of Scandit scanning patterns.

FAB vs Edge Panel

A critical decision, following extensive exploration, was the adoption of a Floating Action Button (FAB) as the primary scanning CTA.

While we considered other options like Edge panels, I recognized that the FAB offered distinct advantages:

it is intuitive (much like a camera button on a mobile phone),
doesn't occupy excessive screen space,
is ambidextrous,
doesn't interfere with other gestural actions like the edge panel would, and
most importantly, is easily reachable, significantly reducing motor-skill efforts and eliminating the "fat-finger" issue.

Design solution part 1: Optimizing workflows

Optimization

Optimizing all the workflows of Dispense module

The designing of BYOD started with Dispense module, where all the workflow involved in various scenarios of dispensing a customer's orders were optimized.

Exploring Associate interaction with customer

The in-person interaction between the Associate and the customer was carefully considered, down to the minor details, along with its impact on the Associate’s workflow within the app—ensuring the entire experience remains quick and seamless.

The dilemma of three buttons

With the FAB scan button added, the Associate now sees three buttons—though 'Back to Queue' and 'Continue' aren't primary actions at that moment.

The proposed change was to remove 'Back to Queue', rely on the top back button (after aligning its behavior), and show 'Continue' only when necessary, otherwise have auto-progress the flow.

The dilemma of sequence of scanning

Should it be location-wise or order-wise?

The Associate’s picking and scanning flow was evaluated, comparing location-based vs. order-based (OSN-wise) scanning. Location-based scanning was preferred as it ensures chilled and frozen items are picked last and reduces repeat visits to the same location, saving time.

Design solution part 2 : Final designs

Before

Solution: BYOD GIF

An intuitive way to scan: FAB Scan button

A critical decision, following extensive exploration, was the adoption of a FAB (Floating Action Button) Scan as the primary scanning CTA.

The FAB offered distinct advantages:

From half n half to dynamic bottomsheet

To further streamline the user experience, we introduced a bottom sheet to display only the most relevant information, reducing cognitive load. Associates could then swipe up for additional details if and when needed.

showing only the most relevant information at the moment
swipe up to see more information that may be required

Emotional design aspect

When a product crosses the threshold of emotion, provided it is technically sound and solves the problems of the users.

It’s the emotional connect of the product that makes it an emotional design.

FAB scan is Emotional Design

Current scanning experience: monotonous work; pressing scan button multiple number of times
FAB symbolizes new and better scanning experienc
- continuous scanning = less work (no need to press scan button everytime multiple scanning is needed)
- easy to do multiple scans
- intuitive, since similar to camera button in mobiles

Impact on the Associates

They will see scanning as non-tedious task since the new scan button will be synonymous with continuous scanning
The mental model of the entire scanning process has become simpler, where earlier they had to press the hard button multiple times is now replaced with a single tap whenever they need to scan barcodes one after the other
There will not be any fat-finger issue or extra effort in tapping the scan button on screen

My takeaway

While the initial rollout of BYOD for Picking and Dispense has been successful. Other BYOD versions for the remaining modules, such as Packing, Loading, Receiving, and Quality Check, were designed with a continued focus on minimizing scanning efforts.

We are also actively addressing identified shortcomings, including occasional slowness with XCover devices and instances of accidental rescanning due to rapid scan speeds.

AI Ops

It is a chatbot configuration platform designed for Ops teams across various operational products.

View