SPUD logo

FoodX e-grocery management platform

FoodX, a subsidiary of SPUD, operates as a B2B SaaS platform specializing in backend grocery operations, warehousing, and delivery item fulfillment. It aids partners in converting online fulfillment into a gratifying shopping experience for their customers. The platform's web portal serves as a central hub housing various apps with end-to-end fulfillment capabilities, covering inbound, inventory, outbound, and reverse logistics. It is operational at SPUD, Walmart Canada, and Carrefour Europe fulfillment centers.

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 deliverables that 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. This involves maintaining regular communication with product managers, business analysts, software engineers, QA testers, designers, and key stakeholders. I also support the development of digital products while mentoring 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 iconFresh app

End-to-end inventory worker experience

Fresh app

I am responsible for designing the new Fresh app on desktop for warehouse managers and on mobile for team members. This app is crucial for our customers, as they rely on them to maintain inventory quality, control waste, and reduce costs. The app schedules checks based on estimated and recorded expiration dates, and it guides team members to items in their designated shelf locations. The app walks users through a series of steps to ensure inventory expiry dates and counts are accurate, minimizing waste and maximizing freshness.

Fresh app
Fresh app

Goals

  1. Design features with the ability to manage food freshness without increasing labour on inbound or outbound workflows.
  2. Create a flexible and understandable user experience.
  3. Increase in client trust and satisfaction as measured by user satisfaction questionnaire during usability test phase.
  4. Design for new and experienced workers that use the system repeatedly.
  5. Meet web content accessibility standards.
  6. Identify priorities to implement new UI components. 

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. Emphasize accuracy in performing warehouse tasks to avoid costly mistakes. Mistakes remove perfectly edible products from shelves that could have been sent to customers.
  4. Consistent UX writing, information architecture, and user interaction.
  5. Design warehouse visual language to parse information faster.

Desktop requirements

  1. Managers or team leaders can review and assign overdue and upcoming Directed Checks to team members.
  2. Capability to plan and assign item-locations in zones that need to be checked by Inventory team members.
  3. Capability to manage assignment progress.
  4. Capability to report exceptions so issues can be act on.
  5. Capability to review Fresh Check outcomes.

Mobile requirements

  1. Team members can perform Directed Checks that guide them to locations and tell them what to do next for each item's expiry date.
  2. Capability to scan item and location barcodes.
  3. Capability to skip aisles for blocked locations so they can postpone work in a particular aisle.
  4. Capability to enter and capture expiry dates and quantity.
  5. Capability to edit and undo mistakes.
  6. Capability to perform Spot Checks when user suspects a location has an inventory deviation and want to fix it.
  • Timeline

    1 month discovery and design on desktop and mobile counterpart, 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.

  • Warehouse operation & nomenclature

    I visited a SPUD internal warehouse to research inventory touchpoints and activities, such as flow of inventory, worker's immediate environment, and workflow behaviours.

  • User insight & personas

    Power BI reports including general warehouse heatmaps of inventory adjustments by zone, user and time spent. Create warehouse lead and team member personas.

  • Wireframe

    Create wireframes and view ideas and not to have fully functional prototype.

  • User interview & usability test

    I spent two days performing inbound and inventory warehouse work and two days conducting user interviews and usability test features before introducing them to client environments.

  • Review meetings

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

  • Stakeholder sign off

    Walkthrough interactive prototypes to sign off.

  • Asset production & design system

    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
  • QA test

    Production, test, and develpment environment. Separate environment for user acceptance testing to have a stable sandbox for users to learn the system and test it in a production-like environment.

  • Launch

    Launched both desktop and mobile MVP features.
Fresh app

User research

As part of my role in the user experience team, I conducted user interviews with 15 participants from diverse work backgrounds. Through these interviews, I identified unmet needs, challenges, and valuable information that helped us improve inventory freshness.

To further enhance the user experience, I conducted usability tests where participants were presented with mockups and asked to complete specific tasks. By evaluating the results of these tests, I was able to identify task highlights and lowlights, and make necessary improvements to increase task-focused success rates before implementation.

User interview

Manager user stories

I used user stories to understand the user needs I'm designing for based on the information I've gathered from the product team and customer feedback. It specifies the user, their action, and goal. I categorized them based on the user's task from the start to end of their shift. I use them to inform design that is intuitive and user-friendly, addressing pain points.

As a warehouse manager or team lead, I want to...
Conditions of satisfaction
Login to the eGMS portal so that I can login and access the Fresh app (desktop view). Active directory user roles: ICQA coordinator, manager, corporate, and read only access.
See outstanding and upcoming item-locations in zones that need to be checked by team members so that I can review checks that are overdue, due today, and due in the future. I need to be able to troubleshoot issues. Display team members who are logged in to the Fresh app. Do not display team members who are in other apps.
View summary card so that I can see the overdue checks, checks that are due today and problems.
  1. Total amount is dependent on date picker.
  2. Overdue are directed checks due to be completed prior to today.
  3. Due today are directed checks required on the current day.
  4. Problems are issues reported by team members on their handheld devices.
Select date in date picker so that I can investigate today, past and future check work.
  1. Date input and calendar picker is dynamic data.
  2. Default to today’s date.
  3. Date formats are subject to localization.

Review data table so that I can see the active team members working in a zone, and breakdown of checks that are overdue, due today, and problems reported per zone.

  1. By default, sort data table by Reported on timestamp for Leads to see the most recent flagged reports. Display alert icon for overdue checks. Timestamp formats are subject to localization.
  2. Status indicates problems that still require review or are under review.
  3. Zone is the division of SKUs into a set of different zones.
  4. Location is a designated area identified with a series of alphanumeric barcodes used for team members to scan items to ensure accurate quantities and locations.
  5. Item number is a number that the system assigns to an item.
  6. Description of the item.
  7. Reason codes shows why this location has a reported problem. Reason code is submitted by team members on handheld devices.
  8. Reported by are team member IDs that link to the team member drilldown page under the Problems dropdown filter.

