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