• FoodX
SPUD logo

FoodX e-grocery management platform

FoodX, a subsidiary of SPUD, functions as a B2B SaaS platform, offering backend grocery operations, warehousing, and fulfillment services for delivery items. Our platform is meticulously designed to support partners, such as Walmart Canada and Carrefour Europe, in turning online fulfillment into a seamless and satisfying shopping experience for their customers.

The heart of our operations lies in the web portal, serving as a central hub that hosts a suite of apps with end-to-end fulfillment capabilities. This includes handling inbound, inventory, outbound, and reverse logistics. This comprehensive approach enables our partners to efficiently manage their entire fulfillment process in one place, streamlining operations, and elevating the overall customer experience.

Sr. UX/UI Designer in FoodX team

As a member of the inbound and outbound teams, my role involves designing new and existing products for FoodX's desktop and mobile platforms. I collaborate with colleagues through workshops, user workflows, wireframes, and high-fidelity interactive prototypes to deliver exceptional user experiences. My responsibilities include producing high-quality design deliverables that effectively communicate concepts and solutions, as well as creating clean and detailed UI artifacts that adhere to the FoodX design system.

I actively improve and standardize the user experience of our products by maintaining regular communication with product managers, business analysts, software engineers, QA testers, designers, and key stakeholders. I also mentor other team members to drive effective UX design and user research processes.

Apps I have worked on

Inbound icon

Streamline

Create Inbound Shipment Declarations and prioritize receiving.

Inventory app icon

Fresh

 Check the quality and quantity of on-hand inventory. 

Inventory app icon

Replenishment

Optimize the restocking of pick locations.

Outbound app icon

Delivery

Plan deliveries, assign drivers, and setup store locations.

Outbound app icon

Solve

Manage issues and complete orders before shipping.

Fresh app

Inventory app iconReplenishment app

End-to-end inventory worker experience

Goals and challenges

I lead the user experience design for the new Replenishment mobile app. Replenishment is the process of stocking pick shelves from overstock inventory. Managers create replenishment work items on desktop, then team members execute the tasks on mobile devices. They need to replenish the goods on time to avoid delays in order fulfillment or undelivered customer orders.

FoodX

Design overview

Design an efficient and intuitive new mobile app so that our clients no longer need to print manual reports to execute the replenishment process. Existing paper-based processes are inefficient, environmentally wasteful, and immeasurable.

Mobile requirements

  1. Ability to choose between two workflows so that labour may be allocated to address bottlenecks.
  2. Ability to pick inventory from a bulk location to a staging location or warehouse cart through directed task ID generated by the manager.
  3. Ability to put away inventory from staging location or cart to fixed shelf location on a per-item basis.

Design challenges

  1. Make design decisions that balance the needs of all parties by making collaborative exercises.
  2. Incorporate user feedback and usability testing into designs by identifying pain points at internal warehouse.
  3. Design for new and experienced workers who use the system repeatedly.
  4. Identify priorities for implementing new user interfaces. 
  5. Provide UX writing that is clear and consistent.
  6. Intuitive navigation flow.
  7. Design visual languages that parse information faster when needed.
  8. Meet web content accessibility standards.

Guiding principles

  1. Design a modern, consistent, intuitive and accessible platform.
  2. Improve end-user productivity to better servce our clients.
  3. Improve workers' speed and quality by completing tasks faster while reducing the number of user errors.
  4. Ensure inventory accuracy and efficiency. Inaccuracies can result in mistakes when filling a customer’s order and create work for other warehouse teams that will have to investigate and resolve these differences.
Fresh app

Design process

  • Timeline

    1 month discovery and design, 6 to 8 weeks implementation and QA, 1 week user acceptance testing, 1 week pilot, and 2 weeks stabilization.

  • Initial process

    Define UX goals and metrics for features that will meet user needs and determine success.

  • User research

    Visit internal warehouse to understand existing paper-based workflow, flow of goods, locations (zone, aisles, bay, shelf and slots), and working environment. I user test features before introducing them to customer environments.

  • User insight and personas

    Power BI reports including replenishment KPI's, such as total replenished lines and units by user and zone.

  • User interview and usability test

    Understand product direction based on user needs and problems. User needs report asking about warehouse worker attitudes towards workflow.

  • Review meetings

    Design prototypes for overall interaction, UX writing, and prioritize. Review wireframes, workflows, high-fidelity prototypes, and iterate on concepts.

  • Stakeholder sign-off

    Walkthrough interactive prototypes to sign-off.

  • Design system and asset production

    Guide UX features, UI components, and accessibility specs. Final asset productions include:

    1. XD interactive prototypes
    2. Miro user flow
    3. Task flow video recordings
    4. Zero Height design system documentation
    5. Zeplin design specifications
    6. Documentation covering all scenarios

  • Launch

    Launched both desktop and mobile MVP features.