Select refresh so that I can have updated content including the summary card, data input, and data table on this page.

I refresh the page often to ensure I am seeing the most up-to-date information, especially if team members are still working on Fresh Checks.

  1. Refresh the data table will fall back to its default sorting and the current data will be updated on the summary page.
  2. Refresh any updatable content, including summary cards, date input, and data table.

Filter by keyword by entering a query into a filter text field so that I can quickly view results.

  1. Display results as the user types. Case-insensitive.
  2. Search symbols, such plus or minus in item quantity and ampersand in item descriptions.
  3. Search punctuation marks, such dashes in locations, colon in timestamps, and brackets, exclamation marks, commas, and apostrophe in item descriptions.

View tooltips in the table column so that I can view decsription of items being checked and observed expiry.

Tooltips for each column title and data in the table.

Select pagination so that I can view the summary column in a predefined number of rows and/or increase or reduce the rows of data.

  1. Pagination defaults to 25 of the data and includes how many lines of data are in the table.
  2. Do not display pagination if the items on the table are less than 25.
  3. Pagination menus show a predefined list of options for the quantity of rows to display: 25, 50, 75, and 100.
As manager or team lead, I want to...
Conditions of satisfaction
Review team members’ progress so that I can see who needs more training, how many problems have been reported, how many Directed Checks and Spot Checks have been completed.
View summary card so that I can see overdue checks, due today checks, skipped aisles, and problems reported by team members.
  1. The total amount is dependent on the date selected.
  2. Overdue are overdue checks that need to be completed.
  3. Due today are today's due checks that need to be completed.
  4. Skipped aisles are skipped aisle triggered by team members.
  5. Problems are reported as location and item issues triggered by team members.

Select a date in calendar picker so that I can investigate today and past date.

Default to today's date and disable future dates. Date formats are subject to localization.

Select Export so that I can export data on this page to have more analysis.

Data on this page is exported to a comma-separated values (CSV) file.

Select zone filter dropdown so that I can see all zones or a single zone to check work is being done.

Dropdown default is Zone and first in the sort order, followed by zones numeric order.

Review data table so that I can review the active team members, their current zone, completed checks, skipped aisles, problems, first check, last check, check per hour, time per check, and time spent information.

  1. Team member is a user who is logged in to the Fresh app. Do not display team members who are in other apps. User ID links to the team member drilldown page under the Check filter dropdown.
  2. Current zone for each team member that is working in. Zone is the division of SKUs into a set of different zones.
  3. Completed checks are per user and per zone.
  4. Skipped aisles are per user and per zone. Data is updated when a team member skips an aisle triggered on their handheld device.
  5. Problem are per user and per zone. Number of problems links to the problems page under zone ID filter dropdown.
  6. First check and Last check timestamp formats are subject to localization.
  7. Checks per hour is the number of checks the user performed within an hour. Tooltip text is "Average checks per hour = total number of checks completed / (last check time - first check time)".
  8. Time per check is the average time it takes a user to perform one check. Tooltip text is "Average time per checks completed = Total minutes / number of checks".
  9. Time spent is the average time it takes a user to perform one check. Tooltip text is "Total time spent for all completed checks = sum of total time per check".
As a manager or team lead, I want to...
Conditions of satisfaction
See reported problems that are submitted by team members so that I can act on these issues by putting back the reports back in the Queue or Remove the work

Note: The risk of reported problems is held until a leadership team member cancels it or places it pack into the queue. If skipped work isn’t cleared, those items will not be checked again for freshness. This can cause expired items to be sent to customers. Skipped work on Fresh should be cleared daily.

View summary card so that I can see the open, queued, and removed problems.

  1. Total number are dependent on the date selected on the date picker.
  2. Open is the amount of problems that needs to be investigated and be put back in the queue or get removed.
  3. Queued is the amount of queued problems actioned by the user.
  4. Removed is the amount of removed problems actioned by the user.

Input date range or select date picker so that I can search team member's work based on the date range, and investigate today and/or past dates.

Disable future dates that had no work done. Date formats are subject to localization. Default to today’s date.

  1. Select remove so that the item(s) will not be checked for freshness. When more inventory is received and moved into this location, a new Fresh Check will be scheduled with new dates.
  2. Select Queue so that I can put the item(s) back into the available work pool with the same Fresh Check dates to be reassigned.
  3. See a confirmation dialog when I select Remove or Queue button so that it prevents access to the rest of the UI until the modal is addressed.
  4. See a snackbar so that I will be informed of a process that the app has performed. I want to select Undo so that I can reverse the action of an earlier action.
  1. Select Remove displays a Remove check confirmation dialog. Select Remove button in the dialog will display Removed snackbar.
  2. Select Queue displays a Return check to queue conformation dialog. Select Queue in dialog will display Queued snackbar.
  3. Snackbars disappear automatically after 2 seconds. Only one snackbar may be displayed at a time positioned at the bottom left screen.
  4. Select anywhere on the snackbar except for the Undo button to dismiss it before the 2 seconds expire.
  5. Select Undo button will reverse the action of an earlier action.
  6. After Removed or Queued successfully, disable Queue and Remove buttons on the page.

Review data table so that I can view Reported on, Status, Zone, Location, Item number and Description, Reason, and Reported by information so that I understand what are the most recent and current actions performed.

