View
Category :
UI UX
/
Year :
2024
/
Responsibility :
End to end UI UX design
/
Client :
Techworkslabs

TWL ERP

Project Overview

Background

The TWL ERP system is dedicated to assisting in the integration of existing online platforms (such as eGadgetsdeal, XyberTechs, SuperTechNova,OnBuy, and Catch) with automated management. This includes automation of inventory, procurement, and supply chain management, with additional automation features currently in development.

Goals & Objectives

The team wanted to provide users with faster and more convenient automated management within the TWL ERP system. Also, we hope to refactor our infrastructure for the future scale.

Role & Deliverables

In this project, I worked closely with PM and two engineers. I was responsible for the end to end UI and UX design, from defining the problem to deliver the final visual artifact.

Challenges

This project had quite a few technical dependencies with other teams & products, we also needed to deal with many prioritizations to make sure we can deliver MVP on time.

Results & Impact

We launched the MVP in four months, making website management much simpler and easier. At the same time, we received a lot of positive feedback and some suggestions from users. The current version is still being optimized.
Guideline

Principles

The following principles are what I complied when I was designing the new experience:

Consistent

Even though we're designing for the United Kingdom、Hong Kong and Taiwan market which is very unique, we still need to align with the global brand at the foundation level to make sure we have a consistent experience across devices, countries, and products.

Accessible

We want to make sure the navigation is intuitive, and that important features were presented and optimized in a way that we had seen in the past.

Clarity

The copies we provide need to be concise and clear, the wordings we're using should be consistent and understandable.
Before the design process began, we came up with a bunch of concrete ideas and wireframes that can help me go straight to the feasible design solution.
Deliverables

The primary color design of this system is based on the original TWL logo, which was then expanded to develop additional colors and design elements.

Order List

In the order list, the system first suggests the most suitable delivery method for each order item. The operator then selects the orders that need to be shipped, assigns, and the system distributes the items according to the initially suggested method.
In the order list, the system first suggests the most suitable delivery method for each order item. The operator then selects the orders that need to be shipped, assigns, and the system distributes the items according to the initially suggested method.
After distribution is completed, the operator can view the assigned orders in the shipping list, modify the assignment method if necessary, and confirm before starting the shipment.

Shipment Ticket

After distribution is completed, the operator can view the assigned orders in the shipping list, modify the assignment method if necessary, and confirm before starting the shipment.

Browse Shipment

Items that have begun shipping will be displayed on this page. If there is no stock in the warehouse during the shipping process, the item status will show as "on backorder." The operator will need to restock the warehouse, and the shipping process for the item in that order will need to be re-initiated on this page.
Items that have begun shipping will be displayed on this page. If there is no stock in the warehouse during the shipping process, the item status will show as "on backorder." The operator will need to restock the warehouse, and the shipping process for the item in that order will need to be re-initiated on this page.
In the warehouse list, the supply status of each warehouse is shown in badge format. If changes are needed, the operator can go to the detailed page to update the information, and the system will save automatically.

Warehouse Item

In the warehouse list, the supply status of each warehouse is shown in badge format. If changes are needed, the operator can go to the detailed page to update the information, and the system will save automatically.

QR & SKU to Print

QR to Print:
After connecting the APP and the printer, the operator receiving the order packages can scan the QR code on the package to check how many items will be shipped.

SKU to Print:
After scanning the item's SKU label:
If the order contains only one SKU, the package type is classified as "Simple Pack". If the order contains multiple SKUs, the package type is classified as "Complex Pack". If the scanning process for an order is not completed, it can be skipped temporarily.
QR to Print:
After connecting the APP and the printer, the operator receiving the order packages can scan the QR code on the package to check how many items will be shipped.

SKU to Print:
After scanning the item's SKU label:
If the order contains only one SKU, the package type is classified as "Simple Pack". If the order contains multiple SKUs, the package type is classified as "Complex Pack". If the scanning process for an order is not completed, it can be skipped temporarily.
Manage procurement for each invoice, including SKU number, quantity, and price. Users can upload purchase details and payment proof.
After adding an invoice purchase record, an inventory entry process is required. When selecting an invoice, users must receive and store the SKUs associated with that invoice.

Procurement Management

Manage procurement for each invoice, including SKU number, quantity, and price. Users can upload purchase details and payment proof.
After adding an invoice purchase record, an inventory entry process is required. When selecting an invoice, users must receive and store the SKUs associated with that invoice.
Next Project
Logistic System