Fresh app

Team member user stories

I utilized user stories to grasp user needs, actions, and goals, extracting insights from both the product team and customer feedback. I organized user needs according to the user's tasks throughout their shift, leveraging this information to guide design choices and craft intuitive and user-friendly wireframes, prototypes, and UI artifacts that address specific pain points.

Feature or item
As a warehouse team member, I want to...
Conditions of satisfaction
1.00 Feature

User action: Select replenishment app on FoodX mobile platform.

 Bulk location Select the type of replenishment work that I want to perform so that I can execute on picking from bulk or putting it away to the picking location. Present user with option to select the work to pull product or to put away product.
2.00 Feature

User action: Select Restock workflow (pick from bulk).

 Bulk location Select Restock workflow and be directed to each location and notified of the item and quantity to pick from the bulk location so that I can place the item in a cart (or staging location) so that it could be put away. Present user with option to select the work to pull product.
3.00 Feature

User action: Select task (date, zone, task ID).

 Zones See a listing of zones that have work available so that I can select the work item to start pulling product against.
  1. Display work items only that have lines where product needs to be pulled.
  2. Select date and task ID (zone) selector.
  3. If work in progress, user cannot select task ID.
  4. Note: For date selector, there could be use cases where work is assigned; but a calendar date has rolled over - there could be active work in a previous date. Work cannot be assigned for a future date.
3.10 Item

User action: Scan cart barcode (validate cart).

 Scan cart Scan a pre-printed barcode that is affixed to a cart so that I can track the work that is being actioned on.
  1. Display static information: zone and task ID from previous step.
  2. User scans the cart barcode through the mobile device or enters manually.
  3. Validate that the cart exists in Microsoft Dynamics 365.
  4. Lock the task ID only for the pick from bulk workflow until the user completes or backs out of their picking workflow.
  5. Ability to go to previous step.
3.20 Item

User action: Scan location barcode (validate bulk picking location).

 Scan location See the location from which I will pick inventory prominently displayed on the screen so that I can know where to go find the product and can confirm I'm in the right location by scanning the location barcode.
  1. Display static information: The location of the item to pick from bulk.
  2. User scans the location barcode through the mobile device or enters manually.
  3. Validate location is an exact match and successful confirmation of location progresses user to the next step.
  4. Display skip location (see 3.25 item).
  5. Ability to go to previous step.
3.25 Item

User decision: Skip location.

 Temporarily bypass a location so that a team member can come back to it later. Reprioritizes to the bottom of the queue.
3.25 Item

User action: Scan item barcode (validate item to be picked from bulk).

 Scan item Scan the universal product code (UPC) of the product so that I can ensure I am picking the correct product from the slot.
  1. Item verification scan: User must scan the UPC on the physical item to confirm the correct product is being pulled. This to account for locations that may contain multiple items (more scenario likely for bulk).
  2. User scans the item barcode through the mobile device or manually enters UPC.
  3. Display static information: Location ID, Item Number, Item Description, Quantity to pick, Unit of Measure.
  4. Ability to go to previous step.
3.30 Item

User action: Enter item quantity (confirm quantity to be picked from bulk).

 Staging locationInput the quantity for non-variable weight items that I am picking from the location so that I can update inventory to maintain inventory accuracy.
  1. Input the quantity on number pad. User can override the quantity to pick.
  2. User cannot confirm a quantity greater than the total quantity in the bulk location.
  3. Note: For validation, a user can pick more inventory than requested. For example, there's a single unit left in bulk and it's better to pull the inventory down. The trade-off is that it may not fit in the picking location.
3.40 Item