I need to review the reason code, go to the location to investigate, and take the appropriate steps to correct the issue. Then return to desktop Fresh app and select Queue if the problem at the location is fixed and a Fresh Check is required. Or select Remove if the problem at the location is fixed, but no Fresh Check is required.

  1. By default, sort data table by Reported on timestamp for Leads to see the most recent flagged reports. Display alert icon for overdue checks. Timestamp formats are subject to localization.
  2. Status indicates problems that still require review or are under review.
  3. Zone is the division of SKUs into a set of different zones.
  4. Location is a designated area identified with a series of alphanumeric barcodes used for team members to scan items to ensure accurate quantities and locations.
  5. Item number is a number that the system assigns to an item.
  6. Description of the item.
  7. Reason codes show why this location has a reported problem. Reason code is submitted by team members on handheld device.
  8. Reported by are team member IDs that link to the team member drilldown page under the Problems dropdown filter.
As a manager or a team lead, I want to...
Conditions of satisfaction

See reports triggered by adjustments so that managers or team leaders can provide feedback on the amount of work being generated to clients or procurement departments. I want to collect data so that I can explain reasons for adjustments, such as compost.

The FoodX system uses expected expiry dates to calculate the last day an item can be reasonably shipped to a customer, transferred to a store, or donated. This information determines what should happen to an item following a Fresh Check.

Select date range and date picker so that I can investigate today and past adjustments.

Date is defaulted to today's date. Disable future dates that there's no work done. Date format is default to localization.

Select Export so that I can export data on this page to have more analysis.

Data on this page is exported to a comma-separated values (CSV) file.

View summary card so that I can see the type of adjustments reported by team members.

  1. Total amount is dependent on date picker.
  2. Keep are positive counts or there are matching physical and virtual counts.
  3. Transfer out is used when transferring products from the warehouse to subsidiary businesses.
  4. Donate removes products that are approaching expiry, but not yet expired, from inventory. Anything after donate is compost.
  5. Compost removes any expired or unsafe products from virtual inventory

Select zone filter dropdown so that I can see all zones or a single zone in the dropdown to check work is being done.

Default is All Zones, and first in the sort order, followed by alphanumeric zone order.

Review data table so that I can see the detail of all adjustments performed based on the date selected. I want to be able to check large adjustments done and make sure they are accurate and not done by accident.

The columns I want to see are Adjusted on, Check, Zone, Location, Item number, Description, Observed expiry, quantity, Action, Adjusted by, and Next check information.

A scenario to use this report is I have an item that is expired on the shelf and I want to know what happened so that I can prevent it from happening in the future. I want to see what adjustments are getting better or worse.

  1. Adjusted on shows the time and date that adjustments were made in virtual inventory for the group of items at that location with the same expiry date. By default, sort data table by oldest timestamp. Timestamp formats are subject to localization.
  2. Check type specifies the type of check performed on the items (Directed Check or Spot Check). A Spot Check is performed because user suspects an inventory deviation at a location.
  3. Zone and Location for item adjusted in.
  4. Item number and Description for item adjusted.
  5. Observed expiry are team member's entered item expiry dates from their handheld device. Date formats are subject to localization. There can be several expiry dates at one location, and each expiry date may have a different action that was taken to.
  6. Quantity is the number of items at a location with the expiry date that a team member entered on their handheld device. Display the unit of measure.
  7. Action it took for each item with the same expiry date.
    1. Keep label Neutral counts (e.g. 10 Ea) match physical and virtual counts. This means there is no change to on-hand quantity values. The quantity that is physically on the shelf matches with what is virtually in Microsft Dynamics 365 system
    2. Keep label Positive counts (e.g. +10 Ea) correspond to keep action only. This means an increase in the on-hand quantity for an item-location. What is physically on the shelf is greater than what is virtually in Microsft Dynamics 365 system.
    3. Compost label Transfer Out label Donate label Negative counts (e.g. -10 Ea) is a decrease in the on-hand quantity for an item-location. What is physically on the shelf is less than what is virtually in Microsft Dynamics 365 system.
  8. Adjusted by are team member ID that links to the team member drilldown page under the Adjustments dropdown filter.
  9. Next check data for the item-location are only displayed for Keep label labels that have a next scheduled Fresh Check date. This value is dynamic. Timestamp formats are subject to localization.
As a manager or a team lead, I want to...
Conditions of satisfaction

Track team members’ completion status, including their first and latest checks, so that managers or team leaders know when the user has started work and how long users spent on a certain amount of work. They want to monitor team members and make sure they are working on the right Fresh Checks and are being productive.

View summary card so that I can see Completed checks, Adjustments, Adjusted out, and Problems reported by team members.

  1. Total amount is dependent on date picker.
  2. Completed checks are directed and Spot Checks.
  3. Adjustments are items that are Keep, transfer out, donate, and compost.
  4. Adjusted out are transfer out, donate, and compost.
  5. Problems reported reason codes are inaccessible, no location barcode, incorrect item, item not found, and no expiry date.

Select Export so that I can export data on this page to have more analysis.

Data on this page is exported to a comma-separated values (CSV) file.

Select filter dropdown so that I can see data table by Checks, Problems, and Adjustments.

Default dropdown is Checks and is first in the sort order, followed by Problems and Adjustments.

Review Checks data table so that I can see this team member's Fresh Checks performed, when it was Checked on, Check type, Zone, Location, Item number, Description, Expected expiry, Observed expiry, and on-hand quantity information.

Review Problems data table so that I can view this team member's reported problems and reason codes. The information I want to see are Reported on, Status, Zone, Location, Item Number/Description, and Reason.

Review Adjustments data table so that I can see this team member's adjustments performed based on the date selected. I want to check large adjustments are done and make sure they are accurate and not done by accident. The information I want to see are Adjusted on, Check type, Zone, Location, Item number, Description, Observed expiry, Adjusted quantity, Action, and Next check.

