← Back to work
Enterprise · AFU · 2020

AFU Information Center

A centralized enterprise backend that unifies inventory, factory distribution, orders, and procurement across multiple warehouses and sales channels.

Role
UX / UI · Design System
Type
Enterprise backend (B2B)
Year
2020

Background

A control center for complex, multi-channel retail operations.

AFU is a leading Chinese cosmetics company specializing in essential oils and plant-based skincare, with hundreds of branded counters across first- and second-tier cities and a fast-growing product portfolio.

To support that growth, AFU built the Information Center — a centralized enterprise system for internal staff to oversee inventory, factory distribution, order processing, and procurement across multiple warehouses and channels.

AFU Information Center — system selection dashboard
AFU Supply Chain Center — analytics dashboard

Problem / Challenge

01

Data fragmentation

Multiple departments worked with separate tools, causing inefficiencies and data inconsistency.

02

High operational complexity

Managing hundreds of SKUs across channels, warehouses, and factories created significant logistical challenges.

03

Lack of real-time visibility

Managers couldn't track sales, procurement, and production progress in one place.

04

Manual processes

Many workflows relied on manual coordination, increasing the risk of errors and delays.

Frame Layout & Design System

A 12-column grid at a 1920px design size, adapting down to 1440 / 1366px. The system uses 8px as the atomic unit — keeping spacing, components, and data tables consistent across a data-heavy product.

12-col
Grid system for page layout
1920px
Design size, adapting to 1440 / 1366px
8px
Atomic spacing unit across the system
AFU grid specification — columns, gutter, margin, page layout, corner radius
Grid / layout specs
 AFU components — navbar, table, pagination, filter, button tokens
Components / tokens

Design Solutions

01

Replenishment Management

Problem

Manual tracking across multiple spreadsheets caused delays, poor task prioritization, and higher stockout risk.

Solution

A replenishment module with two entry points — by supplier or by product — plus real-time status tracking to speed workflows and reduce idle time.

Impact

Cut creation time, improved accuracy, and enhanced cross-department visibility.

Replenishment module: add by supplier or product, status tracking, order details
Replenishment module
02

Scan-to-Ship Optimization

Problem

Manual data entry for each shipment slowed operations and caused quantity discrepancies.

Solution

Real-time barcode scanning auto-updates quantities, with instant feedback to prevent errors.

Impact

Reduced shipment errors and improved tracking accuracy.

Scan-to-ship: add tracking number, scan products, instant feedback on duplicates
Scan-to-ship
03

Order Center Data Integration

Problem

Order data was scattered across systems, making it time-consuming to check order types, statuses, and timelines.

Solution

Consolidated all order information into one dashboard, with clear filtering and sorting by type, time, and status — no system switching.

Impact

Reduced search time and improved operational efficiency.

Order Center dashboard with filtering by type, time, and status across multiple views
Order center dashboard

What's the Value?

Detailed records and accurate planning that compound over time.

  • Maintaining detailed production and sales records — with accurate procurement planning — boosts revenue while reducing waste.
  • Short term: the platform helps guide sales and promotional strategies.
  • Long term: it supports sustainable growth and keeps the company on the right track.