User action: Enter item variable weight (confirm weight being picked from bulk).

 Staging location Input the quantity and weight for variable weight items that I am picking from the location so that I can update inventory to maintain inventory accuracy.
  1. If the item is a variable weight item, provide an input field for each quantity entered.
  2. Provide a warning if a value input is outside of the weight thresholds of the product.
  3. User cannot confirm a total weight value greater than what is currently in the bulk location.
  4. Must have a weight value in each provided field in order to proceed.
  5. Note: Potential problem case, takes all physical items and inputs the actual weights. However, the total weight input is greater than the value in the slot. The verification should display the total remaining in the slot as the user may need to input a value so that they can carry on.
3.45 Item

User decision: Undo.

 Undo a confirmed action so that I can correct any errors.
  1. Undo returns to the previous step. Previous values that the user input into quantity or weight should pre-populate the screen so that the user may review, change, and resubmit their selection.
  2. Undo appears for 5 seconds or until the user proceeds to the next step.
  3. Clearing the undo will commit the action to update inventory.
Feature or item
As a warehouse team member, I want to...
Conditions of satisfaction
4.00 Feature

User action: Select Restock workflow (put away).

 Staging locationScan an item from replenishment cart and be directed to the picking location of the item so that I can replenish the picking location. Present user with option to select the work to put away product.
4.10 Item

User action: Scan cart barcode (validate existing cart).

 Scan cartScan a pre-printed cart barcode that is affixed to a cart so that I can I could track the work that is being actioned on.
  1. Display static information: zone and task ID from previous step.
  2. User scans the cart barcode through the mobile device or enters manually.
  3. Validate that the cart exists in Microsoft Dynamics 365.
  4. Lock the workId only for the pick from bulk workflow until the user ends completes or backs out of their picking workflow.
  5. A valid scan progresses user to the next step.
  6. Ability to go to previous step.
  7. When putting away, even though someone may still be picking from bulk into the cart, another team member may immediate start put away actions.
4.20 Item

User action: Scan item barcode (validate item taken from the cart).

 Scan itemScan an item from the replenishment cart so that I can start the process of putting it away.
  1. User scans item or manually enters a UPC.
  2. Validate that the item belongs to the cart.
  3. Ability to go to previous step.
  4. Note: Edge cases (problems that occur at an extreme operating parameter) can be same item, different task IDs, same cart.
4.30 Item

User action: Scan location barcode (validate picking location).

 Shelf locationSee the picking location of the item prominently displayed on the screen so that I can put the product in the proper location.
  1. Item verification scan: User must scan the UPC on the physical item to confirm the correct product is being pulled. This to account for locations that may contain multiple items (more scenario likely for bulk).
  2. User scans the location barcode through the mobile device or enters manually.
  3. Display static information: Location ID, item number, item description, quantity to pick, and unit of measure (UoM).
  4. Display static information: Location ID, item number, item description, quantity to pick, and unit of measure (UoM).
  5. Display skip location (see 4.25 item).
  6. Ability to go to previous step.
4.35 Item

User decision: Skip location.

 Temporarily bypass a location so that a team member can come back to it later. Reprioritizes to the bottom of the queue.
4.40 Item

User action: Enter item quantity (confirm quantity to be put away).

 Picking locationConfirm the quantity for the non-variable weight item that I am putting away into the picking location so that I can update inventory to maintain inventory accuracy.
  1. Input the quantity on number pad.
  2. User can override the quantity to pick.
  3. Cannot confirm a quantity greater than the total quantity in the cart location.
  4. Ability to go to previous step.
  5. Note: Unlike picking, putting away less than the required quantity at first may just indicate that the user didn't take all the items off the cart.
4.50 Item

User action: Enter item variable weight (confirm weight to be put away).

 Picking locationConfirm or input the weight(s) for the variable weight item I am picking from the location so that I can update inventory to maintain inventory accuracy.
  1. If the quantity being put away equals the total quantity on cart, then the user doesn't need to input the weight. We assume that the picker keyed in the correct weight values.
  2. If the quantity does not equal the total quantity on cart, then fields must be provided for the user to input the weight, since we do not know which specific quantity of the item they are putting away.
  3. Must validate that the total weight put away doesn't exceed the value in the cart.
  4. Back button.
4.55 Item