Checks table columns:

  1. Checked on timestamp formats are subject to localization.
  2. Check type specifies the type of check performed on the items (Directed Check or Spot Check). A Spot Check is performed because user suspects an inventory deviation at a location.
  3. Zone is the division of SKUs into a set of different zones.
  4. Location is a designated area identified with a series of alphanumeric barcodes used for team members to scan items to ensure accurate quantities and locations.
  5. Item number is a number that the system assigns to an item.
  6. Description of the item.
  7. Expected expiry is the last day an item can be reasonably shipped to a customer, transferred out, or donated. This information determines what should happen to an item following a Fresh Check.
  8. Observed expiry is the team member's entered item expiry date from their handheld device. Date formats are subject to localization. There can be several expiry dates at one location, and each expiry date may have a different action that was taken to.
  9. Observed expiry is the team member's entered item expiry date from their handheld device. Date formats are subject to localization. There can be several expiry dates at one location, and each expiry date may have a different action that was taken to.
  10. On-hand quantity is the total amount physically available on shelves, minus items that have been picked in a sales order.

Problems table columns are the same as Problems page, but for a specific team member. Adjustments table columns are the same as Adjustments page, but for a specific team member.

Workflow chart

I created a workflow chart to display the complete path that a team lead and team member take to complete tasks. This chart serves as a visual representation of the process, including entry points, exit points, decision points, bottlenecks, and potential errors or failures.

Workflow chart

Prototype workflows

I delivered wireframes, high-fidelity interactive prototypes, and iterated on design concepts. Throughout the design process, I worked closely with team members and stakeholders to ensure that our designs met their needs and aligned with our design goals. By delivering wireframes and prototypes, I effectively communicate design concepts and gather feedback to iterate on my designs.

Manager workflow team member workflow

Manager design breakdown

Summary feature

Managers or team leaders log into the portal to access and select the Fresh app in desktop view. Active Directory user roles include inventory control quality assurance (ICQA) coordinator, manager, corporate, and read-only access. They must review pending and upcoming items for zones that require Fresh Checks and assign tasks to trained team members.


Summary card

  1. Summary card total amount is dependent on date picker.
  2. Overdue are Directed Checks due to be completed prior to today.
  3. Due today are Directed Checks required on the current day.
  4. Problems are issues reported by team members on their handheld device.

Date input and picker

  1. Date formats are subject to localization.
  2. Date input and calendar picker is dynamic data.
  3. Default to today’s date.
  4. Capability to investigate today, past and future check work.

Refresh

Refresh to update content including the summary card, data input and data table on this page. Data table will fall back to its default sorting and the current data will be updated on the summary page.

Filter by keyword

  1. Display results as the user types. Input is case-insensitive.
  2. Search symbols, such plus or minus in item quantity and ampersand in item descriptions.
  3. Search punctuation marks, such dashes in locations, colon in timestamps, and brackets, exclamation marks, commas, and apostrophe in item descriptions.

Columns

  1. Zone is the area in the warehouse where Directed Checks are required.
  2. Zone ID links to Productivity page under zone ID dropdown filter. Data table default is by Zone in ascending order.
  3. Active team members numbers are users who are logged in to the Fresh app. Do not display team members who are in other FoodX apps.
  4. Overdue, Due today, and Problems columns are displayed.
  5. Problems links to Problems page under zone ID filter dropdown to troubleshoot issues.

Productivity feature

Managers and team leaders can see how team members progress so they know who needs more training, how many issues have been reported, and how many Checks have been performed. They can verbally assign tasks to team members so they don't need to manually assign checks to team members in the desktop UI.


Summary card

  1. Summary card the total amount is dependent on the date selected.
  2. Overdue are overdue checks that needs to be completed.
  3. Due today are today's due checks that needs to be completed.
  4. Skipped aisles are skipped aisle triggered by team members.
  5. Problems are reported location and item issues triggered by team members.

Date input and picker

Select today and past date. Default to today's date and disable future dates. Date formats are subject to localization.

Export

Export data on this page to have more analysis. Data on this page is exported to a comma-separated values (CSV file).

Zone filter

Select all zones or a single zone to check work being done. Dropdown default is Zone and first in the sort order, followed by zone’s numeric order.

Columns

  1. Team member is a user who is logged in to the Fresh app. Do not Display team members who are in other apps. User ID links to the team member drilldown page under the Check filter dropdown.
  2. Current zone for each team member that is working in. Zone is the division of SKUs into a set of different zones.
  3. Completed checks is per user and per zone.
  4. Skipped aisles is per user and per zone. Data is updated when a team member skips an aisle triggered on their handheld device.
  5. Problem is per user and per zone. Number of problems links to the problems page under zone ID filter dropdown.
  6. First check and Last check timestamp formats are subject to localization.
  7. Checks per hour is the number of checks the user performed within an hour. Tooltip text is Average checks per hour = total number of checks completed / (last check time - first check time).
  8. Time per check is the average time it takes a user to perform one check. Tooltip text is Average time per checks completed = Total minutes / number of checks.
  9. Time spent is the average time it takes a user to perform one check. Tooltip text is Total time spent for all completed checks = sum of total time per check.

Problems feature

Review item or location issues reported by team members who are unable to perform a Fresh Check. Manager or team lead must troubleshoot it and then put it back in the queue or remove it. Problems should be investigated as soon as possible to prevent customers from receiving expired products.


Remove or queue action

Incorrect item

  1. Manager needs to perform an inquiry to determine if the correct item is in the correct location.
  2. Select Remove if item is in the correct location, but Fresh data is incorrect.
  3. Or select Queue if you have performed a Spot Check to reset the information for that location.

Item not found

  1. Select Remove if the location is empty, then perform a location inquiry to confirm the location is virtually empty. If the location has virtual inventory, perform a cycle count to ensure physical inventory matches virtual inventory quantities.
  2. Or select Queue if the location has physical inventory, then follow up with the team member to understand why it was reported.

No expiry date

  1. Manager needs to determine if the item does not need an expiry date.
  2. Select Remove if no expiry is needed and contact the procurement team to ensure the item is removed from future Fresh Checks.
  3. Or select Queue if there is an expiry date (it was missed) and follow up with the team member so they are aware for next time.
