ProShop ERP - Work order Fulfillment System

UX Research

UI design

Inventory system

Manufacturing

01 Overview

Client & Project

ProShop ERP - Work Order Fulfillment System

This project is a web application for ProShop workers to retrieve items from the warehouse inventory to fulfill work order requirements using an intuitive QR scanning workflow. The goal is improve the worker’s productivity by reducing worker’s inventory retrieval time. To achieve this, we introduced several features in the application:

  • QR scan for quick inventory lookup

  • Work order classification and tracking for simplifying search

  • Form value pre-fills for reducing miscalculations

  • Notification functions to improve communication

Duration

3 Months

Tools

Miro, Figma, Notion, Photoshop

Methodology

Agile, Design thinking, Field study, Survey

As UX research lead,

I was responsible to evaluate ways to improve ProShop’s inventory process and refine their products’ information architecture. I addressed them by doing a series of investigations and prototypes:

  • Used their current ERP system to research about company’s current workflows such as tracking and restocking inventory, locating and retrieving items, and rules for organizing inventory.

  • Led the research, design, and implementation of a new work order fulfillment system using QR scans and refine the current information architecture.

  • Collaborated with developers and managers to develop personas, user flows, wireframes, high-fidelity UIs, and interactive Figma prototypes.

  • Led user test sessions and translated feedback into actionable design improvements

Interestingly, the focus of ProShop's design was on their clients, instead ProShop themselves. Since this app is targeted mainly for warehouse workers, I wanted to ensure that our UI flow is user-friendly and intuitive. I collaborated with developers and managers to develop the wireframes and mockups, followed by user testing to evaluate the functionality of the prototypes. Throughout the process, I was able to identify user pain points and in turn designed the onboarding, scanning, and notification functions to further optimize the time it takes to complete the prototype’s intended flow.

02 The Problem

How might we implement an efficient system for shop floors to shorten the time for finding items, filling in data, and minimizing human error to maximize the efficiency of the whole manufacturing process?

For ProShop

How might we improve the user-friendliness and efficiency of our ERP system to reduce training costs and attract more clients?

For ProShop’s clients

03 Discovery

Brainstorm

Key Findings

Workflow Improvements

  • Visualized history tracking function in the system that provide users the latest product information without needing manual communication (particularly more efficient for clients who have several warehouses)

  • Organized content into logical categories and subcategories. This approach ensures that users can easily navigate and locate the information they need without being overwhelmed by excessive text content on a single page.

Streamlined Information Architecture

  • Enable users to search and filter inventory items. Users can either manually enter the item name or work order to initiate a search. The system will display the item's details and highlight its location, enabling users to quickly identify the item's whereabouts within the inventory.

  • Allow users to narrow down their search based on relevant attributes (e.g., product category, location, availability). This helps users quickly find specific inventory items or filter out irrelevant information

Contextual Search and Filtering

  • When users scan a QR code of a work order, the system can display the item's location on the map, providing a clear indication on where to find the item. Users can follow the visual cues to navigate to the designated location efficiently.

  • If possible, we want to enable a way for workers to choose the shortest route to pick up several materials at once.

Item Mapping and Navigation through a visual representation of the inventory

  • Implement automated data validation checks that flag potential errors or inconsistencies during inventory updates. The system should provide real-time alerts and suggestions for correction to minimize manual input errors.

Automated Data Validation

UI Improvements

  • Particularly with the current status of inventory to allow workers to take action in time. These reports can summarize key metrics, track performance indicators, and provide insights into inventory trends

Automatic report generation and notification to assist in keeping data up to date

  • Quantity, item description, Unit of Measurement, Cost Price, Selling Price, Supplier Information, Location, Reorder Point, Expiry or Shelf Life, Transaction History, Serial Numbers or Lot Numbers, Demand and Sales, Data, pictures, QR Codes

Material information displaying

User Research

User Journey- Functionality MVP

This flow is to simulate how shop workers use our app to fulfill work orders and anticipate what they may face on each step of the flow.

I created it before the user test

Objective

To simplify the work order fulfillment flow by addressing bottleneck processes and merging overlapping processes.

Method