User decision: Undo.

 Undo a confirmed action so that I can correct any errors.
  1. Undo returns to the previous step. Previous values that the user input into quantity or weight should pre-populate the screen so that the user may review, change, and resubmit their selection.
  2. Undo returns to the previous step. Previous values that the user input into quantity or weight should pre-populate the screen so that the user may review, change, and resubmit their selection.
  3. Undo appears for 5 seconds or until the user proceeds to the next step.
  4. Clearing the undo will commit the action to update inventory.

Workflow chart

I created a workflow chart that illustrates the complete path a team member takes to complete their tasks. This chart maps out the entry point to the exit points, decision points, and identifies any bottlenecks and return errors (failures).

Workflow chart

Prototype workflow

I delivered wireframes and tested high-fidelity interactive prototypes with end-users. I was able to gather valuable feedback and iterate on concepts to improve the overall user experience.

Team member workflow

Mobile design breakdown


Stage 1. Start Retrieve

User story

As a team member, I want to select the type of replenishment work that I want to perform so that I can execute on Retrieve.

Conditions of satisfaction
  1. Start stage 1 of replenishment in the Retrieve segmented control.
  2. Pull-to-refresh effect is disabled to prevent page reloads in the Chrome browser and app crashes triggered by vertical content scrolling.

Change date

User story

As a team member, I want to be able to select a previous date that has active work so that I can complete tasks that were not completed.

Conditions of satisfaction
  1. Date format is subject to localization. Default date is today.
  2. If there is no work available, default to the previous date if available.
  3. Tap Change opens the date picker to select a previous date that has work available.
  4. Disable previous dates that have no work available and future dates since work cannot be assigned in the future.

Step 1. Select task

User story

As a team member, I want to see a listing of zones that have work available so that I can select the work item to start pulling product against.

Conditions of satisfaction

Task selector

  1. If user has not selected a task, display number of tasks to complete in a metadata label for the date selected. 100,000+ metadata label is the maximum number that can be displayed in the label. Use commas to separate thousands from hundreds.
  2. If user has selected a task, display the Zone ID, Task ID, and metadata label for the number of lines in progress.
  3. Tap task selector opens Select task drawer.

Select task drawer

  1. User sees a list of zones and must select a task to proceed.
  2. Zones represent a different temperature. Only display zones that have work available. A single zone can have multiple tasks. First letter of location indicates the zone colour Ambient zone Freezer zone Cooler zone Produce zone. The list is sorted by zone ID. Numbers are first in ascending order (0 > 9), followed by letters in ascending order (A to Z).
  3. Task ID format is YYYYMMDD-ReplenType-Zone-Sequence . Sort by task in ascending order (0 > 9) which would then enforce first-in-first-out (FIFO) which means that products stored first are the be retrieved first.
  4. Only one team member can execute on a task. Task ID is locked by the picker.
  5. Display Some require forklift text to indicate bulk high items that require forklift.
  6. For in use tasks, it's locked by the picker until the user completes or abandons the workflow. In use tab is view only. Sorted by zone ID. Numbers are first in ascending order (0 > 9), followed by letters in ascending order (A to Z).

Step 2. Scan cart

Retrieve cart Cart barcode label
User story

As a team member, I want to scan a pre-printed barcode that is affixed to a cart so that I can track the work that is being actioned on.

Conditions of satisfaction
  1. Scan cart barcode represents a virtual location.
  2. If user successfully enters or scans cart barcode, automatically smooth scroll down anchor to the next step, Scan location.
  3. Tap Change opens the previous step to make a change.

Enter manually drawer

User story
As a team member, I want to be able to manually enter the cart barcode so that I can use it as a workaround step if the device scanner is not working.
Conditions of satisfaction
  1. Tap Enter manually button opens the enter manually drawer to enter barcode.
  2. Once the drawer opens, the text field is active while displaying the virtual keyboard.
  3. If the input text is not present, disable the Continue button.
Text field assistive elements
  1. Assistive elements provide additional details about text entered in the field.
  2. Display clear Clear icon in text field to let users clear an entire input field. Icons appear only when input text is present.
  3. If input text is present, enable Continue button.
  4. Display check Check icon in text field if the barcode is valid.

Step 3. Scan location

Ambient zone Shelf location barcode label
User story

As a team member, I want to see the location from which I will pick inventory so that I can go find the item and scan the location barcode to confirm I'm in the correct location.