Queue action only

Inaccessible

  1. Manager need to work with team members to ensure the area can be accessed before putting it back in the queue. Some locations are hard to get to; for example, top steel.
  2. Select Queue if the location becomes accessible, such as getting a forklift for top steel.

No location barcode

  1. Manager needs to create a barcode for that location.
  2. Select Queue once a location barcode is created.

Summary card

  1. The total amount is dependent on the date selected on the date picker.
  2. Open problems that need to be investigated and be put back in the queue or get removed.
  3. Queued problems actioned by the user.
  4. Removed problems actioned by the user.

Date range input and picker

Search team members work based on the date range and investigate today and/or past dates. Disable future dates that had no work done. Date formats are subject to localization. Default to today’s date.

Remove or Queue actions

Remove action button is used so that the item(s) will not be checked for freshness. When more inventory is received and moved into this location, a new Fresh Check will be scheduled with new dates. Selecting the button displays a Remove check confirmation dialog. Selecting Remove button in the dialog will display Removed snackbar.

Queue action button is used to put item(s) back into the available work pool with the same Fresh Check dates to be reassigned. Selecting the button displays a Return check to queue conformation dialog. Select Queue in dialog will display the Queued snackbar.

Undo in the snackbar will reverse the action of an earlier action. Upon successful Undo, disable Queue and Remove buttons on the page.

Export

Export data on this page to have more analysis. Data on this page is exported to a comma-separated values (CSV) file.

Zone filter

See all zones or a single zone in the dropdown to check work is being done. Dropdown default is Zone and first in the sort order, followed by zones numeric order.

Columns

  1. Reported on timestamp formats are subject to localization.
  2. Status indicates problems that still require review or are under review.
  3. Zone is the division of SKUs into a set of different zones.
  4. Location is a designated area identified with a series of alphanumeric barcodes used for team members to scan items to ensure accurate quantities and locations.
  5. Item number is a number that the system assigns to an item.
  6. Description of the item.
  7. Reason codes show why this location has a reported problem. Reason code is submitted by team members on handheld device.
  8. Reported by are team member IDs that link to the team member drilldown page under the Problems dropdown filter.

Adjustments feature

Managers or team leaders review details of all adjustments made on a selected day so that they can can provide feedback on the amount of work being generated. They are able to explain reasons for adjustments to clients and procurement department. The system uses the expiry date that was entered by team members to calculate the last date that a product can be adjusted out.

Fresh for Leads

Summary card

  1. Summary card total amount is dependent on date picker.
  2. Keep are positive counts or there are matching physical and virtual counts.
  3. Transfer out is used when transferring products from the warehouse to subsidiary businesses.
  4. Donate removes products that are approaching expiry, but not yet expired, from inventory. Anything after donate is compost.
  5. Compost removes any expired or unsafe products from virtual inventory

Export

Export data on this page to have more analysis. Data on this page is exported to a comma-separated values (CSV) file.

Date range input and picker

Investigate today and past adjustments. Date is defaulted to today's date. Disable future dates that there's no work done. Date format is default to localization.

Zone filter

Select all zones or a single zone to check work is being done. Default is All Zones, and first in the sort order, followed by alphanumeric zone order.

Columns

  1. Adjusted on is the time and date that adjustments were made in virtual inventory for the group of items at that location with the same expiry date. Timestamp formats are subject to localization.
  2. Check type specifies the type of check that was performed.
  3. Zone , Location, Item number and Description are for item adjusted.
  4. Observed expiry are team member's entered item expiry date from their handheld device. Date formats are subject to localization.
  5. Quantity is the number of items at a location with the expiry date that a team member has entered on their handheld device. Display the unit of measure.
  6. Action it took for each item with the same expiry date.
    1. Keep label Neutral counts (e.g. 10 Ea) are matching physical and virtual counts. This means there is no change to on-hand quantity value. The quantity that is physically on the shelf matches with what is virtually in Microsft Dynamics 365 system
    2. Keep label Positive counts (e.g. +10 Ea) correspond to keep action only. This means in increase to the on-hand quantity for an item-location. What is physically on the shelf is greater than what is virtually in Microsft Dynamics 365 system.
    3. Compost label Transfer Out label Donate label Negative counts (e.g. -10 Ea) is a decrease in the on-hand quantity for an item-location. What is physically on the shelf is less than what is virtually in Microsft Dynamics 365 system.
  7. Adjusted by are team member ID that links to the team member drilldown page under the Adjustments dropdown filter.
  8. Next check data for the item-location are only displayed for Keep label labels that have a next scheduled Fresh Check date. This value is dynamic. Timestamp formats are subject to localization.

Team member feature

Track team members’ completion status, including their first and recent checks, so that managers or team leaders know when the team member has started work and how long it took to complete a certain amount of work. They want to monitor team members and make sure they are working on the correct Fresh Checks and are being productive.


Summary card

  1. Total amount is dependent on date picker.
  2. Completed checks are directed and Spot Checks.
  3. Adjustments are items that are Keep, transfer out, donate, and compost.
  4. Adjusted out are transfer out, donate, and compost.
  5. Problems reported reason codes are inaccessible, no location barcode, incorrect item, item not found, and no expiry date.

Filter by checks, problems and adjustments

Default filter dropdown is Checks and is first in the sort order, followed by Problems and Adjustments.

Export

Export data on this page to have more analysis. Data on this page is exported to a comma-separated values (CSV) file.