(1) Qualitative Research:

We visited one of the client’s warehouse to observe how the workers currently fulfills the work order and to get an idea of the manufacturing processes. I made notes of the workflow, people’s thoughts, and pain points.

(2) In-depth Interview:

We prepared two types of interviews: one for ProShop and one for Mantech (ProShop’s client).

For ProShop, we designed a series of questions for developers and managers to learn about their background and the way they use the ERP system.

For Mantech, we interviewed the shop workers to learn about their pain points based on the current workflow and how they use the ERP system.

Key Findings

After analyzing the interview results and several rounds of team discussions, we ended up proposing to design the following features:

  • Ability to scan QR code on the workstation monitor that uses ProShop’s ERP to retrieve information from work orders onto tablets

  • Ability to scan the QR code on the items/boxes to retrieve details from the database

  • New UI for items/boxes details

  • [New UI for searching & sorting items

  • Ability to scan QR code for checking in & out items

  • New UI for manually confirming check-out items

  • Pre-filled check-out details based on the current work order

04 Design Process

Wireframe+ Mockup

#01 Onboarding and Work Order Review Pages - First Version

  1. Login to the account by typing the email address and password

Final Iteration

2. The work order page is the first interface after login which is information they need to check first.

Feedback

They often used the scan button but were confused about when to use it.

Failed to find out clickable tabs

As workers share the same iPad, their personal information won't be tracked to ensure their privacy

Scan button location: considering the users’ habit of using IPad

Erase the personal account function: Privacy issues

#02 Scanning + Picklist Generation Pages - First Version

Scan QR code on computer for picklist, saving search time.

Insufficient information in pick list

Final Iteration

#03 Work Order Completion - First Version

Use the scan function by clicking the import WO button and allowing the app to access your camera.

3. Check WO

Need to consider the situation where some companies don’t have facilities for QR code

Hard to capture the primary information in short time

Add the workstation (to make sure the usage and order of different materials) category to the picklist page

I added the retrieve tab beside the scan tab providing more options for different situations

Redesign unfold page makes the interface more readable

Once a work order is finished, it will be saved and remain editable for 48 hours.

Users will instantly receive a detailed picklist of items, including information on their location, quantity, ID, and operation number.

Scan the QR code in the box to autofill the forms based on the details in the first column.

Action Plans

Set a logical and clear button system

Feedback

Final Iteration

After retrieving, users back to the WO page to review the picklist

Click confirm, users can choose either back to the main WO page or exit current page

4. Check WO

Action Plans

The completed WO will be imprted in

Redundant steps

  • Confirm

  • Go back

Skip extra confirmation, whenever any items are left, the notification function will inform users

Feedback

Action Plans

Next Step

During the ideation phase of the project, the team presented a more comprehensive workflow to help the client understand how the web app could function within the larger workflow. This led to a list of features that were conceptualized but not developed because of the time constraints of this project. The list of features that should be considered for future development is as follows:

● Generation of QR code from workstation

● Generation of QR codes for items/boxes

● Web app optimization for mobile (development was limited to tablet only)

● Ability to scan QR code on item locations (i.e. a shelf or a room) to retrieve summary & notifications about the area

● Visual interface for locating items (i.e. spatial locations like depth)

● Alternate screens for other types of workers (i.e. inventory manager)

Retrospective

Client Communications

While Proshop, as a client, was responsive, collaborative, and easy to work with, managing the frequency of meetings and setting clear expectations presented a challenge for the team. Although the team scheduled weekly meetings and accommodated occasional additional sessions before their scheduled time, the client's preference for frequent meetings began to encroach on the production time, affecting the project's progress.

Design to Development Process

The most significant challenge for the team arose during the transition from the design phase to the production phase. The client's continuous involvement in every project phase meant that the team received ongoing feedback on their designs. While beneficial for refining future iterations, this extended the design phase, leaving less time for actual production. As a result, the development team faced a tight deadline in the two weeks leading up to the final user test. However, despite the challenges, the team successfully created a functional prototype that achieved all the goals set in the project charter and even included additional features. The development team also discovered bugs in the code that the client would patch in their next update, showcasing the value of their work.