TWL ERP

Project Overview

Background

The TWL ERP system is designed to integrate multiple e-commerce platforms (such as eGadgetsdeal, XyberTechs, SuperTechNova, OnBuy, and Catch) and streamline supply chain operations through automation.It covers key management processes including order processing, warehousing, logistics, and procurement. Additionally, it consolidates previously fragmented back-end systems across platforms into a unified interface, enabling operations teams to gain better visibility, improve efficiency, and make faster, more informed decisions.

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.

USER RESEARCH

Research Insights

🗣️ Time-consuming cross-platform operations with high error rates

Most warehouse and operations staff reported the hassle of logging into multiple backend systems simultaneously. This often leads to information confusion, slow workflows, and frequent manual error handling or reprocessing, delaying shipments.

🗣️ Resistance and anxiety toward digital transformation

Senior employees expressed reluctance to adopt new systems, worrying that changes might disrupt existing workflows. The design must balance a smooth learning curve with continuity in familiar processes.

🗣️ Lack of real-time overview affects decision-making

Employees reported that they were unable to simultaneously monitor order processing status and inventory changes, which affected efficiency.

🗣️ No standardized communication flow between departments

Different roles (customer service, warehouse, sales) each document progress differently, often resulting in inconsistent information and unclear task ownership.

Problem Definition

📝 Fragmented processes due to multiple platforms

In a multi-platform e-commerce environment, staff must manually log in to multiple systems to manage orders, sync inventory, and generate shipping details. This fragmented workflow is not only time-consuming but also error-prone due to inconsistent data formats and manual handling.
This significantly affects shipping efficiency, customer experience, and increases labor costs and error risks.

📝 User resistance to system adoption

Most frontline employees are seasoned and rely heavily on current workflows. When introduced to new systems, many show hesitation or resistance due to fear of inefficiency or a steep learning curve.
This emotional barrier can undermine system rollout success, requiring a design that is intuitive and respects existing habits.

📝 Lack of consolidated, real-time information for decision-making

Management currently relies on manually compiled reports and verbal updates to assess order status and inventory. This slows down decision-making, especially in time-sensitive situations like restocking and logistics.
Without a comprehensive, real-time view, the organization struggles to respond quickly and efficiently.

📝 Inefficient communication across departments

Departments like customer service, warehouse, and sales often track order status independently, using varied formats. This leads to mismatched information and unclear accountability. For instance, customer service may be unaware if an order has been shipped without repeatedly checking with the warehouse.
The absence of a standardized workflow hampers collaboration and increases the likelihood of miscommunication and delays.

Guideline

Principles

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

Consistency

To minimize the cognitive load caused by switching between multiple e-commerce dashboards, we ensured a consistent UI language across the platform. From function naming to interface layout, everything follows a unified logic to improve usability and reduce the learning curve.

Clarity

To address confusion and frequent errors in operations, the interface emphasizes information hierarchy and visual guidance. Steps are clearly broken down and supported with icons and color cues, helping users quickly identify key tasks and navigate with confidence.

Learnability

Recognizing the anxiety of senior staff toward new systems, we adopted familiar interaction patterns and provided contextual onboarding hints and error messages to ensure a smooth transition and user adaptation.

Efficiency

For high-frequency tasks such as order processing and shipping, we introduced automation, smart field pre-filling, and real-time validation, all aimed at reducing manual work and improving shipping accuracy and speed.

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.

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.

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

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.

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

Next Project

Logistic System