Conditions of satisfaction
  1. User must pick item from bulk location and place it into the scanned cart.
  2. Location is locked until the user completes or backs out of their picking workflow.
  3. Tap Change opens the previous step to make a change.
  4. Tap Enter manually button opens the enter manually drawer to enter barcode using the virtual keyboard.
  5. If user successfully enters or scans the barcode, automatically smooth scroll down anchor to the next step, Scan Item.
Skip location confirmation dialog

Skip location

User story

As a team member, I want to be able to skip the location so that I can work on another location because the current location is inaccessible.

Conditions of satisfaction
  1. Skip location allows a team member to temporarily bypass a pick so that a user can come back to it later.
  2. Tap Skip location opens a confirmation dialog.
  3. Confirmed skip location reprioritizes current location to the bottom of the task.

Step 4. Scan item

Coffee bag Item barcode label
User story

As a team member, I want to scan the universal product code (UPC) of the product so that I can ensure I am picking the correct product from the slot.

Conditions of satisfaction
  1. User must scan the item barcode to proceed.
  2. Tap Enter manually button opens the enter manually drawer to enter the barcode.
  3. If user successfully scans or enters the barcode, auto-smooth scroll down anchor to the next step, which is Enter total amount (step 5.1) or Enter item weight (step 5.2) depending on if the item is non-variable weight or variable weight.

Step 5.1 If item is non-variable weight

Coffee bag
User story

As a team member, I want to enter the quantity that I am picking from the location so that I can update inventory to maintain inventory accuracy.

Conditions of satisfaction

Enter total amount in UoM input stepper

  1. User must enter the total amount from the location using the input stepper.
  2. Input stepper are two-segment UI controls used to incrementally increase or decrease a numeric value. Tap minus to decrease the numeric value. Tap plus to increase numeric value.
  3. Virtual numeric keypad automatically opens for this step. If user closed the keypad, user can tap on the input stepper text field to re-open.
  4. Retrieve specific: Default input stepper total amount is 0 with the UoM. In this case we are using Ea (Each) which is the base UoM.

Continue with quantity mismatch dialog

Retrieve-specific: 0 item weight is an allowable quantity when adding item to cart. If user entered 0 or more inventory than requested, display Continue with quantity mismatch confirmation dialog.

Retrieved snackbar

Retrieved or task completed snackbar and undo

User story

As a team member, I want to undo a confirmed action so that I can correct my errors. After undoing, I want to see previous values that I entered so that I can quickly review, change, and resubmit.

Conditions of satisfaction
  1. Tap Retrieve button prompts Retrieved or Task completed snackbar to inform the user of a process that the app has performed.
  2. Display Retrieved snackbar if the user has added an item to cart and there are more lines in the current task. Then the user is required to scan the next shelf location.
  3. Display Task completed snackbar if all current task-lines is completed (picked or skipped). Then the user is required to select a new task (step 1).
  4. Tap Undo in the snackbar will reverse the action of the earlier action. In this case, previously entered quantity or weight values will pre-populate so that the user may review, change, and resubmit.
  5. Display Undoing... snackbar if the undo in process. Display Undone snackbar if undo has been processed.
  6. Snackbar disappears automatically after 5 seconds. Tap anywhere on the snackbar except for the Undo button to dismiss it before the 5 seconds expire. It is positioned at the bottom of the screen. Only one snackbar may be displayed at a time.
Item is variable weight

Step 5.2 If item is variable weight

Turkey

Enter weight for each item you add to the cart (e.g. Turkey ~4-6Kg)

User story

As a team member, I want to input the weight and quantity that I am picking from the location so that I can update inventory to maintain inventory accuracy.

About variable weight

A variable weight is the exact weight of an individual food item. Examples include meat, blocks of cheese, vegetables, and fruit. These items are often sold in bulk and priced by weight, rather than by discrete UoM. To simplify receiving, the average weight for each unit is recorded when it first arrives in the warehouse, but the actual weight for each packaged unit of an item can be slightly different.

Discrepancies between the virtual and physical quantities of an item can occur as it gets received, put-away, replenished, cycle counted, and picked. Team member's entered and confirmed variable weights on mobile would be displayed in the manager's UI report on desktop to help capture these instances so that the virtual weight in the system can be updated with the physical weight.


Conditions of satisfaction

