Selected Works

Experience

Resume

Say Hi! 👋

Mubashirulislam Shaikh

Selected Works

Experience

Resume

Say Hi! 👋

Mubashirulislam Shaikh

Selected Works

Experience

Resume

Say Hi! 👋

Packing orders like a pro

I helped METRO Markets reduce packing time from 1:57 to 0:48 per order (↓59%) by redesigning the Pack App used in warehouses.

As the lead UX designer, I worked closely with product handlers, logistics teams, and developers to simplify workflows and improve packing speed through barcode-first interactions and visual enhancements.

+59%

Average packing time

+18%

Orders packed per hour

99.2%

Packing accuracy

Role

Lead UX Designer

Industry

E-commerce

Stakeholders

Warehouse Country
Managers, Product Handlers

Duration

6 months

Scope

Discovery → Delivery

The Challenge

In METRO’s busy warehouses, every second counts. I spent time inside the warehouse to observe how packers used the old app.

They often lost time switching tools — scanner → mouse → screen
Pack items were misidentified due to poor text-based UI
Users were overwhelmed by too much on screen

In METRO’s busy warehouses, every second counts. I spent time inside the warehouse to observe how packers used the old app.

They often lost time switching tools — scanner → mouse → screen
Pack items were misidentified due to poor text-based UI
Users were overwhelmed by too much on screen

In METRO’s busy warehouses, every second counts. I spent time inside the warehouse to observe how packers used the old app.

They often lost time switching tools — scanner → mouse → screen
Pack items were misidentified due to poor text-based UI
Users were overwhelmed by too much on screen

User Archetypes

I identified two main archetypes for the warehouse packers:

Conscientious Follower: Prefers reading instructions and adhering to each step in the UI, ensuring compliance and accuracy.
Instinctive Doer: Relies heavily on prior training, often overlooking screen text in favor of familiar patterns.

Workflow Mapping & Redesign

Mapped the current process to expose friction points, then reimagined the flow with:

Barcode-first interaction: Most steps triggered by scanning
Visual product identification: High-res images for every SKU
Contextual states: Clear alerts for missing, extra, or wrong items

I started with drawing low-fidelity sketches and mapped out user flows for two design variants, focusing on optimising the visibility of items being packed.

Variant 1 featured two sections: left side contained products to be packed. Products moved to right section when scanned.

Variant 2 proposed a catalog styled page where user can see the bigger product pictures and product quantity on the header.

The complete flows for both variants in medium-fidelity can be found in this Whimsical board.

I refined the design iteratively through guerrilla testing with the UX team and warehouse country managers. Based on the feedback, I went ahead with Variant 2.

Following the finalization of variant 2, I proceeded with creating high-fidelity designs and an interactive prototype in Figma for warehouse testing implementation.

Testing the Solution

The first usability test round involved 5 warehouse packers using a Wizard of Oz.

We used a presentation pointer to simulate the scanning functionality. As soon as a user employed the barcode scanner, we pressed a button to advance to the next state.

Key Findings

Final Design Highlights

The final version of PackApp introduced a streamlined UI with specific enhancements for warehouse efficiency:

Orders Overview: List of orders ready for packing.

Order Details: Displays essential information such as item image, quantity, and carton type.

Virtual Cartons: Ability to create and manage virtual cartons for complex orders.

Error Handling: Useful error messages and an option to unpack a carton.

Status of user actions: The progress stepper shows the current step along with micro-animations.

Barcode over buttons: As user mostly used barcode scanners, the needs to switch between mouse/keyboard and device was reduced by embedding barcode next to buttons.

Outcome & Impact

When we began, there was no clear data/metrics to understand the packing process beyond the total number of daily orders in Odoo. To address this, we started recording timestamps for packing steps. This gave us a baseline to compare against the new metrics we developed for measuring performance and success. Key impact included:

Packing time dropped from 1:57 to 0:48 per order (↓59%)
10,000+ orders packed within first month of launch
Users reported the new app was “much faster and easier to use”
Improved delivery SLAs through faster warehouse throughput

Packing time dropped from 1:57 to 0:48 per order (↓59%)
10,000+ orders packed within first month of launch
Users reported the new app was “much faster and easier to use”
Improved delivery SLAs through faster warehouse throughput

Packing time dropped from 1:57 to 0:48 per order (↓59%)
10,000+ orders packed within first month of launch
Users reported the new app was “much faster and easier to use”
Improved delivery SLAs through faster warehouse throughput

Key Takeaway

Designing for barcode-first systems requires a shift in mindset from typical touch UIs
Embedding yourself in real environments uncovers critical micro-frictions
Even small visual and interaction changes can create massive impact when paired with the right workflow
Prioritize Users' Mental Models: We initially restructured the flow based on the desired business vision, but user feedback revealed a disconnect from their mental model, prompting a redesign.

Designing for barcode-first systems requires a shift in mindset from typical touch UIs
Embedding yourself in real environments uncovers critical micro-frictions
Even small visual and interaction changes can create massive impact when paired with the right workflow
Prioritize Users' Mental Models: We initially restructured the flow based on the desired business vision, but user feedback revealed a disconnect from their mental model, prompting a redesign.

Designing for barcode-first systems requires a shift in mindset from typical touch UIs
Embedding yourself in real environments uncovers critical micro-frictions
Even small visual and interaction changes can create massive impact when paired with the right workflow
Prioritize Users' Mental Models: We initially restructured the flow based on the desired business vision, but user feedback revealed a disconnect from their mental model, prompting a redesign.