Checks columns

  1. Checked on timestamp formats are subject to localization.
  2. Check type specifies the type of check performed on the items (Directed Check or Spot Check).
  3. Zone is the division of SKUs into a set of different zones.
  4. Location is a designated area identified with a series of alphanumeric barcodes used for team members to scan items to ensure accurate quantities and locations.
  5. Item number is a number that the system assigns to an item.
  6. Description of the item.
  7. Expected expiry is the last day an item can be reasonably shipped to a customer, transferred out, or donated. This information determines what should happen to an item following a Fresh Check.
  8. Observed expiry is the team member's entered item expiry date from their handheld device. Date formats are subject to localization.
  9. On-hand quantity is the total amount physically available on shelves, minus items that have been picked in a sales order.

Problems and Adjustments columns

Problems data columns are the same as Problems page, but for a specific team member. It is to investigate team member's reported problems and reason codes. Adjustments columns are the same as Adjustments page, but for a specific team member. It is to review team member's adjustments performed.


Desktop design specification

Filter by keyword

Filter by keyword is case-insensitive and users can see results as they type. Search symbols, such plus or minus in item quantity and ampersand in item descriptions. Search punctuation marks, such dashes in locations, colon in timestamps, and brackets, exclamation marks, commas, and apostrophe in item descriptions.

Pagination

Pagination

Pagination defaults to 25 of the data and includes how many lines of data are in the table. Do not display pagination if the items on the table are less than 25. Pagination menus show a predefined list of options for the quantity of rows to display: 25, 50, 75, and 100.

Column alignment and sort

Column headers alignment is the same as its content. Select on column always sort by ascending order. Select again is sorted by descending order. Use ellipses to indicate truncated text.

  1. Textual data: Left-aligned, sort A to Z and Z to A.
  2. Alphanumeric data: Left-aligned, sort 0 > 9 followed by A to Z and 9 > 0 followed by Z to A.
  3. Qualitative numbers: Left-aligned, sort oldest to newest and newest to oldest.
  4. Quantitative numbers: Right-aligned, sort 0 > 9 and 9 > 0.
  5. Labels and buttons: Center-aligned.

Team member design breakdown


Start Directed Check

Conditions of satisfaction
  1. Fresh Check contains two types of Checks; Directed and Spot.
  2. Directed Check allows team members to execute on the work initiated by their leader and be directed to the first shelf location.
  3. Start in the Directed segment control.
  4. 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 date from a calendar so that I can perform the scheduled Directed Check work.

Conditions of satisfaction
  1. Date formats are subject to localization.
  2. Tap Change opens the date picker.
  3. Default date to today and if today’s zones are completed, display the next day Fresh Check and so forth.
  4. Disable previous days and days with completed checks.

Step 1. Select zone

User story

As a team member, I want to be able to select a zone so that I can perform a Directed Check that is overdue or due today for the zone selected.

User scenario

Working in challenging environments, such as freezer zones, can be physically demanding and uncomfortable for team members. To address this issue, we allow team members to switch between zones, such as moving from a freezer zone to an ambient zone, and then return to the freezer zone.

Conditions of satisfaction
  1. User must select a zone Ambient zone Freezer zone Cooler zone Produce zone from a list that contains continuous, vertical indexes of zone IDs. Numbers are first in the sort order, followed by letters.
  2. Metadata labels are number of checks overdue and due on the selected date for each zone. 100,000+ metadata label is the maximum number that can be displayed in the label. Use commas to separate thousands from hundreds.

Step 2. Scan optimal path

Ambient zone Shelf location barcode label
User story

As a team member, I want to be able to scan any warehouse location barcode so that I can tell the Fresh system where I want to start performing Directed Checks and have the system determine my optimal work path.

Conditions of satisfaction
  1. Scan location to indicate starting point used for first travels to a zone.
  2. Prioritize overdue work first. Sort location by alphanumeric.
  3. Once location barcode is scanned, initialize user's optimal work path.
  4. Then the user must perform all Directed Checks in the zone.
  5. Scan field state is always focused.
Enter manually

Enter manually drawer

User story

As a team member, I want to be able to manually enter the 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.
  2. Once the drawer opens, the text field is active with the virtual keyboard.
  3. Same error message handling is applied for scanning and manually entering a location barcode.
  4. Display clear Clear icon assistive element in the text field to let users clear an entire input field. Icons appear only when input text is present.
  5. Enable Continue button if input text is present.
  6. Display check Check icon in the text field if the cart barcode is valid.
Scan location

Step 3. Scan location

Ambient zone Shelf location barcode label
User story

As a team member, I want to be able to scan a warehouse location barcode that I am directed to by the Fresh system so that I can indicate to the Fresh system that I am physically at the location that needs to be Fresh Checked.

Conditions of satisfaction
  1. Fresh app directs the user to a location based on a work distribution algorithm.
  2. The team member must go to the location and scan the location barcode to confirm the user is at the right location.
  3. Fresh app needs to validate that the user is at the correct location as directed by the system.
  4. Proper location scan validation rules to return success when user scanned a location correctly.
  5. Return errors if user scanned an incorrect or problem location.
  6. Enter manually behaviour is the same as step 2.
Skip aisle

Skip aisle action

User story

As a team member, I want to be able to skip all work in the current aisle so that I can avoid congestion and work in another aisle.

User scenario

Multiple users are performing other warehouse activities, such as replenishment in an aisle and they are blocked or the location is on a pallet that requires machinery to bring it down.

Usability test

Participants do not want to skip by shelf location, which forces them to keep skipping multiple items. Instead, they want to skip aisle.

Conditions of satisfaction
  1. Tap Skip aisle bypass all scheduled work for all locations in the aisle.
  2. Skip aisle is pushed to the end of the work queue and is available when the aisle is less congested and more accessible.
Report a problem

Report a problem drawer

User story

As a team member, I want to be able to report a problem so that I can flag the problem for a manager or team leader to review and resolve it. Then I will continue to execute the remaining work.

Conditions of satisfaction
  1. Report a problem is available during the location and item barcode scanning steps.
  2. Tap Report a problem button to select a reason code in the drawer.
  3. Tap Report button displays Reported snackbar with the ability to undo.
  4. On desktop, a manager or team lead will be able to review and resolve these reported problems captured in a report.