Kilogram input field

  1. User must enter the weight of each item that will be added to the cart.
  2. Sort by the sequence entered. Do not combine same weight units added.
  3. Tap remove remove prompts Remove item weight confirmation dialog.
  4. Tap chevron icon to show or hide the confirmed weight container. Chevrons point in the direction where the action will occur. Hide the icon if no weight has been added.
  5. Tap arrow upward to smooth scroll to the top of the page.
  6. Add button is always enabled. Out-of threshold weights are accepted.
  7. Continue with quantity mismatch dialog behaviour is the same as step 5.1.

Weight is out-of threshold tooltip

  1. Ability to add item weight that is out of the threshold. There is no hard block since data could be wrong.
  2. If the added item is out-of threshold, display alert Alert in the Added item weights list next to the kg added. Tap icon displays Weight is out of threshold tooltip.
  3. If user entered an item weight that is out-of threshold and tap Add enabled button, display alert message Weight should be between [0.00] kg and [0.00] kg in input fields helper text (see test case below).

Retrieved or task completed snackbar and undo

Tap Retrieve button prompts Retrieved or Task completed snackbar. Snackbar and Undo button behaviour is the same in step 5.1.

No longer assigned to this task alert dialog

No longer assigned to this task

Alert dialog

User story

As a team member, I want to see the No longer assigned to this task alert dialog in this mobile app if a manager has unassigned this task in the desktop app.

Conditions of satisfaction (retrieve specific)
  1. Supervisors are able to unassign a task on their desktop app so that they can self-serve potential issues in the system.
  2. If supervisor unlocks the item in the desktop manager UI that is currently in use, display No longer assigned to this task alert dialog in the team member mobile UI.
  3. On mobile, if tap OK button in the dialog and there are more tasks to complete, display Retrieve screen to select a new task.
  4. On mobile, if tap OK button in the dialog and there is no more task to complete, display No work available screen.

Stage 2. Start Restock

User story

As a team member, I want to start on Restock workflow so that I can scan an item from the retrieved cart, be directed to the location of the item, and replenish the picking location.

Conditions of satisfaction

Tap Restock in the segmented control. Restock work are available when Retrieve work is done.

Change date

Date picker behaviour is the same as Retrieve.


Review carts to restock

Available and in use carts drawer

User story

As a team member, I want to review the number of task-lines on each cart so that I have an idea of where to prioritize unless directed by management.

Conditions of satisfaction
  1. Tap number of carts button opens Carts drawer to view available and in use carts. Users do not need to select a zone to start.
  2. Available tab displays zone ID, cart ID, and number of task-lines for each available cart.
  3. In use tab displays zone ID, cart ID, number of tasks-lines, and user ID for in use cart.
  4. Multiple team members in each zone ID may execute on a cart. It may not always be the same person who did the initial picking.
  5. Same cart that is ready to put away can be in different zones.
  6. Same item can be in different tasks in the same cart.
  7. Display zone ID and number of task-lines on each cart so users can have an idea of where to prioritize unless directed by management.
  8. Sort by zone ID so that user can decide which zone, then which cart to grab. Numbers are first in ascending order (0 > 9), followed by letters in ascending order (A to Z).

Step 1. Scan cart

Restock cart Cart barcode label
User story

As a team member, I want to scan a barcode that is affixed to a cart so that I can track the work that is being actioned on.

Conditions of satisfaction

If the user successfully enters or scans the cart barcode, take the user to the next step Scan item. Enter manually and Change behaviour is the same as Retrieve.

Step 2. Scan item

Ice cream Item barcode label
User story

As a team member, I want to scan an item barcode from the Retrieved cart so that I can start the process of putting away.

Conditions of satisfaction
  1. Required Amount is the quantity that was entered from the Retrieve workflow. It is also the amount the user in the Restock workflow must take off the cart.
  2. Successful barcode scan or input takes the user to the next step Scan location.
  3. Enter manually and Change behaviour is the same as Retrieve.
Scan location barcode

Step 3. Scan location

Freezer Shelf location barcode label
User story

As a team member, I want to see the location of the item displayed on the screen so that I can put the product in the proper location.

Conditions of satisfaction
  1. Successful barcode scan or input takes user to the next step Enter Total Amount (step 4.1) or Verify item weight (step 4.2) depending if the item is variable weight or not.
  2. Enter manually, Skip location, and Change behaviour is the same as Retrieve.

