Background

Tradebeyond acquire Pivot88 and plans to launch a new inspection app, replacing the legacy products

Tradebeyond is a SaaS company providing solution for retailer to manage their supply chain operation. Our inspection app allowing inspectors to document and record products quality at the factory. These product can be soft goods like apparel and hard goods like machine. In 2023, Tradebeyond made a strategic move by acquiring Pivot88, with one of the key objectives being the integration of both companies' inspection products. The goal was to create a single inspection app and compete to become the leading product in the market.

I was in charge of the UI/UX design on this project from ideation to implementation.

Challenges

How might we minimize re-training cost, while improving the existing legacy apps?

Like all major revamp project, the biggest challenge will be the backlash of user when they transit to the new product. Therefore, the new app needs to be easily pick up by existing user while solving UI/UX issues in the legacy apps.

Design Process

Redesign base on P88 Inspection App, but consolidate all functionalities from both P88 & TBY

In the early-stage, we had concluded to design the new app base on Pivot88 app due to the much larger user base they have. Doing so can reduce re-training to majority of current user. To overcome the challenge, I follow the process below when designing the new inspection app.

Since I am using Pivot88's design as base, most work lies in designing a new set of UI that both Pivot88 & Tradebeyond existing inspection app can fit into. Click here to view the case study on how I establish the design system for the new inspection app, as well as other Tradebeyond's product.

Key Design

Major redesign / new design that enhance usability

1.) Redesign Measurement Keyboard

During the inspection, inspector needs to log the measurement of the product at different POM (Point of Measurement). For instance, the inspector might need to check the sleeve length or the shoulder width of a T-shirt. To do so, they first click on the cell of the POM they are measuring, an overlay will appear with the target value inputted. Then they can either change the value by clicking the "-" & "+" or click the arrow to move on to next cell.

The old design has some usability issues:

The new design fixes the issue by :

2.) Introduce AQL Meter (Result Visualization)

In the summary section, the result is calculated by a industry rule call AQL. This rule determine whether the numbers of defect found (e.g. critical or major defect) is accept or reject. The old design shows the numbers in a table view, which is not intuitive to interpret. Therefore a new design is introduced to:

3.) Added Responsive Design

Neither the existing apps have proper responsive design as they are mainly design for tablet. For the new inspection app, a UX friendly mobile view is consider to be a selling point. Therefore, certain parts of the app need to be optimize for smaller screen.

As-is

New Design

As-is

New Design

4.) Improve Result Indicator

One of the pain point of inspector during inspection is they always have to scroll away to check out the current report result. A global result indicator is introduced to allow inspector to beware of the current report status constantly. They can also click on it to view the detail summary.

5.) Mandatory Field Alert Prompt

User Story:

"As an inspector, I want to have a quick way to go through unfilled mandatory fields , so that I don't have to find them manually"

To address this, a mandatory field alert prompt design is introduce to facilitate inspector to quickly finish the report with quick navigation to mandatory field.