Step 4. Scan item

Pasta Item barcode label
User story

As a team member, I want to be able to scan a warehouse item barcode that I am directed to by the Fresh system so that I can indicate to the system that I have found the correct item that needs to be checked.

Conditions of satisfaction
  1. Fresh system needs to validate that the user scanned the correct item barcode that the user was directed to by the system.
  2. User must look for the item specified in that location and scan its barcode to confirm the user have the correct item.
  3. Proper item barcode scanning validation rules to return success when user has scanned an item barcode correctly.
  4. Return errors when scanning an incorrect or problem item.
  5. Enter manually behaviour is the same as step 2.
  6. Report a problem behaviour is the same as report a problem in step 3.2.
Item expiry date

Step 5. Item exiry date

Enter each expiry date and quantity for the item

User story

As a team member, I want to be able to input my observed expiry date, item quantity, and specify item unit of measure (UoM) so that I can capture the information when checking items at a location and have the system determine the correct downstream action I should take for this item.

Expiry date input

Conditions of satisfaction
  1. Default to the expected expiry date listed in the item freshness profile.
  2. User must review the expiry dates on all physical inventory on the shelf.
  3. User must repeat these steps until all expiry dates are recaptured.
  4. User can enter multiple expiry dates and quantities to add to the Added expiry dates list.

Quantity stepper and UoM

  1. Quantity stepper default is 0. Tap quantity field to use virtual keyboard.
  2. UoM are configurable values and it may be different per client.
  3. First UoM that is entered from the quantity stepper will be displayed in the Added expiry dates list.
  4. Tap Add button to add the entered expiry date and quantity to the Added expiry dates list.
  5. Report a problem behaviour is the same as report a problem in step 3.2.
  6. Display Required amount so that user know how many items need to be adjusted or are missing.
Item expiry date

Added expiry dates list

  1. Combine the same Item expiry date units that was added by the user. Units used to tally the number of items will be combined in the quantity column.
  2. Sort table by closest date of expiry to furthest.
  3. Fresh system will tell the user what to do with those units. Display the adjustment action label based on the expiry date captured.
    1. Keep (cycle count) is putting item(s) back on the shelf.
    2. Donate (adjustment out) is putting item(s) to a donation pile.
    3. Compost (adjustment out) is putting item(s) into compost.
    4. Transfer Out label (adjustment out) is putting item(s) into transfer out area.
  4. Tap Direct check button to complete, then the corresponding inventory actions are recorded in Microsoft D365 as inventory transactions.
  5. After completion, the user is directed to the next check.

Remove adjustment line

Usability test

Team members were frustrated that they were unable to undo or delete their entered expiry quantity. I proposed an editable and undo solution.

conditions of satisfation
  1. Capability to remove lines from the Added expiry dates list so that user can fix a mistake.
  2. Tap Remove remove displays Remove expiry date confirmation dialog. Once confirmed, the adjustment line is removed from the list.
Check completed snackbar

Check completed snackbar and undo

  1. If the zone is not yet complete and there are more item-locations to check, display the Check completed snackbar.
  2. Snack bars disappear automatically after 2 seconds.
  3. Tap anywhere on the snack bar except for the Undo button to dismiss it before the 2 seconds expire.
  4. Tap Undo will reverse the action of an earlier action so that the user can quickly continue to work on the Item expiry date step.
Zone completed dialog

Zone completed dialog

User story

As a team member, I want to be able to know when I have completed a zone so that I can select a new zone to work on.

Conditions of satisfaction
  1. If current zone is completed, display the dialog.
  2. Tap OK closes the dialog.
  3. Then the user can select the next zone to work on (back to step 1).
Abandon confirmation dialog

Abandon check

User story

As a team member, I want to be able to abandon the current check so that I can cancel the progress.

Conditions of satisfaction
  1. Abandonment can happen when the user leaves the page mid-way before completing a check.
  2. Prompt Abandon check confirmation dialog if user is midway 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.
Spot Check

Start Spot Check

Correct inventory deviations

User story

As an ICQA team member or team lead, I want to be able to perform a Spot Check so that I can correct an inventory deviation in a shelf location.

User scenario

If a customer complaint is made for item freshness, a leadership team member or ICQA team member can complete a Spot Check at all the locations for the item to ensure rotation and freshness for customers.

Conditions of satisfaction
  1. Spot Check is done when a user suspects a location that has an inventory deviation.
  2. This function is available when a user wants to correct a location or is assigned to do so by leadership.

Step 1. Scan location

  1. Scan the location barcode that user wants to perform a Spot Check to proceed to the next step Scan item.
  2. Successfully scanned location barcode takes user to the next step.
  3. If the system does not recognize the location combination, it will not allow you to proceed. Entries must be verified.
  4. Barcode scan field, Report a problem, and Change behaviour is the same as Directed Check.

Step 2. Scan item

  1. Scan the item barcode that user wants to perform a Spot Check to proceed to the next step Item expiry date.
  2. Barcode scan field, Report a problem, and Change behaviour is the same as Directed Check.
Spot Check

Step 3. Item expiry date

Enter expiry date and quantity for the item

User story

As a team member, I want to be able to input observed expiry date, item quantity and item units so that I can capture the information observed when checking items at a location and have the system determine the correct downstream action I should take for this item.

Conditions of satisfaction

Behaviour is the same as Directed Check.

Check completed snackbar and undo

  1. If completed, display Check completed snack bar message.
  2. Tap Undo to reverse the earlier action.
Check completed

Check completed snackbar and undo

  1. If completed, display Check completed snack bar message.
  2. Tap Undo to reverse the earlier action.

Desktop UX writing