Step 4.1 If item is non-variable weight

Ice cream

Verify total amount

User story

As a team member, I want to confirm the quantity that I am putting away into the picking location so that I can update inventory to maintain inventory accuracy.

Conditions of satisfaction
  1. User must validate the total amount.
  2. By default, display the total amount that was entered from Restock workflow.
  3. Ability to edit entries if there's descrepency.
  4. If quantity does not match with the required amount and user tap Restock, display Continue with quantity mismatch confirmation dialog to proceed.
  5. Restock specific: Do not automatically open the numeric keypad.
Restocked snackbar

Restocked or cart completed snackbar and undo

User story

As a team member, I want to undo a confirmed action so that I can correct any errors. After undoing, I want to see previous values that I entered so that I can quickly review, change, and resubmit.

Conditions of satisfaction
  1. Tap Restock button prompts Retrieved or Cart completed snackbar.
  2. Display Restocked snackbar if there are more items in the current cart to complete. Then the user is required to scan the next item in the cart.
  3. Or display Cart completed snackbar if there are no more items in the cart. Then the user is required to scan another cart.
  4. Snackbar and Undo behaviour is the same as Retrieve.

Step 4.2 If item is variable weight

Turkey

Make sure weight for each item matches with the items in the cart (e.g. Turkey ~6-8Kg)

User story

As a team member, I want to verify or input the weight(s) for the variable weight item I am picking from the location so that I can update inventory to maintain inventory accuracy.

Conditions of satisfaction

Added item weights list

  1. User must verify weight of each item.
  2. By default, display the weights of each item that was entered from Retrieve.
  3. Ability to edit entries if there's descrepency.

Kilogram input field

  1. If user removed all weights, hide added items weight list and display Enter item weight input.
  2. If Added amount equals to Required amount, hide the Enter item weight input.
  3. Disable Add button until user has entered a valid item weight.
  4. Enable Add button if user has entered a valid item weight.

Restcoked or cart completed snackbar and undo

Tap Restock button displays the Restocked or Cart completed snackbar. Snackbar and undo behaviour is the same as Restock step 4.1.

Abandon task confirmation dialog

Abandon task

Confirmation dialog

User story

As a team member, I want to start on another workflow without completing the current task so that I can do other warehouse work.

Conditions of satisfaction
  1. Retrieve or Restock abandonment can happen when a user leaves the page before completing a task.
  2. Prompt confirmation dialog if user has achieved at least one step through the process and:
    1. Changes date in date picker.
    2. Changes task in the Retrieve Select task drawer.
    3. Changes another app in the app launcher.
    4. Changes workflow in the segmented control.
    5. Or tap back button in Android OS or Chrome browser.
  3. Abandoned task puts it back in the Select task drawer under the Available tab.

Mobile UX writing

I provide users with instructional error messages that clearly explain how to fix the problem. I ensure that these messages are easy to understand, removing any guesswork and allowing users to continue with their tasks without having to memorize complex instructions. I work closely with the Director of Product Management to finalize test cases for the Replenishment app.

In addition to error messages, I have also created UX writing guidelines that address the specific needs, behaviours, and contexts of warehouse workers. These guidelines provide best practices for creating user-friendly confirmation, alert, and informational messages that speak clearly to our users.

Working alongside a technical writer, I ensure that our writing is easy to understand and uses plain language. I also ensure that any warehouse nomenclature used in the app is understandable for new warehouse workers, reducing confusion and increasing efficiency.

UI component

Description
Scan barcode field error Scan barcode field error

Cart barcode error

Helper text: Cart barcode does not exist.

Scans or enters a cart barcode that does not exist.

Scan barcode field error Scan barcode field error

Location barcode errors

Helper text: Location barcode does not match [location ID].

Cannot scan or enter a different location barcode.

Helper text: Incorrect location type.

Scans or enters a valid barcode, and it was setup with the wrong location type.

Helper text: Location not found.

Scans or enters a location that does not exist.

Generic error helper text: Cannot complete check. Information about the item profile has changed.

Tries to confirm and complete a location, but Item Profile has issues.
Scan barcode field error Scan barcode field error

Item barcode errors

Helper text: Item barcode does not match [item ID].

Cannot scan or enter a different item barcode.