I place a high priority on ensuring that error messages are clear and instructional, providing users with a clear path to resolving any issues they encounter. By presenting solutions in a clear and concise manner, I help users continue with their tasks without memorizing complicated instructions. In addition, I work closely with a QA tester and business analyst to finalize test cases.

To ensure that my UX writing aligns with the needs of warehouse workers, I have developed a set of best practices that addresses their unique needs, behaviors, and contexts. I also work with a technical writer to finalize user-friendly confirmation, alert, and information writing that speaks clearly to users. Finally, I pay close attention to nomenclature, using plain language and ensuring that warehouse-specific terms are understandable to new workers.

UI component

Description

No matches were found

No matches were found

Text: No matches were found for 'keyword'. Try a new keyword.

Manager access a page and enters keyword(s) in the filter text field, but there are no matches found.

No data

No records to display for selected date

Manager accesses a page, but there is no data to be displayed at this time for the selected date.

Text: No adjustments for [date]. Select a different date.

Adjustments page has no data.

Text: No problems for [date]. Select a different date.

Problems page has no data.

Text: No work for [date]. Select a different date.

Productivity or team member page has no data.

Critical error

Critical unspecified API error

Manager accesses a page and tries to perform an action, but there is a connection error with the API or a communication problem with the server.

Generic text: Something went wrong. If the problem persists, notify system administrator.

If a critical unspecified error occurs, the error message will be displayed on the entire screen. It is something unexpected and usually has no control from the user’s side, and there is no way to mend it under any circumstances. It requires the direct involvement of developers.

Something went wrong

Non-critical unspecified error

Manager accesses a page and tries to perform an action, but there is a connection error with the API or a communication problem with the server.

Generic snackbar text: Something went wrong

If an unspecified error occurs during the work flow, a snack bar error message will display at the bottom left corner. This happens when a user interacts with the app and performs the wrong action or sends wrong data that is often overlooked from the code logic side. Non-critical error doesn't break the flow, but lets user know that the action is impossible under current circumstances, unless user corrects it.

Unable to retrieve data

Failure on data fetch

Snackbar text: Unable to retrieve data

Manager accesses a page, but there is a failure of some kind when the app is trying to fetch the data.

No internet connection

No internet connection

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

Users have no internet connection.

Connection timed out

Connection has timed out

Text: Connection has timed out.

User session has timed out.

Mobile UX writing

UI component

Description

Scan barcode field error Scan barcode field error

Location barcode errors

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

User is notified by the Fresh system when the location scanned does not match the expected location barcode value so that user will be aware that an error has occurred and can take corrective action. Scan or input a new barcode value.

Helper text: Incorrect location type.

Scans or enters a valid barcode that was setup with the wrong location type.

Helper text: Location needs a zone assignment.

User is notified by the Fresh system when the location scanned does not have a zone assigned in the system so that user will be aware that an error has occurred and can take corrective action. Scan or input a new barcode value.

Helper text: Location not found.

User is notified by the Fresh system when the location scanned does not exists in the system so that the user will be aware that an error has occurred and can take corrective action. Scan or input a new barcode value.

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

Tries to confirm and complete a location, but item profile has issues.

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 exists.

Helper text: Item profile not found.

Scans or enters an item barcode that exists, but does not have an item profile in Cosmos.

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 in code. In this case, a user scans an item barcode, but the item number on the item profile is wrong due to a data issue.

Processing indicator

Processing indicator

Processing indicator in disabled action button

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

No work available

No work available

Text: No work available.

No Directed Check today and in the future.

Critical error

Critical unspecified API error

Generic text: Something went wrong. If the problem persists, notify system administrator.

Team member access a page and tries to perform an action, but there is a connection error with the API or a communication problem with the server. It is something unexpected and usually has no control from the user’s side, and there is no way to mend it under any circumstances. It requires the direct involvement of developers.

No internet connection

No internet connection

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

Users have no internet connection.

Connection timed out

Connection has timed out

Text: Connection has timed out.

User session has timed out.

Fresh app

Results

Design system

One of my key responsibilities is to create clean and detailed UI artifacts that adhere to the FoodX design system and establish UX writing guidelines. For details, view the FoodX Design System.

Data tracking

Operational reports can be implemented through Power BI.

Client impact

Fresh app is a real-time inventory management tool that helps our clients:

  1. Schedule Fresh Checks and maintain real-time inventory accuracy on a daily basis.
  2. Remove close to expired or expired products from warehouse shelves.
  3. Reduce food waste by donating or transferring out products to subsidiary businesses.
  4. Keep higher quality inventory on warehouse shelves and deliver fresh products to customers.

Impact on sustainability

The issue of food waste is a significant challenge facing our world, with approximately $400 billion of food being wasted before it even reaches store shelves. At FoodX, we recognize the importance of reducing waste and increasing efficiency throughout the supply chain.

Through our solution, we provide our clients with the tools they need to effectively manage inventory freshness and reduce waste. By identifying when food is about to spoil and enabling the transfer of food to retail or donation centers, our clients can play an active role in reducing waste and helping those in need.

Overall, we believe that our inventory management solution can be a powerful tool in addressing the issue of food waste, providing our clients with the resources they need to make a positive impact on the environment and the communities they serve.

Credits

Inbound Implementation Team

Product Manager Brendan Seppala
Project Manager Sam Bahrini
Assoc. Product Manager Quinton Bradley
Business Analyst Sola Akinsola
Implementation Lead Chris Salahub
FE Software Engineer Stan Biryukov
BE Software Engineer Paul Mendoza
BE Software Engineer Tomas Morton
Sr. Software Engineer Nathan Magnus
Sr. Software Enginner Test John Warford
Quality Assurance Test Marin Gechev
Software Engineer Test Allan Le

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
VP of Engineering John Cornell
Sr. Business Analyst Bettina Sy
SVP of Global Solutions Reza Bafandeh

Next case study