Helper text: Item does not appear in inventory.

Scans or enters an item barcode that does not exist.

Restock-specific helper text: Item not recognized in [cart ID] cart.

Scans an item barcode from a replenishment cart. Error message must occur if it is an item not recognized in the cart. A scenario is someone placed an item in the cart by accident.
Scan barcode field error Scan barcode field error

All barcodes default error

Helper text: Please refresh the page or contact a system administrator.

Default error message is displayed when the error is not covered on code. In this case, a user scans an item barcode, but the item number on item profile is wrong due to data issue.
Weight should be between [0] kg and [0] kg.

Weight is out-of threshold

Text: Weight should be between [0] kg and [0] kg.

User enters item weight that is out of threshold. Enable Add action button as we are accepting weights that are out of threshold. If tap Add enabled button, display Weight is out of threshold tooltip text in the Added item weights list.

Non-variable weight

Non-variable and variable weight item error

Variable weight

Non-variable and variable weight item error

Not enough virtual inventory in location

Text: Not enough virtual inventory in [location ID]. Please make the correction to continue.

Applies to variable and non-variable items. Retrieve or Restock button is always enabled. Tap button displays the error message. User must update in Microsoft D365 and do cycle count to continue Restock.
Non-variable weight item error

Cannot be greater than the required amount

Restock-specific helper text: Cannot be greater than the required amount.

Cannot restock more from the cart. If user inputs an amount greater than required, display the error message.

Processing indicator

Processing indicator

Processing indicator in disabled action button

The front-end will need to wait until we get a response from the back-end before proceeding.

No internet connection

No internet connection

Text: You're offline. Check your Wi-Fi connection.

No internet connection. Wifi off outlined icon placement is 80 px from the bottom of the top navigation bar.

Connection timed out

Connection has timed out

Text: Connection has timed out.

User session has timed out.

No work available

No work available

Text: No work available.

No replenishment work created by the manager.

Fresh app

Results

Design system

I create clean and detailed UI artifacts that adhere to the FoodX Design System. This ensures a consistent look and feel across all our products, creating a unified user experience. Additionally, I establish UX writing guidelines that provide best practices for creating user-friendly confirmation, alert, and informational messages.

Data tracking

With the introduction of the new Replenishment app, we are replacing paper-based processes and enabling the tracking of data with an effective workflow. This data can be leveraged to create operational reports through Power BI, providing valuable insights that enable us to optimize our processes and drive business growth.

Business outcome

The Replenishment app provides warehouse managers with a better view of replenishment activities, enabling them to allocate labor hours more efficiently. This leads to increased productivity and reduces the cost per order, while also improving on-time grocery delivery.

Client impact

Replenishment app is a real-time inventory management tool that benefits our clients with a solution with expected returns in:

  1. Effective use of labour hours.
  2. Reduction in cost per order.
  3. Reduction in workers' travel time.
  4. Improvement in on time grocery delivery.

Credits

Outbound Implementation Team

Director of Product Management Rob Sung
Assoc. Product Manager / Business Analyst Nina Dehzad
Product Manager Rodrigo Pipoli
Business Analyst Charith Wijesiri
Lead Developer Michael Becker
Sr. Software Engineer Lead Igor Adirin
Sr. FE Developer Nishant Desai
Sr. Software Developer Sarvnaz Yavari
Sr. Software Engineer Dmytro Nikulin
Software Engineer Muhammad Asfour
Software Developer Negar Hadjiha
Software Developer Cyril Ngyen
QA Automation Engineer Krystsina Kimajeva

Creative Team

Sr. UX/UI Designer Tina Kao
Design Manager Gonzalo Hernandez
Sr. Technical Writer Bonnie Lee La Madeleine
Director of Creative Strategy Anthony Pratico

Stakeholders

VP of Product Jason Boast
Sr. Business Analyst Bettina Sy
SVP of Global Solutions Reza Bafandeh
VP of Engineering John Cornell
Director of Operations Richard Lee

Next case study

Gears 5 website Xbox marketing
Xbox Game Pass Microsoft logo

Gears5.com UX/UI Design

Design vision & strategy

End-to-end user experience, monetize digital distribution, & attract players towards our funnel to other features.

View case study
Hivebusters background
Tina Kao logo

Looking for help with design? Contact me.